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，所以你想要什么效果都可以
效果
触碰前：
触碰后：
转载自：https://blog.csdn.net/u013323965/article/details/53014205
