在vue中使用leaflet加载地图
之前碰到局域网中搭建地图需求,用leaflet进行操作(vue2项目),以此记录:
一.安装引入
1 | npm install leaflet --save |
在main.js中引入(也可以在所需页面引入,由于leftlet很小,只有38K,就直接全局了)
1 2 | import L from "leaflet" import "leaflet/dist/leaflet.css" |
二.在vue中使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <template> <div class = "mapBox" > <div>在vue2中使用leaflet</div> <!-- 地图容器 --> <div id= "map" ></div> </div> </template> <script> export default { name: 'LeafletMap' , data() { return { map: null } }, mounted() { // 地图初始化 this .initMap() }, methods: { // 使用id为map的div容器初始化地图,同时指定地图的中心点和缩放级别 initMap() { let map = L.map( "map" , { center: [24.485666, 118.095498], // 中心位置 zoom: 12, // 缩放等级 attributionControl: true , // 版权控件 zoomControl: true //缩放控件 }); this .map = map; // data上需要挂载 L.tileLayer( "http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}" ).addTo(map) // 加载底图 } } } </script> <style scoped> #map { width: 800px; height: 500px; margin: 50px auto; } </style> |
效果如下:
初始化的时候还有一些别的参数可配置:地图状态:minZoom,maxZoom,crs,交互选项:dragging等,
官方文档地址: https://leafletjs.com/reference.html,
木遥翻译中文版地址:链接:https://pan.baidu.com/s/143LMcNA9leTWuscplaf3JQ提取码:g7i2
1 | tileLayer底图用的是高德的,地址参考: https: //blog.csdn.net/sinat_41310868/article/details/105959659 |
高德路网: https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8<ype=11 高德影像: https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z} 高德矢量: http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z} 谷歌矢量: http://mt2.google.cn/vt/lyrs=m&scale=2&hl=zh-CN&gl=cn&x={x}&y={y}&z={z} 谷歌路网: https://mt1.google.com/vt/lyrs=h&x={x}&y={y}&z={z} 谷歌影像: http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z} 谷歌影像带注记: https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z} 谷歌地形: https://mt1.google.com/vt/lyrs=t&x={x}&y={y}&z={z} 谷歌地图矢量带地形渲染: https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z} 街景地图: https://tile.openstreetmap.org/{z}/{x}/{y}.png 天地图影像: http://t7.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e3b434f191257368fc43c5b011ab5911 天地图影像注记: http://t7.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e3b434f191257368fc43c5b011ab5911 天地图矢量: http://t7.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e3b434f191257368fc43c5b011ab5911 天地图矢量注记: http://t7.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e3b434f191257368fc43c5b011ab5911 天地图地形: http://t7.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e3b434f191257368fc43c5b011ab5911 天地图地形注记: http://t7.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e3b434f191257368fc43c5b011ab5911 腾讯地图矢量: http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0
多说一句,本来想在高德官网找类似的地址,结果没找到.问过客服说是暂时不对外提供三方渲染引擎使用,所以如果商用,慎重,可以找开放的.
github也有大神把leaflet进行了封装,github地址: https://github.com/vue-leaflet/Vue2Leaflet
当然,还有地图标点,划线,划区域我们下次再说
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章