如何解决Geojson/ turf :将多个多边形合并为一个多边形保持孔
所以我想在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)
解决方法
草皮文档中关于 union
的关于可以作为参数传递的多边形数量似乎有歧义。请参阅 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: '© <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,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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。