leaflet自定义popup组件

贴个群号

WebGIS学习交流群461555818，欢迎大家。

引入popup组件和vue实例

import Vue from "vue";
import popupVue from '../../components/popup/PopupVue' //这个是自定义的，普通的组件就行

使用

可以监听click事件后，获取到经纬度，直接使用这个，也可以改写loadPopup为传出那个con，然后生成要素的时候就直接bindpopup，把这个挂在上面

    /**
     * @desc 增加popup
     * @param {JSON} popData - 获取到的展示数据 键值对
     * @param {object} latlng - 经纬度
     * @param {String} name - 图层名称
     * @returns 返回数据 json 键值对结果
    */
    loadPopup(popData,latlng,name){
      const content = {
        name:name,
        data:popData
      }
      let com=popupVue;
      let con= this.returnVueComponentElement(com,{popupContent:content})
      let popup = L.popup()
        .setLatLng(L.latLng(latlng.lat, latlng.lng))
        .setContent(con)
        .openOn(this.map);
    },
    /**
     * 返回vue组件dom
     * @param component	xxx.vue
     * @param props	自定义传递给组件的属性数据
     * @returns {any|VNode}
     */
    returnVueComponentElement(targetCopm, props) {
      let popComponent = Vue.component('POPUP-1',targetCopm)
      let mypop = new popComponent({propsData:props}).$mount()
      let popEl =mypop.$el
      return popEl
    },