openlayers地标要素

1、效果图

2、获取地标位置，输出地标信息

    fnPrintInfo () {
      const overlays = this.map.getOverlays().getArray()
      const info = overlays.map(item => {
        return {
          name: item.element.innerText,
          coordinate: item.get('position')
        }
      })
      console.log('打印人员、车辆信息')
      console.log(info)
    },

3、完整代码

<!--世界地图 - 新增地标-->
<script>
import { ref } from 'vue'
import {Map, Overlay, View} from 'ol';
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import Feature from "ol/Feature";
import { OSM, Vector as VectorSource, XYZ } from "ol/source";
import { defaults as DefaultsControl } from "ol/control"
import { fromLonLat, transform } from "ol/proj";
import { Fill, Stroke, Style, Text, Circle, Icon } from "ol/style";
import landmark from "@/assets/images/map/landmark.png";
import {Point} from "ol/geom.js";
export default {
  name: 'tree',
  data () {
    return {
      map: null,
      count: ref(0),
      iconLayer: null
    }
  },
  components: {},
  methods: {
    initMap () {
      this.map = new Map({
        view: new View({
          center: transform([113.304788, 28.013391], "EPSG:4326", "EPSG:3857"), //两个投影之间进行坐标转换
          // center: fromLonLat([112.93, 28.23], "EPSG:3857"), //地图中心坐标
          zoom: 5, //缩放级别
          // rotation: Math.PI / 2
        }),
        layers: [
          new TileLayer({
            title: 'worldLayer',
            source: new XYZ({
              url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
              // url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            }),
          })
        ],
        target: 'map', //对应绑定地图div的id标签 - map
        controls: DefaultsControl({
          rotate: false,
          zoom: false
        })
      });
    },
    fnPrintInfo () {
      const overlays = this.map.getOverlays().getArray()
      const info = overlays.map(item => {
        return {
          name: item.element.innerText,
          coordinate: item.get('position')
        }
      })
      console.log('打印人员、车辆信息')
      console.log(info)
    },
    clickMap () {
      const _that = this
      this.iconLayer = new VectorLayer({
        source: new VectorSource({}),
        style: new Style({
          image: new Icon({
            src: landmark,
            scale: 0.08
          })
        })
      })
      this.map.addLayer(this.iconLayer);
      this.map.on("singleclick", (evt) => {
        // const coordinate = transform(evt.coordinate, "EPSG:3857", "EPSG:4326");
        _that.addPoint(evt.coordinate)
      })
    },
    addPoint (coordinate) {
      const feature = new Feature({
        geometry: new Point(coordinate),
      })
      this.iconLayer.getSource().addFeatures([feature])
      this.addText(coordinate);
    },
    addText (coordinate) {
      const overlayBox = document.getElementById("overlay-icon-text");
      const oSpan = document.createElement("span");
      oSpan.contentEditable = true
      oSpan.id = coordinate[0]
      oSpan.textContent = '店家' + parseInt(coordinate[0])
      overlayBox.appendChild(oSpan);
      let textInfo = new Overlay({
        position: coordinate,
        element: document.getElementById(coordinate[0])
      })
      textInfo.setProperties({
        name: oSpan.innerHTML
      })
      this.map.addOverlay(textInfo)
    },
  },
  mounted() {
    this.initMap()
    this.clickMap()
  }
}
</script>

<template>
  <div class="content">
    <!--  <button @click="count++">Count is: {{ count }}</button>  -->
    <!--  绑定map地图  -->
    <button @click="fnPrintInfo">打印信息</button>
    <div id="map" ref="map"></div>
    <div id="overlay-icon-text" />
  </div>
</template>

<style lang="scss" scoped>
.content{
  width: 100%;
  height: 100%;
  #map {
    width: calc(100vw);
    height: calc(100vh);
  }
  button {
    position: absolute;
    top: 10px;
    left: 20px;
    z-index: 99;
    background: #444;
    color: white;
    font-weight: bold;
  }
}
:deep(.ol-overlay-container) {
  span {
    color: #000000;
    font-weight: bold;
  }
}
</style>

参考：