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({ //定义样式（必要，否则不会显示）
		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的方式进行添加，抹去了图层标注的缺点。

 
		

			.....
		
	

然后再套入标注

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）

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

功能函数

//图层标注形式(内部调用)
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对象的指针
    });
}