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

深碍√TFBOYSˉ_ 2022-09-09 10:54 454阅读 0赞

# 效果图： #

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16][]

#  实现代码： #

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

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/abf8bb90610e43068ba7634dfae78f28.png