leaflet - Geojson/草坪 : merge multiple polygons to one polygon keeping hole

Question

所以我想在 javascript 中合并相邻的多边形，这就是我的代码实际拥有的内容:

我想删除内部笔划但保留边框笔划。

所以我想从这里开始:

对此:

我想保留巴黎的洞 - 我可以定义必须对哪些多边形进行分组，但我无法将它们与此代码合并:

var map = L.map('map', {
    center: [46.52863469527167, 2.43896484375],
    zoom: 6,
    maxZoom: 18,
    minZoom: 7
});
$http.get("france.json").then(function (response) {
    $scope.communeFr = response.data.features
    $http.get(apiult).then(function (response) {
        $scope.showCommune = response.data.Liste
        $scope.communeFr.map(x => {
            x.show = false
            for (let i = 0; i < $scope.showCommune .length; i++) {
                if (x.properties.insee == $scope.showCommune[i].insee) {
                    x.show = true
                    return
                }
            }                
        })
        L.geoJson($scope.communeFr, {
            filter: function (feature, latlng) {
                return feature.show 
            }
        }).addTo(map);
    });
    
});

更新 - 我尝试使用 turf.union 但输出不正确:

这是我的代码

var GroupPolygons = [];    
$scope.communeFr.map(x => {
    x.show = false
    for (let i = 0; i < $scope.showCommune .length; i++) {
        if (x.properties.insee == $scope.showCommune[i].insee) {
            GroupPolygons.push(x)
        }
    }                
})
var union = turf.union(...GroupPolygons)
L.geoJson(union).addTo(map)

Answer 1

关于 union 的 turf 文档中关于可以作为参数传递的多边形数量似乎存在歧义。参见 here和 here .看起来它必须一次是两个 - 所以这会起作用:

// feature ids to remove e.g. central Paris
var removeIds = [868, 869, 870, 871, 872, 873, 874, 875, 876, 877, 878, 879, 880, 881, 882, 883, 884, 885, 886, 887];

// filter features to remove central Paris
var hole = fc.features.filter(f => !removeIds.includes(f.properties.ID_APUR))

// do the union over each feature
var union = hole[0];
for (let i=1; i<hole.length; i++) {
  union = turf.union(union, hole[i]);
}

我选择了巴黎市中心的一堆要删除，然后从剩余的功能中我从功能 0 开始，然后 turf.join 所有其他功能(从索引 1 开始)到这个。看起来效率低下但有效...

这里的小陷阱:

// new Feature collection with unioned features
var fc2 = {
  "type": "FeatureCollection",
  "features": [union] // note features has to be an array
}

请记住将 FeatureCollection 传递给 L.geoJson 并且 features 属性需要是一个数组 - 即使在这种情况下它包含合并的单个特征地区。

工作示例:

// center map on Paris
var map = L.map('mapid', {
    center: [48.856, 2.352],
    zoom: 9,
    maxZoom: 18,
    minZoom: 1
});

// add tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var url = "https://gist.githubusercontent.com/robinmackenzie/937e5bd42a0412c21281f69b8f0c8614/raw/fbed7c2783366463a250e4bb0ebcf3c5f6d54dfe/greaterParis.geo.json";

// get greater Paris definition
fetch(url)
  .then(response => response.json())
  .then(fc => { 

    // feature ids to remove e.g. central Paris
    var removeIds = [868, 869, 870, 871, 872, 873, 874, 875, 876, 877, 878, 879, 880, 881, 882, 883, 884, 885, 886, 887];

    // filter features to remove central Paris
    var hole = fc.features.filter(f => !removeIds.includes(f.properties.ID_APUR))

    // do the union over each feature
    var union = hole[0];
    for (let i=1; i<hole.length; i++) {
      union = turf.union(union, hole[i]);
    }

    // new Feature collection with unioned features
    var fc2 = {
      "type": "FeatureCollection",
      "features": [union] // note features has to be an array
    }

    // add to map
    L.geoJson(fc2).addTo(map);
  
  });

#mapid { height: 200px; }

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src='https://unpkg.com/@turf/turf@6.3.0/turf.min.js'></script>
<div id="mapid"></div>