openlayer简单例子

最新推荐文章于 2024-09-23 15:03:13 发布

iteye_15315

最新推荐文章于 2024-09-23 15:03:13 发布

阅读量412

点赞数

分类专栏： spatial 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_15315/article/details/82475954

版权

spatial 专栏收录该内容

9 篇文章 0 订阅

订阅专栏


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>  "+data.level+"<br>  当前值："+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);
		});
	}