vue中使用leaflet地图

最新推荐文章于 2025-03-12 15:55:36 发布

你撒开我啊

最新推荐文章于 2025-03-12 15:55:36 发布

阅读量8.9k

点赞数 6

分类专栏： leaflet 文章标签： vue.js 街景地图 javascript

本文链接：https://blog.csdn.net/weixin_48623317/article/details/114696803

版权

本文介绍了在Vue项目中如何使用Leaflet地图，包括引入leaflet及其插件、封装地图创建方法、创建并展示地图，以及动态切换地图类型。通过在main.js中引入leaflet和leaflet.pm、leaflet.chinatmsproviders插件，然后在map.vue组件中调用方法创建地图。项目源代码已上传至GitHub，供学习参考。

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

vue中使用leaflet地图

根据项目需要学习GIS地图

前言

GIS地图学习

一、引入leaflet地图及插件

npm导入leaflet地图

npm install leaflet

完成后在main.js中引入（可全局引入也可单独引入）

import L from "leaflet";
import 'leaflet/dist/leaflet.css'

二、封装创建地图方法

1.创建一个文件夹map在文件夹下创建js文件map.js

在这里插入图片描述

2.封装创建地图实例方法

代码如下（示例）：

import L from "leaflet";
import 'leaflet.pm'
import 'leaflet.pm/dist/leaflet.pm.css'
//定义地图实例
const newMap = (domId, option) => {
   
  let map = L.map(domId, option)
  return map
}
//切片图层
const createLayers = (map, url, option) => {
   
  let newLeayer = L.tileLayer(url, option)
  newLeayer.addTo(map)
  return newLeayer
}
//leaflet.ChineseTmsProviders插件加载地图
const chinaLayers = (map, url, option) => {
   
  let chinaLeayer = L.tileLayer.chinaProvider(url, option)
  chinaLeayer.addTo(map)
  return chinaLeayer
}

export default {
   newMap,createLayers,chinaLayers}

leaflet.pm插件可添加一些地图工具（如：画点，画圆，画矩形，画线以及清除编辑功能）
leaflet.chinatmsproviders插件可加载各种地图（如：智图地图，谷歌地图，高德地图等包含卫星地图）

npm i leaflet.pm
npm i leaflet.chinatmsproviders

在main.js中引入两个插件

import 'leaflet.pm'
import 'leaflet.pm/dist/leaflet.pm.css'
import 'leaflet.chinatmsproviders'

将map.js引入到main.js中，将map.js挂载到Vue上（方便调用）

import map from './map/map.js'
//将m

最低0.47元/天解锁文章