openlayer簡単な例

2720 ワード


var vectorLayer = new OpenLayers.Layer.Vector("points");	
		map.addLayer(vectorLayer);
		var markers = new OpenLayers.Layer.Markers( "Markers" );
		var imageUrl = 'http://www.openlayers.org/dev/img/marker.png';
		var jz = new OpenLayers.Icon(imageUrl,size,offset);
		var size = new OpenLayers.Size(21,25);
		var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
		for(var i=0;i<datas.length;i++) {
			var point = new OpenLayers.Geometry.Point(Number(datas[i].lon), Number(datas[i].lat));
			//    
			/*var style_point = {
					 graphicWidth : 21,
					 graphicHeight: 25,
					 externalGraphic:imageUrl,
					 graphicTitle:datas[i].value
			};*/
			//    
			var style_point = {
                 strokeColor: '#000000',
                 strokeWidth: 1,
                 strokeDashstyle: "solid",
                 pointRadius: 1,
                 strokeOpacity: 0.8,
                 fillOpacity: 0.8,
                 label:datas[i].value,
                 fontSize:'12px',
                 fontFamily:'  ',
                 labelXOffset:0,
                 labelYOffset:-15,
                 labelAlign:'m',
                 //fillColor: '#000000'
			};
			var pointFeature = new OpenLayers.Feature.Vector(point, null, style_point);
			vectorLayer.addFeatures([pointFeature]);

			//    
			var marker = new OpenLayers.Marker(new OpenLayers.LonLat(datas[i].lon,datas[i].lat),jz.clone());
			markers.addMarker(marker);
			map.addLayer(markers);
			createPopup(marker, datas[i]);
		}
		

		//      
		/*marker.events.register("mouseout", marker, function(evt){
			popup1.hide();
		});*/

		if(!map.getCenter()){
			map.zoomToMaxExtent();
		}
		
	}
	
	//  
	function createPopup(marker, data) {
		//           
		 marker.events.register("click", marker, function(evt){
		 var html="<b>&nbsp;&nbsp;"+data.level+"<br>&nbsp;&nbsp;   :"+data.value+" </b>";
		 var popup1=new OpenLayers.Popup("popup1",
							new OpenLayers.LonLat(data.lon,data.lat),
							new OpenLayers.Size(200,50),
							html,
							true);
		 popup1.setBackgroundColor("#ffffff");
		 popup1.setOpacity(12);
		 popup1.setBorder("1px solid #d91f12");
		 map.addPopup(popup1);
		});
	}