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

• 前面的两篇文章分别介绍了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 = new Select();
map.addInteraction(select);
1
2
3
4
5

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

// 将vectorLayer定义在函数外面，方便其他函数访问
let vectorLayer
const addLayer = () => {
  vectorLayer = new VectorLayer({
    source: new VectorSource(),
  });
  vectorLayer.getSource().addFeature(
    // 添加面图层
    new Feature({
      geometry: new Polygon([
        [
          [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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

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

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

3.Select的常用属性

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

1. filter可以实现过滤功能

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

//只有vectorLayer图层可以被选中
let select = new Select({
  filter: layer=>{
    return layer === vectorLayer
  }
});
map.addInteraction(select);
1
2
3
4
5
6
7

2. layer过滤图层

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

// 只有vectorLayer可以被选中
let select = new Select({
  layers: [vectorLayer],
});
map.addInteraction(select);
1
2
3
4
5

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 = new Select({
  style: new Style({
    fill: new Fill({
      color: "rgba(255,0,0,0.5)",
    }),
    stroke: new Stroke({
      color: "rgba(0,0,255,1)",
    }),
  }),
});
map.addInteraction(select);
1
2
3
4
5
6
7
8
9
10
11
12

4.查看选中的图斑信息

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

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的图层
/**
 * 初始化地图
 */
const initialMap = () => {
  map = new Map({
    target: "map", // 地图放到哪个容器中，值应该是div的id
    layers: [
      new TileLayer({
        source: new OSM(), // 加载OSM底图
      }),
    ],
    view: new View({
      projection: "EPSG:4326",
      center: [125.3574397847, 43.8865062907],
      zoom: 18,
    }),
  });
  // 选中事件
  let select = new Select({
    style: new Style({
      fill: new Fill({
        color: "rgba(255,0,0,0.5)",
      }),
      stroke: new Stroke({
        color: "rgba(0,0,255,1)",
      }),
    }),
  });
  map.addInteraction(select);

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

const addLayer = () => {
  vectorLayer = new VectorLayer({
    source: new VectorSource(),
  });
  vectorLayer.getSource().addFeature(
    // 添加面图层
    new Feature({
      geometry: new Polygon([
        [
          [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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

二、结语

• 本文对Feature的选中功能进行了介绍，后续将继续更新Feature的添加、删除、平移、框选平移等操作。

• 如有错误，请批评指正！

• 欢迎关注星林社区，文章将同步更新在星林社区中！