网站LOGO
凉月十七
页面加载中
7月17日
网站LOGO 凉月十七
 
菜单
  • 用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    LeafLet开源GIS框架Popup添加VUE子组件的解决方案
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。

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

    凉月十七 · 原创 ·
    笔记 · LeafLetGISVUE3
    共 1295 字 · 约 1 分钟 · 180

    前言

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

    开发环境

    VUE 3.3.4
    element-plus 2.3.14
    leaflet 1.9.4


    实现方式

    1. 定义子组件

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

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

    2.加载子组件

    text 代码:
      <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钩子函数中写入以下逻辑

    text 代码:
            // 获取加载好的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();
            });

    效果

    效果效果
    声明:本文由 凉月十七(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。
    现在已有

    1

    条评论
    发一条!
    1. 头像
      123
      头像 123
      • 等级:Lv.1
      • 角色:访客
      • 在线:三月内

      此内容仅评论者及博主可见

    博客logo 凉月十七  
    MOEICP 萌ICP备20240420号 ICP 粤ICP备2024236063号

    🕛

    本站已勉强运行 88 天 21 小时 43 分

    🌳

    by MyLife
    凉月十七. © 2024 ~ 2024.
    网站logo

    凉月十七  
     
     
     
     
    壁纸
     
     
     
     

    1

    1

    1

  • 下一篇