openlayer实现仿各大地图的标注点触碰样式变换

关键

经过反复的实验，成功的关键是利用select控件来改变样式，同时要注意避免因select的注册而锁住地图。

代码

记住要用styleFunction来写入样式，同时注意不能单独设置要素的样式，一旦设置无法再转换。

var select = new ol.interaction.Select({
        condition: function(evt) {
            return evt.originalEvent.type == 'mousemove'; //注册事件
        },
        style: function(feature,resolution){
        	var geo = feature.getGeometry();
       		if(geo instanceof ol.geom.Point){
       			var style;
	   			if(feature.get('id')){
	   				style = new ol.style.Style({
    	   				image: new ol.style.Icon({
    	                    anchor: [0.5,1],
    	                    src: './position2.png'
    	                 }),
    	                 text: new ol.style.Text({
    	                	text:'1',
    	                	font:'normal normal bold 12px arial,sans-serif',
    	                	offsetY:-30,
    	                	fill:new ol.style.Fill({color:'#ffffff'})
    	                 }) 
    	            });
	   			}else{
	   				style = new ol.style.Style({
		    			image: new ol.style.Circle({radius:7,   //填充图案样式
		    				fill: new ol.style.Fill({color:'#ffcc33'})
		    			})
    	            });
	   			}
	   			return style;
       		}
       		if(geo instanceof ol.geom.LineString){
       			return new ol.style.Style({
       				stroke: new ol.style.Stroke({
	    				color:'rgb(165,24,27)',
	    				width:3,
	    				lineDash:[10,10]
	    			}) //边界
       			});
       		}
       		if(geo instanceof ol.geom.Polygon || geo instanceof ol.geom.MultiPolygon){
       			return new ol.style.Style({
       	 			fill: new ol.style.Fill({color:'rgba(0,0,0,0.6)'}), //填充
       	 			stroke: new ol.style.Stroke({
       	 				color:'#a5181b',
       	 				width:3,
       	 				lineDash:[10,10]
       	 			}) //边界
       	 		});
       		}
        }
      });
	map.addInteraction(select);
	
var layer = new ol.layer.Vector({
	source: olkit.searSource,
	style: function(feature,resolution){
		var geo = feature.getGeometry();
		if(geo instanceof ol.geom.Point){
			var style;
			if(feature.get('id')){
				style = new ol.style.Style({
					image: new ol.style.Icon({
						anchor: [0.5,1],
						src: './position.png'
					 }),
					 text: new ol.style.Text({
						text:'1',
						font:'normal normal bold 12px arial,sans-serif',
						offsetY:-27,
						fill:new ol.style.Fill({color:'#ffffff'})
					 }) 
				});
			}else{
				style = new ol.style.Style({
					image: new ol.style.Circle({radius:7,   //填充图案样式
						fill: new ol.style.Fill({color:'#ffcc33'})
					})
				});
			}
			return style;
		}
		if(geo instanceof ol.geom.LineString){
			return new ol.style.Style({
				stroke: new ol.style.Stroke({
					color:'#a5181b',
					width:3
				})
			});
		}
		if(geo instanceof ol.geom.Polygon || geo instanceof ol.geom.MultiPolygon){
			return new ol.style.Style({
				fill: new ol.style.Fill({color:'#e6a299'}), //填充
				stroke: new ol.style.Stroke({
					color:'rgb(165,24,27)',
					width:3,
					lineDash:[10,10]
				})
			});
		}
	}
});

补充代码

解决锁屏的问题(借助地图事件解决)

//事件：抓
map.on('pointerdrag',function(evt){
	select.setActive(false);

});

//事件：地图移动结束
map.on('moveend', function(evt) {
	select.setActive(true);

 });

2017.5更新

要实现不同条件下的选择问题，可以借助多个select控件完成，map可以添加多个select，所以你想要什么效果都可以

效果

触碰前：

触碰后：