Vue中动态添加弹窗

<template>
  <div>
    <div ref="emap" id="map"></div>
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import Stamen from "ol/source/Stamen";
import VectorSource from "ol/source/Vector";
import View from "ol/View";
import {
  Heatmap as HeatmapLayer,
  Tile as TileLayer,
  Vector as LayerVec
} from "ol/layer";
import GeoJSON from "ol/format/GeoJSON";

import olsourceOSM from "ol/source/OSM";
import { get as getProjection, transform, fromLonLat } from "ol/proj";

import { Vector as SourceVec, Cluster, XYZ } from "ol/source";
import { Feature, Overlay } from "ol";
import { Point } from "ol/geom";
import { Style, Icon, Stroke, Fill, Text, Circle } from "ol/style";

export default {
  name: "heatmap",
  data() {
    return {
      maps: null,
      center: [113.0521, 34.6006],
      heatData: {
        type: "FeatureCollection",
        features: [
          { type: "Point", coordinates: [104.4, 31.19], count: 100 },
          { type: "Point", coordinates: [113.3, 30.6], count: 19 },
          { type: "Point", coordinates: [123.3, 30.6], count: 419 },
          { type: "Point", coordinates: [105.3, 30.6], count: 319 },
          { type: "Point", coordinates: [106.3, 30.6], count: 719 },
          { type: "Point", coordinates: [109.3, 31.6], count: 519 },
          { type: "Point", coordinates: [109.3, 30.6], count: 319 },
          { type: "Point", coordinates: [108.3, 32.6], count: 139 },
          { type: "Point", coordinates: [118.3, 31.6], count: 129 },
          { type: "Point", coordinates: [108.3, 33.6], count: 190 },
          { type: "Point", coordinates: [108.3, 32.6], count: 189 },
          { type: "Point", coordinates: [100.3, 30.6], count: 1 },
          { type: "Point", coordinates: [109.3, 30.6], count: 119 },
          { type: "Point", coordinates: [108.3, 31.6], count: 200 },
          { type: "Point", coordinates: [118.3, 30.6], count: 300 }
        ]
      },
      view: null,
      points: [
        {
          address: "五指山测试工地",
          cameraId: "T204",
          lat: "18.77520",
          lon: "109.5170"
        },
        {
          address: "椰树第三工业城测试工地",
          cameraId: "T206",
          lat: "19.9332",
          lon: "110.1424"
        },
        {
          address: "海南热带野生动物园测试工地",
          cameraId: "T214",
          lat: "19.7688",
          lon: "110.2477"
        },
        {
          address: "白石岭测试工地",
          cameraId: "T213",
          lat: "19.1607",
          lon: "110.3775"
        },
        {
          address: "海南大学测试工地",
          cameraId: "T212",
          lat: "20.06089",
          lon: "110.32645"
        }
      ]
    };
  },
  methods: {
    initMap() {
      let _this = this;
      let projection = getProjection("EPSG:4326");
      // 热力图层
      let vector = new HeatmapLayer({
        source: new VectorSource({
          features: new GeoJSON().readFeatures(_this.heatData, {
            dataProjection: "EPSG:4326",
            featureProjection: "EPSG:3857"
          })
        }),
        blur: 20,
        radius: 10
      });

      // 底图1
      let tile = new TileLayer({
        source: new olsourceOSM()
      });

      // 地图中心
      let view = new View({
        center: transform(_this.center, "EPSG:4326", "EPSG:3857"),
        zoom: 5,
        minZoom: 5, //设置缩放的最大和最小级别
        maxZoom: 13
      });

      // 实例化底图
      _this.maps = new Map({
        layers: [tile, vector],
        target: "map",
        view
      });

      // 一、将点进行转换
      var new_cicy_data = [];
      for (let i = 0; i < _this.points.length; i++) {
        new_cicy_data[i] = _this.points[i];
        _this.points[i].ol = [];
        _this.points[i].ol[0] = parseFloat(_this.points[i].lon);
        _this.points[i].ol[1] = parseFloat(_this.points[i].lat);
        _this.points[i].key = i;
      }

      var createLabelStyle = function(feature) {
        return new Style({
          image: new Icon({
            scale: 1,
            //透明度
            opacity: 1,
            //图标的url
            src: "/static/img/normal_green.png"
          })
        });
      };
      //二、标点渲染
      for (let i = 0; i < new_cicy_data.length; i++) {
        show_dian(new_cicy_data[i]);
      }
      function show_dian(info) {
        //实例化Vector要素，通过矢量图层添加到地图容器中
        let iconFeature = new Feature({
          //坐标点
          geometry: new Point(fromLonLat(info.ol)),
          //名称属性
          name: info.cameraId,
          //address: info.address,
          key: info.key
        });
        iconFeature.setStyle(createLabelStyle(iconFeature));
        //矢量标注的数据源
        let vectorSource = new VectorSource({
          features: [iconFeature]
        });
        //矢量标注图层
        let vectorLayer = new LayerVec({
          source: vectorSource
        });
        _this.maps.addLayer(vectorLayer);
      }
      /*********************显示弹出层**************************/
      /**
       * 实现popup的html元素
       */
      var container = document.getElementById("popup");
      var content = document.getElementById("popup-content");
      var closer = document.getElementById("popup-closer");

      /**
       * 在地图容器中创建一个Overlay
       */
      let overlay = new Overlay({
        element: container,
        autoPan: true
      });
      /**
       * 添加关闭按钮的单击事件（隐藏弹窗）
       *
       */
      closer.onclick = function() {
        //未定义popup位置
        overlay.setPosition(undefined);
        //失去焦点
        closer.blur();
        return false;
      };

      /**
       * 为map添加点击事件监听，渲染弹出popup
       */
      _this.maps.on("click", function(evt) {
        //判断当前单击处是否有要素，捕获到要素时弹出popup
        var feature = _this.maps.forEachFeatureAtPixel(evt.pixel, function(
          feature,
          layer
        ) {
          return feature;
        });
        if (feature) {
          let coodinate = evt.coordinate;
          content.innerHTML = "";
          addFeatrueInfo(new_cicy_data[feature.values_.key]);
          overlay.setPosition(coodinate);
          _this.maps.addOverlay(overlay);
        }
      });
      /**
       * 动态创建弹窗的具体内容
       */
      function addFeatrueInfo(info) {
        return (content.innerHTML =
          "<p class='info'>" +
          info.address +
          "</p>" +
          "<p class='info'>" +
          info.cameraId +
          "</p>");
      }
      /**
       * 为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态
       */
      _this.maps.on("pointermove", function(e) {
        var pixel = _this.maps.getEventPixel(e.originalEvent);
        var hit = _this.maps.hasFeatureAtPixel(pixel);
        if (!hit) {
          _this.maps.getTargetElement().style.cursor = "auto";
        } else {
          _this.maps.getTargetElement().style.cursor = "pointer";
        }
        // _this.maps.getTargetElement().style.cursor = hit ? "pointer" : "";
      });
    }
  },
  mounted() {
    this.initMap();
  }
};
</script>

<style scoped>
.label {
  font-size: 20px;
}
#map {
  width: 100%;
  height: 99vh;
}
.ol-popup {
  position: absolute;
  background-color: #eeeeee;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -100px;
  width: 180px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: #eeeeee;
  border-width: 10px;
  left: 48px;
  margin-left: 40px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 10px;
  left: 48px;
  margin-left: 40px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "✖";
}
.info {
  margin: 0;
}
</style>

参考文章地址：https://blog.csdn.net/weixin_44009447/article/details/105550064