Vue+Openlayer实现点击地图添加图标要素信息，编辑点位信息

效果图：

 实现代码：

<template>
  <div>
    <div id="map" ref="map" style="width: 100vw; height: 100vh" />
    <div id="overlay-box" />
  </div>
</template>
<script>
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import XYZ from "ol/source/XYZ";
import { Map, View, Feature } from "ol";
import { Style, Icon } from "ol/style";
import { Point } from "ol/geom";
import Overlay from "ol/Overlay";
export default {
  data() {
    return {
      map: {},
      pointLayer: {},
    };
  },
  mounted() {
    this.initMap();
    this.clickMap();
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
            }),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [104, 30],
          zoom: 7,
        }),
      });
    },
    /**
     * 点击地图添加摄像头要素
     */
    clickMap() {
      this.map.on("click", (e) => {
        this.addPoints(e.coordinate);
      });
    },
    /**
     * 根据经纬度坐标添加摄像头要素
     */
    addPoints(coordinate) {
      if (Object.keys(this.pointLayer).length == 0) {
        // 创建图层
        this.pointLayer = new VectorLayer({
          source: new VectorSource(),
        });
        // 图层添加到地图上
        this.map.addLayer(this.pointLayer);
      }

      // 创建feature要素，一个feature就是一个点坐标信息
      const feature = new Feature({
        geometry: new Point(coordinate),
      });
      // 设置要素的图标
      feature.setStyle(
        new Style({
          // 设置图片效果
          image: new Icon({
            src: "https://smart-garden-manage.oss-cn-chengdu.aliyuncs.com/shexiangtou.png",
            // anchor: [0.5, 0.5],
            scale: 0.8,
          }),
        })
      );
      // 要素添加到地图图层上
      // this.pointLayer.getSource().addFeatures([feature]);
      this.pointLayer.getSource().addFeature(feature);

      // 设置文字信息
      this.addText(coordinate);
    },
    addText(coordinate) {
      const overlayBox = document.getElementById("overlay-box"); //获取一个div
      const oSpan = document.createElement("span"); //创建一个span
      oSpan.contentEditable = true; //设置文字是否可编辑
      oSpan.id = coordinate[0]; //创建一个id
      let pText = document.createTextNode("摄像头" + coordinate[0].toFixed(2)); //创建span的文本信息
      oSpan.appendChild(pText); //将文本信息添加到span
      overlayBox.appendChild(oSpan); //将span添加到div中
      let textInfo = new Overlay({
        position: coordinate, //设置位置
        element: document.getElementById(coordinate[0]),
        offset: [-25, 30], //设置偏移
      });
      this.map.addOverlay(textInfo);
    },
  },
};
</script>