本文主要是介绍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，所以你想要什么效果都可以
效果
触碰前：
触碰后：
这篇关于openlayer实现仿各大地图的标注点触碰样式变换的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
