文章目录
- 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 设置鼠标点击位置和被选中图层之间的距离
接收一个数值作为参数。意思是以鼠标点击位置为圆心，数值作为半径画圆，在圆内的图层将被选中。
