官网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>