baise-pc-vue/src/views/warningHome/warningMap.js

import config from "@/api/config.js";
import * as KMap from "@/utils/ol-map/KMap";
import * as util from "@/common/ol_common.js";
import Point from "ol/geom/Point.js";
import Feature from "ol/Feature";
import VectorLayer from "ol/layer/Vector.js";
import WKT from "ol/format/WKT.js";
import ScaleLine from "ol/control/ScaleLine";
import { useRouter } from "vue-router";
import Overlay from 'ol/Overlay'
import eventBus from "@/api/eventBus";
/**
 * @description 地图层对象
 */
class HomeMap {
  constructor() {
    let that = this;
    let vectorStyle = new KMap.VectorStyle();
    this.vectorStyle = vectorStyle;
  }

  initMap(location, target) {
    let level = 6;
    let coordinate = util.wktCastGeom(location).getFirstCoordinate();
    this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 6, 22);
    eventBus.emit('warningMap:init', this.kmap);
    this.addPopup()
    this.addMapListen()
  }

  addMapListen() {
    let that = this
    // 监听地图点击事件
    // 创建弹窗图层
    this.popup = new Overlay({
      element: document.getElementById('popup'),
      positioning: 'bottom-center',
      offset: [0, -10],
    });
    this.kmap.map.addOverlay(this.popup);
    setTimeout(() => {
      console.log('');
      // this.popup.getElement().innerHTML = `<div class="flight" id="flight">231231</div>`;
    }, 100)
    that.kmap.on('singleclick', function (event) {
      let feature = that.kmap.map.forEachFeatureAtPixel(event.pixel, function (feature) {
        return feature;
      });
      console.log('feature', feature);
      if (feature) {
        // 在这里可以获取feature的属性，并显示在弹窗中
        let content = '<p>Feature properties:</p><ul>';
        for (let key in feature.getProperties()) {
          content += '<li>' + key + ': ' + feature.get(key) + '</li>';
        }
        content += '</ul>';
        document.getElementById('popup-title').innerHTML = "广东-清远";
        document.getElementById('popup-content').innerHTML = content;
        that.popup.setPosition(event.coordinate); // 设置弹窗位置为点击位置
      } else {
        // that.popup.setPosition(undefined); // 如果没有点击到feature，则隐藏弹窗

        // 在这里可以获取feature的属性，并显示在弹窗中
        let content = '<div>';
        // for (let key in feature.getProperties()) {
        //   content += '<li>' + key + ': ' + feature.get(key) + '</li>';
        // }
        content += '区县的气象风险</div>';
        document.getElementById('popup-title').innerHTML = "广东-清远";
        document.getElementById('popup-content').innerHTML = content;
        that.popup.setPosition(event.coordinate); // 设置弹窗位置为点击位置
      }
    })
  }

  // 点击地图出现弹窗
  addPopup() {
    // 创建弹窗图层
    this.popup = new Overlay({
      element: document.getElementById('popup')
    });
    this.kmap.map.addOverlay(this.popup);
  }
}

export default HomeMap;