我是靠谱客的博主 温柔萝莉,这篇文章主要介绍vue(16) : leaflet[1] : 入门,现在分享给大家,希望可以做个参考。

>leaflet

https://vue2-leaflet.netlify.app/components/LMarker.html#props

>>中文文档

leafLet入门教程兼leafLet API中文文档参考_Sunny蔬菜小柠的博客-CSDN博客_leaflet中文文档

>>添加标记

leaflet(二)在地图上添加标记 - 走看看

leaflet 在地图上创建marker标记 - JackGIS - 博客园

>距离测量

Leaflet 简单测距_大洪的博客-CSDN博客_leaflet 测距

>官方文档

Documentation - Leaflet - a JavaScript library for interactive maps

>坐标偏移

leaflet中如何优雅的解决百度、高德地图的偏移问题_GIS兵器库的博客-CSDN博客_leaflet天地图偏移

>曲线2

leaflet曲线2_fk129的博客-CSDN博客_leaflet 画曲线

>曲线

地图已知两点坐标画一条曲线_宁晓的博客-CSDN博客

地图页面

复制代码
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<template> <div id = "map" class = "maps"> </div> </template> <script> import '../../leaflet/leaflet.css' import '../../leaflet/leaflet.pm.css' import '../../leaflet/leaflet.js' import '../../leaflet/leaflet.pm.min.js' import '../../leaflet/leaflet.ChineseTmsProviders.js' var map = null export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, mounted() { this.initMap(); }, methods: { initMap() { /** * 智图地图内容 */ var normalm1 = L.tileLayer.chinaProvider('Geoq.Normal.Map', { maxZoom: 18, minZoom: 5 }); var normalm2 = L.tileLayer.chinaProvider('Geoq.Normal.Color', { maxZoom: 18, minZoom: 5 }); var normalm3 = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', { maxZoom: 18, minZoom: 5 }); var normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', { maxZoom: 18, minZoom: 5 }); var normalm5 = L.tileLayer.chinaProvider('Geoq.Normal.Warm', { maxZoom: 18, minZoom: 5 }); var normalm6 = L.tileLayer.chinaProvider('Geoq.Theme.Hydro', { maxZoom: 18, minZoom: 5 }); /** * 天地图内容 */ var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', { maxZoom: 18, minZoom: 5 }), normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', { maxZoom: 18, minZoom: 5 }), imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', { maxZoom: 18, minZoom: 5 }), imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', { maxZoom: 18, minZoom: 5 }), terrainm = L.tileLayer.chinaProvider('TianDiTu.Terrain.Map', { maxZoom: 18, minZoom: 5 }), terraina = L.tileLayer.chinaProvider('TianDiTu.Terrain.Annotion', { maxZoom: 18, minZoom: 5 }); var normal = L.layerGroup([normalm, normala]), image = L.layerGroup([imgm, imga]), terrain = L.layerGroup([terrainm, terraina]); /** * 谷歌 */ var normalMap = L.tileLayer.chinaProvider('Google.Normal.Map', { maxZoom: 18, minZoom: 5 }), satelliteMap = L.tileLayer.chinaProvider('Google.Satellite.Map', { maxZoom: 18, minZoom: 5 }); /** * 高德地图 */ var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', { maxZoom: 18, minZoom: 5 }); var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', { maxZoom: 18, minZoom: 5 }); var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', { maxZoom: 18, minZoom: 5 }); var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga]); /** * OSM地图 */ var OsmMap = L.tileLayer.chinaProvider('OSM.Normal.Map', { maxZoom: 18, minZoom: 5 }); /** * 百度地图 var Baidu = L.tileLayer.chinaProvider('Baidu.Normal.Map', { maxZoom: 18, minZoom: 5 }); var Baiduimgem = L.tileLayer.chinaProvider('Baidu.Satellite.Map', { maxZoom: 18, minZoom: 5 }); var Baiduimga = L.tileLayer.chinaProvider('Baidu.Satellite.Annotion', { maxZoom: 18, minZoom: 5 }); var Baiduimage = L.layerGroup([Baiduimgem, Baiduimga]); */ var baseLayers = { "智图地图": normalm1, //"智图多彩": normalm2, "智图午夜蓝": normalm3, "智图灰色": normalm4, "智图暖色": normalm5, "智图冷色": normalm6, "天地图": normal, "天地图影像": image, "天地图XX": terrain, "谷歌地图": normalMap, "谷歌影像": satelliteMap, "高德地图": Gaode, "高德影像": Gaodimage, "OSM地图": OsmMap //, // "百度地图": Baidu, //"百度影像": Baiduimage } map = L.map("map", { //crs: L.CRS.Baidu, center: [29.329328,120.138346], zoom: 12, layers: [Gaode], attributionControl: false, zoomControl: false }); L.control.layers(baseLayers, null).addTo(map); L.control.zoom({ zoomInTitle: '放大', zoomOutTitle: '缩小' }).addTo(map); L.marker([29.329328,120.138346]).addTo(map); } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .maps { width: 100%; height: 100vh; z-index:1; margin: auto } </style>

最后

以上就是温柔萝莉最近收集整理的关于vue(16) : leaflet[1] : 入门的全部内容,更多相关vue(16)内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(133)

评论列表共有 0 条评论

立即
投稿
返回
顶部