LeafLet开源GIS框架Popup添加VUE子组件的解决方案

前言

最近在做可交互的瓦片地图，其中包括点击地图上的marker可以弹出popup，通常会采用html拼接的形式来绘制弹出的popup框，但这种方式不太利于后期维护，于是想到能否使用VUE组件设计好popup组件，再加载进来。

开发环境

VUE 3.3.4
element-plus 2.3.14
leaflet 1.9.4

实现方式

1. 定义子组件

此处定义的子组件名称为：PopupAnchor.vue

<template>
    <div>
        <el-card class="box-card p-0" shadow="hover" body-style="padding: 0px">
            <div>示例</div>
        </el-card>
 
    </div>
</template>

2.加载子组件

  <template>
    <div>
       <!-- 此处省略LeafLet地图相关实现 -->
 
       <!-- 载入Popup组件 -->
      <PopupAnchor :id="popupAnchor.ID" :anchor="popupAnchor" :testData="testData" />
    </div>
</template>
import PopupAnchor from '~/pages/map/components/PopupAnchor.vue';

3.将组件绑定到marker上，并监听click事件

在onMounted钩子函数中写入以下逻辑

        // 获取加载好的popupAnchor组件
        const element = document.getElementById(popupAnchor.value.ID);
 
        // 定义marker，传入坐标值
        var m1 = L.marker([item.PosX, item.PosY]).addTo(map)
        // 绑定popupAnchor组件
        m1.bindPopup(element);
 
        // 监听click事件
        m1.on('click', function () {
            // 打开Popup
            m1.openPopup();
        });

效果

效果