Openlayers的交互功能（七）——平移图斑

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

• GIS应用中拖动旋转和缩放是编辑中比较常见的功能，在OpenLayers中平移功能可以通过ol.interaction.Translate来实现，但是其他功能没有，所以要用的openlayers的一个扩展ol-ext。

一、ol-ext

1.基本介绍

• ol-ext是OpenLayers的扩展。主要包含控件，交互，弹出窗口等功能。类似于WEB前端的UI框架，是一个成熟的扩展，可以节省时间、避免问题。

2.安装

npm install ol-ext

3.链接

• ol-ext官网链接

二、平移图斑

1.实现代码

<template>
  <!-- 初始化一个地图容器 -->
  <div id="map"></div>
  <div style="position: absolute; right: 50px">
    <button @click="moveFeatures()">平移</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 { 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 CircleStyle from "ol/style/Circle";

import ExtTransform from "ol-ext/interaction/Transform";

/**
 * 为了方便其他函数调用地图和图层，把变量定义成全局的
 */
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)",
      }),
      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 moveFeatures = () => {
  const dblClickInteraction = map
    .getInteractions()
    .getArray()
    .find((interaction) => {
      return interaction instanceof DoubleClickZoom;
    });
  map.removeInteraction(dblClickInteraction); //移除双击缩放功能，使双击只用于关闭平移状态

  let interactionDrag = new ExtTransform({
    enableRotatedTransform: false, //地图旋转时启用变换
    hitTolerance: 2, //偏移量
    translate: true, // 拖拽
    stretch: false, // 拉伸
    scale: false, // 缩放
    rotate: false, // 旋转
    translateFeature: false, //true是不显示中心位置，false是显示中心位置
    noFlip: false, //防止特征几何翻转，默认为 false
    layers: [vectorLayer], //指定可以拖拽的图层
  });
  //添加交互
  map.addInteraction(interactionDrag);

  interactionDrag.on(["translatestart"], function (evt) {});
  interactionDrag.on(["translating"], function (evt) {
    //逻辑代码
  });
  interactionDrag.on(["translateend"], function (evt) {
    //逻辑代码
  });
  map.on("dblclick", function () {
    //双击移除控件，不再平移
    map.removeInteraction(interactionDrag);
  });
};

onMounted(() => {
  // 立即执行初始化地图函数
  initialMap();
});
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

:deep(.ol-attribution) {
  display: none;
}
</style>

2.实现效果

• 下面是平移图斑的效果
• 先点击按钮，再点击图斑，即可开始平移
  

三、结语

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

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

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