在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([]);}