A011:在地图上添加标记图形并随意移动地图上的矢量点

---

前言

提示：如果对操作流程还不熟悉的话，可以参考之前的文章 ，这些内容会帮助你更好地了解 OpenLayers 的功能点。我们会持续更新相关内容，如果你感兴趣或有这方面的需求，欢迎关注并收藏。

一、官网demo地址

示例Demo：Icon modification

二、使用步骤

1.添加矢量点

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",
      }),
    });

其中anchorXUnits 和 anchorYUnits: 指定锚点的单位。‘fraction’ 表示相对于图标的宽度（0到1之间），‘pixels’ 表示以像素为单位。

2.核心代码Modify类

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

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

添加之前

添加之后

三、完整代码

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

四、修改任意图形

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

示例代码:

<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 { LineString } from "ol/geom.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 {
  components: {},
  data() {
    return {
      map: null,
    };
  },
  computed: {},
  created() {},
  mounted() {

    const lineFeature = new Feature(
      new LineString([
        [-1e7, 1e6],
        [-1e6, 3e6],
      ])
    );



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

    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 scoped>
#map {
  width: 100%;
  height: 500px;
}
.box {
  height: 100%;
}
</style>