前一篇博客记录了使用folium配合openstreetmap地图瓦片展现地图并标注地图组件，这里介绍一篇使用leaflet的使用教程，达到的效果和之前一片博客差不多，具体可以查看博客内容：https://sulao.cn/post/698

首先我们需要去https://leafletjs.com/download.html下载最新的leaflet文件，因为我是本地的离线地图，所以我们瓦片需要提前下载好，通过IIS提供瓦片图片的访问，因为后端用的flask对图片资源等代理不太好，所以用的IIS

直接上我的示例代码：

01.
{% include 'public/header.html' %}
02.
<link rel="stylesheet" href="{{ url_for('static',filename='leaflet/leaflet.css') }}"/>
03.
<script src="{{ url_for('static', filename='leaflet/leaflet.js') }}"></script>
04.
<div id="map" style="min-height: 570px;"></div>
05.
<script>
06.
var map = L.map('map').setView([30.779008, 114.292145], 11);
07.
L.tileLayer('http://localhost/Tiles/{z}/{x}/{y}.png', {
08.
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
09.
    maxZoom: 18,
10.
    id: 'mapbox.streets'
11.
}).addTo(map);
12.
layui.use(['layer', 'jquery'], function(){
13.
    var form = layui.form
14.
    ,layer = layui.layer
15.
    ,$ = layui.jquery;
16.
    layer.ready(function(){
17.
        $.ajax({
18.
            url:'{{ url_for("opod.mapRetrieve") }}',
19.
              type: 'POST',
20.
            dataType: 'json',
21.
              success: function(json){
22.
                console.log(json);
23.
                if(json.code == 0){
24.
                    if(json.no_lonlat > 0){
25.
                        layer.msg("有"+no_lonlat+"个组件没有填写经纬度！");
26.
                    }
27.
                    for(var p in json.data){
28.
                        console.log()
29.
                        L.marker([json.data[p]["lon"], json.data[p]["lat"]]).addTo(map).bindPopup(json.data[p]["name"]).openPopup();
30.
                    }
31.
                }
32.
            }
33.
        });
34.
    });
35.
});
36.
var popup = L.popup();
37.
function onMapClick(e) {
38.
    popup.setLatLng(e.latlng).setContent(e.latlng.toString()).openOn(map);
39.
}
40.
map.on('click', onMapClick);
41.
</script>
42.
{% include 'public/footer.html' %}

实现效果和folium一样，但是folium再后端处理不太方便，所以还是用leaflet来处理地图，组件相对丰富很多

更多组件详细教程可以查看这里https://leafletjs.com/reference-1.5.0.html#map-option