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

本文链接：https://blog.youkuaiyun.com/m0_46410110/article/details/133378652

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

一、编辑图斑

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>