在各种单独的多边形之外遮盖Leaflet地图时的奇怪行为

问题描述

受http://embed.plnkr.co/1I7dIw/的启发，我试图屏蔽各种多边形之外的地图其余部分。但是我似乎在顶点上遇到了一些挑战。可能是某些多边形没有关闭，所以蒙版在开始/停止时很费劲吗？在每个多边形内，起点/终点都相同。

还是问题出在脚本，即L.mask？

L.Mask = L.Polygon.extend({

    options: {
        stroke: false,color: '#333',fillOpacity: 0.5,clickable: true,outerBounds: new L.LatLngBounds([-90,-360],[90,360])
    },initialize: function (latLngs,options) {    

         var outerBoundsLatLngs = [
            this.options.outerBounds.getSouthWest(),this.options.outerBounds.getNorthWest(),this.options.outerBounds.getNorthEast(),this.options.outerBounds.getSouthEast()
        ];

        L.Polygon.prototype.initialize.call(this,[outerBoundsLatLngs,latLngs],options);  
    }

});

L.mask = function (latLngs,options) {
    return new L.Mask(latLngs,options);
};

寻找任何可能的帮助。

演示... https://jsfiddle.net/q7wo0ndf/7/（为重担而道歉）

解决方法

L.mask类是正确的，您的数据有问题。

让传单为您服务：

var sanbartolome_001 = ...;
var sanbartolome_002 = ...;
...

var options = {
    style: function(feature) {
        return {
            "color": "black","weight": 3,"opacity": 1,"fillColor": "transparent","fillOpacity": 0.0
        };
    }
};

var latLngs = [];

var rfc_nerfc_001 = new L.geoJson(sanbartolome_001.features,options).addTo(map);
var rfc_nerfc_002 = new L.geoJson(sanbartolome_002.features,options).addTo(map);
var rfc_nerfc_003 = new L.geoJson(sanbartolome_003.features,options).addTo(map);
var rfc_nerfc_004 = new L.geoJson(sanbartolome_004.features,options).addTo(map);
var rfc_nerfc_005 = new L.geoJson(sanbartolome_005.features,options).addTo(map);


latLngs.push(rfc_nerfc_001.getLayers()[0].getLatLngs());
latLngs.push(rfc_nerfc_002.getLayers()[0].getLatLngs());
latLngs.push(rfc_nerfc_003.getLayers()[0].getLatLngs());
latLngs.push(rfc_nerfc_004.getLayers()[0].getLatLngs());
latLngs.push(rfc_nerfc_005.getLayers()[0].getLatLngs());

var rfc_nerfc_000 = L.mask(latLngs).addTo(map);