leaflet入门

官网下载地址：https://leafletjs.com/SlavaUkraini/

CSDN下载地址： leaflet1.7.1 （20220311）
https://download.csdn.net/download/zheyiw/84596314

推荐教程：
入门第一篇
https://blog.csdn.net/sinat_36226553/article/details/88878268
系列：
https://blog.csdn.net/sinat_36226553/category_8806023.html

高德谷歌腾讯天地图地图瓦片url
https://blog.csdn.net/sinat_41310868/article/details/105959659

可以直接运行的DEMO :

<!-- 引入 文件 -->
<link rel="stylesheet" href="./leaflet/leaflet.css" />
<script src="./leaflet/leaflet.js"> </script>

<!--
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
-->
<!-- 增加地图高度 -->
<style>
    #mapDiv {
        height: 600px;
    }
</style>
<!-- 创建一个 地图的div id 必须有 但是自定义 -->
<div id="mapDiv"></div>
<script>
    //用的腾讯地图的瓦片
    var url = 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0';
    //初始化 地图
    var leafletMap = L.map('mapDiv').setView([41, 123], 5);
    //将图层加载到地图上，并设置最大的聚焦还有map样式
    L.tileLayer(url, {
        maxZoom: 18,
        id: 'mapbox.streets'
    }).addTo(leafletMap);
    //增加一个marker ，地图上的标记，并绑定了一个popup，默认打开
    L.marker([41, 123]).addTo(leafletMap)
        .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
    //增加一个圈，设置圆心、半径、样式
    L.circle([41, 123], 500, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(leafletMap).bindPopup("I am a circle.");
    //增加多边形
    L.polygon([
        [41, 123],
        [39, 121],
        [41, 126]
    ]).addTo(leafletMap).bindPopup("I am a polygon.");
    //为点击地图的事件 增加popup
    var popup = L.popup();
    function onMapClick(e) {
        popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(leafletMap);
    }
    leafletMap.on('click', onMapClick);
</script>