Openlayers实现区域多选与单选。Interaction.Select()属性详解。

NeedChange.

已于 2023-02-17 15:39:38 修改

阅读量4.8k

点赞数 7

分类专栏： Openlayers 文章标签： javascript 前端 vue.js

于 2022-02-21 15:41:41 首次发布

本文链接：https://blog.csdn.net/weixin_46099005/article/details/122928839

版权

Openlayers 专栏收录该内容

1 篇文章 2 订阅

订阅专栏

文章目录

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中定义那几个变量 */