之前碰到局域网中搭建地图需求,用leaflet进行操作(vue2项目),以此记录:
一.安装引入
|
1 |
|
在main.js中引入(也可以在所需页面引入,由于leftlet很小,只有38K,就直接全局了)
|
1 2 |
|
二.在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 |
|
效果如下:
初始化的时候还有一些别的参数可配置:地图状态:minZoom,maxZoom,crs,交互选项:dragging等,
官方文档地址: https://leafletjs.com/reference.html,
木遥翻译中文版地址:链接：https://pan.baidu.com/s/143LMcNA9leTWuscplaf3JQ提取码：g7i2
|
1 |
|
高德路网：
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
当然,还有地图标点,划线,划区域我们下次再说
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。