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();
        });

效果：

总结：

        以上方法采用的是让VUE预先渲染，随后将渲染好的组件绑定到marker上，在marker被点击后，该组件就会显示。

        由于是VUE预先渲染好组件，因此也可以支持element-ui（之前我用vue的h函数做的时候发现无法正常的进行element-ui渲染）

        实际业务中，每个marker都有自己的相关信息，可以在marker的click事件触发的时候先对组件的数据进行更新，然后再openPopup()。

前期参考：

采用html拼接的方式 ↓ ↓ ↓

艾尔登法环地图-艾尔登法环全BOSS位置-艾尔登法环地图工具

塞尔达传说：旷野之息