leaflet学习笔记

常用地图瓦片url

  腾讯、高德是GCJ02坐标系，百度是BD09坐标系，谷歌、必应是WGS84坐标系，天地图是CGCS2000坐标系，瓦片地图都是平面墨卡托投影。WGS84和CGCS2000坐标系，近似认为它们相等就可以了。

点击查看url

高德路网：
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

————————————————
版权声明：以上为CSDN博主「才华横溢吴道简」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sinat_41310868/article/details/105959659

视图设置（高德地图url）

  对地图进行视图设置，.setview（[纬度,经度],缩放级别），并添加高德地图图块图层到图层中。

    <script>
        var map = L.map('map').setView([41,120], 3.5);
        L.tileLayer('https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
            maxZoom: 19,
            attribution: '&copy; <a href="https://webapi.amap.com/theme/v2.0/logo@2x.png">©2024 高德地图 </a>'
        }).addTo(map);
    </script>

地图对象常用方法

弹窗类

用于在地图的某些位置打开弹出窗口。使用Map.openPopup 可以 打开弹出窗口，同时确保一次只打开一个弹出窗口 （或使用 Map.addLayer 打开任意数量的文件)。
使用弹出窗口作为图层：

1.	var popup = L.popup()  
2.	.setLatLng([41,120])  
3.	.setContent("I am a standalone popup.")  
4.	.openOn(map);  

将某些信息附加到地图上的特定对象时，使用弹出窗口：

1.	var marker = L.marker([31.142319598989058, 121.66776466474403]).addTo(map);  
2.	  
3.	var circle = L.circle([31.142319598989058, 121.66776466474403], {  
4.	    color: 'red',  
5.	    fillColor: '#f03',  
6.	    fillOpacity: 0.5,  
7.	    radius: 3330  
8.	}).addTo(map);  
9.	  
10.	var polygon = L.polygon([  
11.	    [31.550452675471497,120.1882324134931],  
12.	    [31.409912194070973,120.13604735489935],  
13.	    [31.36770891512085,120.0673828041181],  
14.	                      ……  
15.	    [31.508780982478108, 120.22393797989935]  
16.	]).addTo(map);  
17.	  
18.	marker.bindPopup("<b>上海迪士尼度假区</b><br>上海市浦东新区黄赵路469号").openPopup();  
19.	circle.bindPopup("上海迪士尼度假区");  
20.	polygon.bindPopup("太湖");  

使用常见地图控件

（一）地图缩放

control.zoom是缩放控件；有两个按钮分别是放大（Zoom in）和缩小（Zoom out）。其实这个按钮在我们创建的Map上是默认存在的，除非在通过L.map初始化Map时，把参数zoomControl设置为了false，这样才不会显示最初的缩放控件。

（二）地图比例尺

control.scale是比例尺控件，参数imperial标识英制长度，默认是true，这里修改为false不让显示。设置完成后，在Map左下角显示一个比例尺scale：

1.	L.control.scale({  
2.	    position:"bottomleft",  
3.	    maxWidth:'100',  
4.	    imperial:false,  
5.	}).addTo(map);