Openlayers的交互功能（三）——Feature的选中Select控件

• 前面的两篇文章分别介绍了Openlayers的基本情况和初始化地图的流程以及Feature是什么，从这篇文章开始，将对Feature的交互功能进行介绍。

一、Feature的选中功能

1.Select交互

• Select是交互事件的一种，用于选中矢量图层上的几何图形，添加选择交互事件后，点击地图上的几何图形，或者将鼠标移动到几何图形上时，将会获取到几何图形相关信息，我们也可以将几何图形进行高亮显示。

2.Select的使用

1. 首先要创建一个Select对象，再使用Map的addInteraction方法添加该对象。选择的事件包括Single-click，Click，Hover，Alt+Click等。可以使用condition属性来指定事件类型。

// 引入Select控件import{ Select }from"ol/interaction";// 初始化Select控件let select =newSelect();
map.addInteraction(select);

1. 初始化一个矢量图层并向里面加入一个示例Feature。addLayer函数是写在Mounted函数里，初始化地图函数后。

// 将vectorLayer定义在函数外面，方便其他函数访问let vectorLayer
constaddLayer=()=>{
  vectorLayer =newVectorLayer({source:newVectorSource(),});
  vectorLayer.getSource().addFeature(// 添加面图层newFeature({geometry:newPolygon([[[125.3579180563,43.888298024],[125.3587389704,43.887798338],[125.3574397847,43.8865062907],[125.3579180563,43.888298024],],]),}));
  map.addLayer(vectorLayer);// 能够保证地图显示时直接就在图斑附近，如果在初始化地图时设置了View中的Center，也可以注释掉
  map.getView().setCenter([125.3579180563,43.888298024]);};

• 加载完毕后的效果如图所示：

1. 使用Select后的可以选中图斑

• 鼠标单击后可以将图斑选中，暂时没有设置选中后的样式，使用OpenLayers的默认样式。选中后的效果如图所示：

3.Select的常用属性

* filter：可以实现过滤
* layers：也可实现过滤
* features：存放被选择的图层的集合
* condition：设置选择方式，默认sigleClick
* style：设置图斑被选中后的样式

1. filter可以实现过滤功能

后面接一个函数，函数有两个参数：feature和layer。以点击为例，参数代表当前点击的都有那些feature和layer。此函数若返回true，代表图层被选择，否则不选

//只有vectorLayer图层可以被选中let select =newSelect({filter:layer=>{return layer === vectorLayer
  }});
map.addInteraction(select);

2. layer过滤图层

后面接一个数组，里面是所有可以被选中的layer图层。可以通过该选项设置哪些图层可以被选中。

// 只有vectorLayer可以被选中let select =newSelect({layers:[vectorLayer],});
map.addInteraction(select);

3. features用于存放被选中的features的集合

如果在其中填写某个feature就可以让某个feature在Select初始化的时候就被选中。后续可以通过select.getFeatures()获取到这个集合。

4. condition用于设置Select的触发方式，默认是sigleClick

一个从ol/events/condition中引入的函数，返回值为布尔，用于设置如何使用选择交互，默认sigleCilck，单击选择。可选:Click，dblclick，pointermove等。

5. style用于设置feature被选中后的样式。

和Feature的样式相同，可以设置填充（Fill）颜色，边框（Stroke）等。如果不进行设置或者设置为null，则会使用OpenLayers的默认样式。也就是上图中展示的样式。

// 通过设置样式后，被选中的图斑边框是蓝色，填充是红色let select =newSelect({style:newStyle({fill:newFill({color:"rgba(255,0,0,0.5)",}),stroke:newStroke({color:"rgba(0,0,255,1)",}),}),});
map.addInteraction(select);

4.查看选中的图斑信息

// 监听select选中事件
select.on("select",(evt)=>{
  console.log(evt);});

5.完整代码

<template><!-- 初始化一个地图容器 --><div id="map"></div></template><script setup>// 引入需要的包import TileLayer from"ol/layer/Tile";import{OSM}from"ol/source";import{ Feature, View }from"ol";import{ Map }from"ol";import{ onMounted }from"vue";import{ Polygon }from"ol/geom";import VectorLayer from"ol/layer/Vector";import VectorSource from"ol/source/Vector";import{ Fill, Stroke, Style }from"ol/style";import{ Select }from"ol/interaction";/**
 * 为了方便其他函数调用地图和图层，把变量定义成全局的
 */let map;// 地图let vectorLayer;// 存放Feataure的图层/**
 * 初始化地图
 */constinitialMap=()=>{
  map =newMap({target:"map",// 地图放到哪个容器中，值应该是div的idlayers:[newTileLayer({source:newOSM(),// 加载OSM底图}),],view:newView({projection:"EPSG:4326",center:[125.3574397847,43.8865062907],zoom:18,}),});// 选中事件let select =newSelect({style:newStyle({fill:newFill({color:"rgba(255,0,0,0.5)",}),stroke:newStroke({color:"rgba(0,0,255,1)",}),}),});
  map.addInteraction(select);// 监听select选中事件
  select.on("select",(evt)=>{
    console.log(evt);});};constaddLayer=()=>{
  vectorLayer =newVectorLayer({source:newVectorSource(),});
  vectorLayer.getSource().addFeature(// 添加面图层newFeature({geometry:newPolygon([[[125.3579180563,43.888298024],[125.3587389704,43.887798338],[125.3574397847,43.8865062907],[125.3579180563,43.888298024],],]),}));
  map.addLayer(vectorLayer);
  map.getView().setCenter([125.3579180563,43.888298024]);};onMounted(()=>{// 立即执行初始化地图函数initialMap();addLayer();});</script><style scoped>
#map {width:100%;height:100%;position: absolute;top:0;left:0;}:deep(.ol-attribution){display: none;}</style>

二、结语

• 本文对Feature的选中功能进行了介绍，后续将继续更新Feature的添加、删除、平移、框选平移等操作。
• 如有错误，请批评指正！
• 欢迎关注星林社区，文章将同步更新在星林社区中！