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

做项目时需要在Leaflet地图上绘制一个多边形,在网上找了代码实现如下:在Leaflet地图上绘制多边形,避免缩放时dynamicMapLayer遮住多边形_第1张图片

浏览器查看元素如下:

在Leaflet地图上绘制多边形,避免缩放时dynamicMapLayer遮住多边形_第2张图片

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

img为dynamicMapLayer图层;

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

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

在Leaflet地图上绘制多边形,避免缩放时dynamicMapLayer遮住多边形_第3张图片

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

在Leaflet地图上绘制多边形,避免缩放时dynamicMapLayer遮住多边形_第4张图片

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

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

在Leaflet地图上绘制多边形,避免缩放时dynamicMapLayer遮住多边形_第5张图片

这下无论怎么缩放都不会遮挡装有多边形的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([]);
}


你可能感兴趣的:(开源地图)