OpenLayer学习之ol.interaction.Select
人生最迷茫的不过于此,一堆选择放在你面前,你却不知道到底选择那个是最合适的,这点很尴尬,始终要戒备自己会不会被坑,唉好痛苦,最痛苦的莫过于此,挣扎,挣扎
一、概念
该交互仅针对于矢量服务,矢量服务,矢量服务,主要用于feature选中(点击、鼠标悬浮等),做出相应的操作,例如高亮显示什么的,改变渲染样式。
二、构造函数
addCondition
condition
layers
style
removeCondition
toggleCondition
multi
features
filter
wrapX
filter
、layers
都可以用于过滤,multi设置是否可以多选
例如:
filter: function (feature, layer) {
return layer === circleLayer;
},
layers: [circleLayer],
效果是相同的都是对指定的图层进行操作,filter是函数过滤可以设置不同的方式
三、condition属性的值选择
默认选择为ol.events.condition.singleClick
,所有的事件点我查看所有类型,还有一个用的多值是ol.events.condition.pointerMove
引用方式
// 添加一个用于选择Feature的交互方式
map.addInteraction(new ol.interaction.Select({
condition: ol.events.condition.pointerMove, // 唯一的不同之处,设置鼠标移到feature上就选取
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({
color: 'blue'
})
})
})
四、事件
用的多的事件select和change事件
select事件场景应用:选中feature要素后,获取要素的字段值等用于弹出对话框、
change事件用于场景:选中的要素feature改变之后进行一些特定的操作
五、总结
本来想将进行一个展示,无奈数据没有,只是用了官网的图,和进行自定义Vector图层,进行测试,这个交互很简单使用,交互这点比ArcGIS API做的好多了,也方便。