使用leaflet制作二维gis地图

https://leafletjs.com/
先贴上leaflet的官网，官网偶尔会抽风打不开。
二维gis开发的api基本大同小异，像百度地图、高德地图、腾讯地图等开发起来比较相似。
推荐先引入chinaProvider,免去缓慢加载的烦恼。
1.地图控件

var normalm = L.tileLayer.chinaProvider('Google.Normal.Map', {
    maxZoom: 18, //最大缩放级别
    minZoom: 5, //最小缩放级别
    attribution: '右下角的标记文字'
});
normalm.setOpacity(0.8) //设置网格图层的不透明度。
var normal = L.layerGroup([normalm]) //将多个图层分组并将其作为一个图层处理

2.地图上添加站点

      nameMarker = L.marker([item.Lat, item.Lon], {
                                icon: L.icon({
                                    iconUrl: 'test.png',
                                    iconSize: [15, 15]
                                })
                            }).bindPopup(html, {
                                maxWidth: 500,
                                keepInView: true,
                                className: "PapupContainer",
                                offset: [0, -200]
                            });
/* html为自己写的弹窗页面，包裹在leaflet-popup-Container里，
    建议通过offset偏移改变位置，不要通过更改css方式改变位置，dom套了三层，改起来很麻烦*/
marker = L.marker([item.Lat, item.Lon], {
                            No: item.No,
                            icon: L.divIcon({
                                html: `<div class="popupKit" onclick="$('.popupKit').removeClass('kitActive');
$('.popupKitArrow').removeClass('arrowActive');
this.classList.add('kitActive');
this.childNodes[0].classList.add('arrowActive')">
<div class='popupKitArrow'></div>` + item.Name + `</div>`,
                            })
                        }).addTo(map)
                        .bindPopup(html, {
                            maxWidth: 500,
                            keepInView: true,
                            className: "PapupContainer",
                            offset: [0, -200]
                        });
// 使用divIcon展示站点名，同样html可以自己设计，添加点击事件等

3.路线展示与控制显隐（计划施工路段/实际施工路段）