在Leaflet地图上绘制多边形，避免缩放时dynamicMapLayer遮住多边形

做项目时需要在Leaflet地图上绘制一个多边形，在网上找了代码实现如下：

浏览器查看元素如下：

第一个SVG为绘制中国区域雄鸡时使用的，注意中国边界的粗线；

img为dynamicMapLayer图层；

第二个SVG就是画多边形时生成的；

本以为OK了，结果在缩放地图时多边形消失了

经验判断可能是被某个图层遮住了，查看元素后果然发现：

原本在第三个位置的SVG（画多边形时生成的）跑到了第二个位置，当然被img给遮住了，至于为什么元素会改变位置，猜可能是在缩放时dynamicMapLayer加载较慢导致SVG先进入到页面中；

解决方法：为class为leaftlet-zoom-animated的svg元素添加z-index属性即可；

这下无论怎么缩放都不会遮挡装有多边形的SVG元素了

实现代码如下：

    var poly_points = [];//角点
    var poly_line=new L.Polyline([]);//折线层
    var poly;//面图层
    var layerGroup=new L.layerGroup();//图层组
    var testArea;

     map = L.map('map', {
            center: [45, 105],
            zoom: 5,
            doubleClickZoom :false,
            layers: [dynLayer, layerGroup]
     });

     map.on('click', addClickLatlng);//单击，添加点
     map.on('dblclick', showPoly);//双击，显示面

function addClickLatlng(e){
        //当前点
        var clickLocation=[e.latlng.lat,e.latlng.lng];
        poly_points.push(clickLocation);
        //显示折线
        poly_line.addLatLng(e.latlng);
        layerGroup.addLayer(poly_line);
}

    //显示矩形
function showPoly(){
        layerGroup.clearLayers();//清除之前的面与线，后续会加上新的封闭的面
        for (var i = 0, latlngs = [], len = poly_points.length; i < len; i++) {
            latlngs.push(new L.LatLng(poly_points[i][0], poly_points[i][1]));
        }
        poly = new L.Polygon(latlngs);
        layerGroup.addLayer(poly);
        if($(".leaflet-zoom-animated").css("z-index") !=5)
            $(".leaflet-zoom-animated").css("z-index",5);
        //清空
        poly_points=[];
        poly_line=new L.Polyline([]);
}

转载自：https://blog.csdn.net/u010534192/article/details/75035337