OpenLayer标注浅析

图层标注

顾名思义，即是用添加矢量层来进行标注的显示。缺点是需要增加一个图层，在鹰眼上标注也会阻碍视野。

 var beijing = ol.proj.fromLonLat([116.28,39.54]); //定义一个坐标点
	//创建标注要素
	var iconFeature = new ol.Feature({ //创建一个要素，作为标注
		geometry:new ol.geom.Point(beijing), //必要
		name:'北京市',   //以下属性随便定义
		population:2115
	});
 	iconFeature.setStyle(new ol.style.Style({ //定义样式（必要，否则不会显示）
<span style="white-space:pre">		</span>image:new ol.style.Icon({ //定义图案
			anchor:[0.5,1],  //位置
			src:'./image/dialog.png' //图案
		}),
		text:new ol.style.Text({ //文字格式
			textAlign:'center',
			textBaseline:'middle',
			font:'normal 14px 微软雅黑',
			text:iconFeature.get('name'),
			fill:new ol.style.Fill({color:'#000000'}),
			stroke:new ol.style.Stroke({color:'#ffcc33',width:2})
		})
	})
	);  

然后，再添加到新建的矢量图层中。

//创建矢量标注图层
	var vsource = new ol.source.Vector({ //矢量源
		features:[iconFeature] //将前面的标注放进要素里
	});
	var vector = new ol.layer.Vector({ //创建矢量图层
		source:vsource  //放入矢量源
	});
	map.addLayer(vector); //地图添加

叠加标注

即是通过Overlay的方式进行添加，抹去了图层标注的缺点。

<!--先添加好一个div待显示-->
<div id="label" style="display:none;"><!--设置隐藏--> 
		<div id="marker" class="marker" title="Marker">
			<a class="address" id="address" target="blank">.....</a>
		</div>
	</div>

然后再套入标注

var wuhan = ol.proj.fromLonLat([114.21,30.37]);
	//添加图形标注
	var marker = new ol.Overlay({
		position:wuhan,
		positioning:'center-center',
		element:document.getElementById('marker'),
		stopEvent:false
	});
	map.addOverlay(marker); //添加

	//添加文字标注
	var text = new ol.Overlay({
		position:wuhan,
		element:document.getElementById('address')
	});
	map.addOverlay(text); //添加
 	text.getElement().innerText = "武汉";  //替换文字

注意：样式在网页的style中添加（最大的优点是样式可以分给美工去做，自己不用分心做这个）

弹出标注（popup）

要借助要素来实现高级功能，我直接把所有的东西放出来，可以直接用。

<style type="text/css">
	#map{width:100%;height:100%;position:absolute;background-color:#dddddd;}
	.ol-popup{position:absolute;background-color:white;-webkit-filter:drop-shadpw(0 1px 4px rgba(0,0,0,0.2));
			  filter:drop-shadpw(0 1px 4px rgba(0,0,0,0.2));padding:15px;border-radius:10px;border:1px solid #cccccc;\
			  top:0px;left:-50px;}
	.ol-popup:after,.ol-popup:before{top:100%;border:solid transparent;content:"";height:0;width:0;position:absolute;
									 pointer-events:none;}
	.ol-popup:after{border-top-color:white;border-width:10px;left:48px;margin-left:-10px;}
	.ol-popup:before{border-top-color:#cccccc;border-width:11px;left:48px;margin-left:-11px;}
	.ol-popup-closer{text-decoration:none;position:absolute;top:2px;right:8px;}
	.ol-popup-closer:after{content:"X"}
	#popup-content{font-size:14px;font-family:"微软雅黑";}

</style>

<!--添加弹出div-->
	<div id="map"></div>
	<div id="popup" class="ol-popup">
			<a href="#" id="popup-closer" class="ol-popup-closer"></a>
			<div id="popup-content"></div>
	</div>

功能函数

//图层标注形式(内部调用)
function newFeature(point,cityname){
	var feature = new ol.Feature({
		geometry:new ol.geom.Point(point),
		name:cityname
	});
	feature.setStyle(new ol.style.Style({ 
 		image:new ol.style.Icon({
			anchor:[0.5,1],
			src:'./image/dialog.png'
		    }),
		text:new ol.style.Text({
			textAlign:'center',
			textBaseline:'middle',
			font:'normal 14px 微软雅黑',
			text:feature.get('name'),
			fill:new ol.style.Fill({color:'#000000'}),
			stroke:new ol.style.Stroke({color:'#ffcc33',width:2})
			})
 		}));
	return feature;
}
//popup信息编写（内部调用）
function postInfo(point,infotitle,url,txt,img){
	//自定义JSON格式
	return info = {
			geo:point,
			att:{
				title:infotitle,
				titleURL:url,
				text:txt,
				imgURL:img
			}
	};
}
//在容器中添加信息(内部调用)
function addInfo(info,content){
	content.innerHTML = '';//清空popup的内容
	
	//创建a元素
	var elementA = document.createElement('a');
	elementA.href = info.att.titleURL;
	elementA.innerText = info.att.title;
	content.appendChild(elementA);
	
	//新建div
	var Div = document.createElement('div');
	Div.innerText = info.att.text;
	content.appendChild(Div);
	
	//新建img
	var Img = document.createElement('img');
	Img.src = info.att.imgURL;
	content.appendChild(Img);
}
//测试函数：在外部调用
function popuplabel(map){
	var beijing = ol.proj.fromLonLat([116.28,39.54]);
	var wuhan = ol.proj.fromLonLat([114.21,30.37]);
	//创建标注要素
	iconFeature1 = newFeature(beijing,'北京');
	iconFeature2 = newFeature(wuhan,'武汉');
 	//创建矢量标注图层
	var v_source = new ol.source.Vector({
		features:[iconFeature1,iconFeature2]
	});
	var vector = new ol.layer.Vector({
		source:v_source,
		name:'矢量标注'
	});
	map.addLayer(vector);
	
	var info = postInfo(beijing,"北京","www.baidu.com","你好北京",'./image/uu.png');
	//获取容器
    var container = document.getElementById('popup');//主体
    var content = document.getElementById('popup-content');//正文
    var closer = document.getElementById('popup-closer');//关闭框
    
    //创建弹出标注
    var popup = new ol.Overlay({
    	element:container,
    	autoPan:true,
    	positioning:'top-center',
    	stopEvent:false,
    	autoPanAnimation:{duration:250}
    });
    map.addOverlay(popup);
    
    //关闭事件
    closer.onclick = function(){
    	popup.setPosition(undefined);
    	closer.blur(); //失去焦点
    	return false;
    };
    //点击事件
    map.on('click',function(evt){
    	var xy = evt.coordinate;
    	var feature = map.forEachFeatureAtPixel(evt.pixel,function(feature,layer){ //获取鼠标点上的要素
    		return feature;
    		}
    	);
    	if(feature==iconFeature1){
    		addInfo(info,content,popup);
    		if(popup.getPosition()==undefined){
    			popup.setPosition(xy); //进行坐标设置
    		}
    	}
    }
   );
    //鼠标移动事件：触到要素变鼠标指针
    map.on('pointermove',function(e){
    	var pixel = map.getEventPixel(e.originalEvent); //获取地图上的坐标
    	var hit = map.hasFeatureAtPixel(pixel);//获取地图坐标上的要素
    	map.getTargetElement().style.cursor = hit?'pointer':''; //设置DOM对象的指针
    });
}