四十五、openlayers官网示例Icon modification解析——在地图上添加标记图形并随意移动它的位置

官网demo地址：

Icon modification

 这篇讲了如何随意移动地图上的矢量点。

先在地图上添加一个矢量点，其中anchorXUnits 和 anchorYUnits: 指定锚点的单位。'fraction' 表示相对于图标的宽度（0到1之间），'pixels' 表示以像素为单位。

const iconFeature = new Feature({
      geometry: new Point([0, 0]),
      name: "Null Island",
      population: 4000,
      rainfall: 500,
    });

    const iconStyle = new Style({
      image: new Icon({
        anchor: [0.5, 46], 
        anchorXUnits: "fraction", 
        anchorYUnits: "pixels",
        src: "https://openlayers.org/en/latest/examples/data/icon.png",
      }),
    });

图形能移动的核心代码是Modify类，Modify类可以捕获矢量图形上的点，移动点的位置来改变矢量图形的位置，而hitDetection的作用则是使鼠标更容易捕获到图形上，当用户与地图进行交互（例如点击或拖动要素）时，Modify交互会检查用户的点击位置是否命中了hitDetection参数指定的图层中的要素。如果命中，则触发相应的修改操作，允许用户拖动顶点或整个几何要素进行修改。

const modify = new Modify({
      hitDetection: vectorLayer,
      source: vectorSource,
    });

如果不设置hitDetection，捕获点会困难一些，鼠标必须移动到点坐标的位置才可以捕获到顶点。

添加之前： 

 添加之后，鼠标放在icon图形上即可捕获顶点，

小细节：

Modify的主要作用是修改图形，之所以可以随意移动图形的位置，是因为点或者圆形只有一个顶点坐标构成。如果Modify用在多边形或直线身上， 它会捕获构成图形的任意一个点，通过鼠标拖动来移动点的坐标从而改变形状。而不是直接移动整个图形的位置。

想要随意移动多边形或其他矢量图形的位置还得通过自定义交互类。

参考示例：

二十四、openlayers官网示例Custom Interactions——自定义交互实现在地图上移动、拖拽feature_openlayers feature 拖动-CSDN博客

完整代码：

<template>
  <div class="box">
    <h1>Icon modification</h1>
    <div id="map"></div>
  </div>
</template>

<script>
import Feature from "ol/Feature.js";
import Map from "ol/Map.js";
import Point from "ol/geom/Point.js";
import View from "ol/View.js";
import { Icon, Style } from "ol/style.js";
import { Modify } from "ol/interaction.js";
import { OGCMapTile, Vector as VectorSource } from "ol/source.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
export default {
  name: "",
  components: {},
  data() {
    return {
      map: null,
    };
  },
  computed: {},
  created() {},
  mounted() {
    const iconFeature = new Feature({
      geometry: new Point([0, 0]),
      name: "Null Island",
      population: 4000, //自定义属性
      rainfall: 500, //自定义属性
    });

    const iconStyle = new Style({
      image: new Icon({
        anchor: [0.5, 46],
        anchorXUnits: "fraction",
        anchorYUnits: "pixels",
        src: "https://openlayers.org/en/latest/examples/data/icon.png",
      }),
    });

    iconFeature.setStyle(iconStyle);

    const vectorSource = new VectorSource({
      features: [iconFeature],
    });

    const vectorLayer = new VectorLayer({
      source: vectorSource,
    });

    const rasterLayer = new TileLayer({
      source: new OGCMapTile({
        url: "https://maps.gnosis.earth/ogcapi/collections/NaturalEarth:raster:HYP_HR_SR_OB_DR/map/tiles/WebMercatorQuad",
        crossOrigin: "",
      }),
    });

    const target = document.getElementById("map");
    const map = new Map({
      layers: [rasterLayer, vectorLayer],
      target: target,
      view: new View({
        center: [0, 0],
        zoom: 3,
      }),
    });

    const modify = new Modify({
      hitDetection: vectorLayer,
      source: vectorSource,
    });
    modify.on(["modifystart", "modifyend"], function (evt) {
      target.style.cursor = evt.type === "modifystart" ? "grabbing" : "pointer";
    });
    const overlaySource = modify.getOverlay().getSource();
    overlaySource.on(["addfeature", "removefeature"], function (evt) {
      target.style.cursor = evt.type === "addfeature" ? "pointer" : "";
    });

    map.addInteraction(modify);
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 500px;
}
.box {
  height: 100%;
}
</style>