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

来源：互联网发布：华中科技大学网络与远程教育编辑：程序博客网时间：2024/05/22 04:41

关键

经过反复的实验，成功的关键是利用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); });

效果

触碰前：

触碰后：

0 0