admin管理员组文章数量:1589972
文章目录
- 1.简介
- 2.属性
- (1)filter 可实现过滤
- (2)layers 也可实现过滤
- (3)features 存放被选择的图层的集合
- (4)condition 设置选择方式,默认sigleClick
- (5)addCondition 配合removeCondition可实现使用不同的方法进行添加删除
- (6)removeCondition 配合addCondition可实现使用不同的方法进行添加删除
- (7)toggleCondition 可实现点击多选
- (8)multi 可实现点击穿透多选
- (9)style 被选中的图层的样式
- (10)hitTolerance 设置鼠标点击位置和被选中图层之间的距离
1.简介
Select字如其名,主要用于选择矢量图层,做出相应的操作,比如突出高亮、改变渲染样式等
2.属性
filter:可实现过滤
layers:也可实现过滤
features:存放被选择的图层的集合
condition:设置选择方式,默认sigleClick
addCondition:配合removeCondition可实现使用不同的方法进行添加删除
removeCondition:配合addCondition可实现使用不同的方法进行添加删除
toggleCondition:可实现点击多选
multi:可实现点击穿透多选
style:被选中的图层的样式
hitTolerance:设置鼠标点击位置和被选中图层之间的距离
(1)filter 可实现过滤
后面接一个函数,函数有两个参数:feature和layer。以点击为例,参数代表当前点击的都有那些feature和layer。此函数若返回true,代表图层被选择,否则不选
//只有lineVectorLayer图层可被选择
this.select = new Select({
filter:(feature, layer)=>{
return layer === this.lineVectorLayer
}
});
(2)layers 也可实现过滤
后面接一个数组,里面是一个个layer图层。设置都有哪些layer图层可以被选择
//只有lineVectorLayer图层可被选择
this.select = new Select({ layers:[this.lineVectorLayer] });
(3)features 存放被选择的图层的集合
存放被选择的图层,如果没有设置,会默认创建一个集合。可使用 “Select实例.getFeatures()” 获取到这个集合。
(4)condition 设置选择方式,默认sigleClick
一个从ol/events/condition中引入的函数,返回值为布尔,用于设置如何使用选择交互,默认sigleCilck,单击选择。可选:Click,shiftKeyOnly,always等。选择时不满足此条件那么其他配置都没用
(5)addCondition 配合removeCondition可实现使用不同的方法进行添加删除
一个从ol/events/condition中引入的函数,返回值为布尔,来决定是否触发此事件。默认是never(从不触发)。如果你想使用不同的方法进行选择和取消选择,而不是同一个方法进行选择和取消选择(toggle),可以使用此方法。
如:按住ctrl键+点击 进行选择,按住shift+点击 进行取消选择。可设置 addCondition为 “platformModifierKeyOnly” ,设置removeCondition为 shiftKeyOnly。
(6)removeCondition 配合addCondition可实现使用不同的方法进行添加删除
一个从ol/events/condition中引入的函数,返回值为布尔,来决定是否触发此事件。默认是never(从不触发)。如果你想使用不同的方法进行选择和取消选择,而不是同一个方法进行选择和取消选择(toggle),可以使用此方法。
如:按住ctrl键+点击 进行选择,按住shift+点击 进行取消选择。可设置 addCondition为 “platformModifierKeyOnly” ,设置removeCondition为 shiftKeyOnly。
(7)toggleCondition 可实现点击多选
一个从ol/events/condition中引入的函数,返回值为布尔,来决定是否触发此事件。用于设置辅助选择的方式,默认shiftKeyOnly,按住shift键。可选:Click,never,always等。当设置condition和toggleCondition属性时,两个都满足条件可以实现多选。详情看下面代码介绍
//vue写法,首先引入:
import { Select } from 'ol/interaction'
import { click,platformModifierKeyOnly } from "ol/events/condition";
//之后在methods中添加
addSelectInteraction(){
//condition:设置此交互为点击选择,必须满足此条件
//toggleCondition:设置当按住ctrl再点击时,可多选图层
this.select = new Select({ condition: click, toggleCondition: platformModifierKeyOnly});
this.selectedFeatures = this.select.getFeatures();
this.map.addInteraction(this.select);
this.select.on('select', function(e) {
e.target.getFeatures().getArray().forEach(item=>{
console.log(item.values_);
})
});
},
remvoeSelectInteraction(){
this.selectedFeatures.clear();
this.map.removeInteraction(this.select);
}
/* 记得在data中定义那几个变量 */
不按ctrl键为单选
按住ctrl键可实现多选
(8)multi 可实现点击穿透多选
跟布尔值,默认false。设置是否支持穿透性多选。如:设为true,那么点击的时候将会选择所点位置的全部图层。设为false只会选择最上面那个。
//vue写法,首先引入:
import { Select } from 'ol/interaction'
//之后在methods中添加
addSelectInteraction(){
this.select = new Select({ multi:true });
this.selectedFeatures = this.select.getFeatures();
this.map.addInteraction(this.select);
this.select.on('select', function(e) {
e.target.getFeatures().getArray().forEach(item=>{
console.log(item.values_);
})
});
},
remvoeSelectInteraction(){
this.selectedFeatures.clear();
this.map.removeInteraction(this.select);
}
/* 记得在data中定义那几个变量 */
设置multi为true,点击一次,会选择所点地方的所有图层
(9)style 被选中的图层的样式
可设置被选中的图层的样式。默认样式看上面的那张图:边框蓝色,填充白色透明。如果设置为 null或false时,被选中的图层将不会改变任何样式。
(10)hitTolerance 设置鼠标点击位置和被选中图层之间的距离
接收一个数值作为参数。意思是以鼠标点击位置为圆心,数值作为半径画圆,在圆内的图层将被选中。
版权声明:本文标题:Openlayers实现区域多选与单选。Interaction.Select()属性详解。 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1728075833a1144459.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论