Openlayers的交互功能（六）——编辑图斑_openlayer modify

• 前面几篇文章已经对OpenLayers的交互、Draw控件的使用和图斑删除有了基本的了解，下面将对OpenLayers的图斑编辑、平移、框选平移进行逐一介绍。
  

  目录

  • 一、编辑图斑
  • • 1. Modify类API
    • • 1.1 常用属性
      • 1.2 常用方法
      • 1.3 常用事件
    • 2.编辑图斑
    • • 2.1 实现代码
      • 2.2 实现效果
  • 二、结语

一、编辑图斑

• ol.interaction.Modify类封装了编辑图形的功能，只要将它初始化作为交互控件加入Map对象，就可以对几何图形进行动态编辑。
• 将鼠标移动到已经绘制好的线条或点上面，再移动鼠标，可以对图形进行修改。
• 按住Alt键时，再点击鼠标，可以删除选中的点。

1. Modify类API

1.1 常用属性

• condition：设置一个函数，在修改时监听点击事件，返回一个布尔值表示是否处理该点击事件。比如返回false时，选中点后，点击选中的点再移动鼠标时将不处理移动事件。
• deleteCondition：设置一个函数，返回一个布尔值是否执行删除的操作。
• insertVertexCondition：设置一个函数，返回一个布尔值表示是否添加新的点。比如我们在编辑多边形时，点击多边形上的线条时，默认是可以在点击的位置添加一个点。如果返回值为false，不会添加新的坐标点。
• pixelTolerance：设置捕捉点的像素差，如果设置的很大，离坐标点很远也能捕捉到点，默认值 为10px。
• style：用于修改点或顶点的样式。对于LineString和Polygon类，style将影响它们的顶点；对于Circle类，style将影响沿着圆的点；对于Point，style影响的就是实际的点。如果没有配置的话，就会使用默认的配置，默认配置是蓝色的。
• source：要修改的数据源。如果未提供数据源，则必须提供要修改的Feature。
• features：要修改的Feature。如果未提供Feature，则必须提供数据源。

1.2 常用方法

• removePoint：删除当前正在编辑的点。

1.3 常用事件

• modifystart：编辑开始时触发
• modifyend：编辑接触时触发

2.编辑图斑

2.1 实现代码

<template>
  <!-- 初始化一个地图容器 -->
  <div id="map"></div>
  <div style="position: absolute; right: 50px">
    <button @click="editFeatures()">编辑</button>
  </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 { Point, Polygon } from "ol/geom";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";

import { Fill, Icon, Stroke, Style } from "ol/style";
import { DoubleClickZoom, Draw, Modify, Select } from "ol/interaction";
import { fromLonLat } from "ol/proj";
import CircleStyle from "ol/style/Circle";

/**
 * 为了方便其他函数调用地图和图层，把变量定义成全局的
 */
let map; // 地图
let vectorLayer; // 存放Feataure的图层
let selectedFeature; // 选中的图斑
let select; // 选中控件
/**
 * 初始化地图
 */
const initialMap = () => {
  map = new Map({
    target: "map", // 地图放到哪个容器中，值应该是div的id
    layers: [
      new TileLayer({
        source: new OSM(), // 加载OSM底图
      }),
      new VectorLayer({
        source: drawSource,
        style: new Style({
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)",
          }),
          stroke: new Stroke({
            // color: "#ffcc33",
            color: "#ff0033",
            width: 2,
          }),
          image: new CircleStyle({
            radius: 3,
            fill: new Fill({
              color: "#ffcc33",
            }),
          }),
        }),
      }),
    ],

    // 以EPSG:4326为坐标系定义地图的视图中心和缩放级别
    view: new View({
      projection: "EPSG:4326",
      center: [125.3574397847, 43.8865062907],
      zoom: 18,
    }),
  });
  addLayer();

  // 选中事件
  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) => {
    selectedFeature = select.getFeatures().getArray();
  });
};

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]);
};

const editFeatures = () => {
  if (selectedFeature.length > 0) {
    let modify = new Modify({
      features: select.getFeatures(), //选中的要素
    });
    map.addInteraction(modify);
    modify.on("modifyend", (evt) => {
      console.log(evt);
    });

    const dblClickInteraction = map
      .getInteractions()
      .getArray()
      .find((interaction) => {
        return interaction instanceof DoubleClickZoom;
      });
    map.removeInteraction(dblClickInteraction);

    map.on("dblclick", function () {
      map.removeInteraction(modify);
    });
  }
};

onMounted(() => {
  // 立即执行初始化地图函数
  initialMap();
});
</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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

2.2 实现效果

• 下面是编辑图斑的效果
• 先点击图斑，然后点击编辑按钮即可开始编辑
• 按住ALT键，再使用鼠标左键单击图斑顶点，即可删除当前顶点。

二、结语

• 本文对图斑的编辑进行了简单的介绍，后续将继续更新Feature的平移、框选平移等操作。

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

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