基于leaflet自定义非地理地图实现可视化

最新推荐文章于 2025-07-04 10:00:50 发布

Sevenoo-

最新推荐文章于 2025-07-04 10:00:50 发布

阅读量724

点赞数 1

CC 4.0 BY-SA版权

分类专栏：笔记文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/angela_ice/article/details/129027709

本文介绍了如何在Vue2项目中使用Leaflet库创建地图组件，包括npm和yarn的安装方法，地图的初始化、缩放功能实现，以及在弹框中展示地图并添加点击打点的功能。在弹框场景中遇到地图缩放问题，通过监听父组件弹框状态并在打开时重新初始化地图来解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装

// npm 安装
npm install leaflet vue2-leaflet --save

// yarn 安装
yarn add leaflet vue2-leaflet

2、引入

//引入css
import "leaflet/dist/leaflet.css";
// L 相当于Jquery的 $ 暴露给window供我们调用里面的方法
import L from "leaflet";

完成上面两步，那么准备工作就已经完成了。

开始上需求：在新增的弹框里面，点击选择点位，再弹出一个地图弹框，然后在该图上打点。

思路以及步骤：先封装一个非地理地图组件，在父组件中调用，正常显示地图组件。再在子组件中实现瞄点功能

父组件代码

<Modal
   v-model="isShowPoint"
   title="点位选择"
   footer-hide
   className="modal-w">
 <div class="ponit-wrap">
    // 在父组件中调用子组件
     <base-map :isShowPoint='isShowPoint' ref="baseMap"></base-map>
  </div>       
</Modal>
<script>
import baseMap from './pointMap.vue'
export default {
  components:{ baseMap },
｝
</script>