在指定区域之外隐藏单张特征
在指定区域之外隐藏单张特征
提问于 2020-09-09 20:34:54
我试图在定义的区域之外隐藏一些宣传单的特征。
我有一个将河流作为要素显示在RiverLayer上的单张地图和一个用于在地图当前中心周围绘制区域的circleLayer。
在我的数据库中，每条河都被分成多个部分，我只检索与当前圆形区域相交的部分。
结果如下所示：
河流显示在区域之外，因为我选择了与其相交的部分。我可以在我的数据库中选择该区域内的所有零件，但我会丢失不完全在该区域内的零件。
计算每个相关部分的交点以调整坐标将是一个解决方案，但却是一个复杂的解决方案。
事实上，我更喜欢在客户端简单地隐藏这些溢出，但我找不到解决方案。
有没有可能用leaflet来做这样的事情？
感谢您抽出时间
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-11 22:29:06
下面是一个使用turfJS的示例，该示例使用booleanWithin和lineSplit函数。
我在一个简单的basic HTML和Vanilla JS上实现了这个示例。我在“河”上添加了另一条线串来模拟环形河的外部。
var mymap = L.map('mapid').setView([43.63458105967136, 1.1613321304321291], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 20,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
}).addTo(mymap);
var center = [43.63458105967136, 1.1613321304321291];
var radius = 1500;
// L.circle(center, radius, {
// color: '#ff4081', fillColor: '#ff4081', fillOpacity: 0.5
// }).addTo(mymap);
var riverGeoJSON = [
{ "type": "Feature", "geometry": { "coordinates": [[1.159444487444759, 43.633815447205706], [1.160243520516838, 43.634633600388156], [1.160731009187281, 43.6350432633719], [1.161774921971743, 43.63541373375439], [1.162079879908259, 43.63564209781788], [1.162320030539753, 43.635959368371424], [1.162373764624914, 43.636409391647234], [1.161800286153361, 43.637212422659154], [1.160910734693605, 43.63832601539633], [1.160651867030764, 43.63886255455486], [1.160332394101095, 43.639317964879666], [1.159189872203288, 43.640743176542664], [1.158053840843969, 43.641810274789506], [1.156922548158863, 43.642651534145514], [1.155851918485514, 43.64349381183714], [1.155156982509935, 43.644214650781954], [1.15326441791592, 43.64594659208024], [1.152374775964331, 43.6470151231795], [1.151428904349222, 43.64790448439313], [1.151107886218696, 43.64840394819371]], "type": "LineString" } },
{ "type": "Feature", "geometry": { "coordinates": [[1.156570800342349, 43.632121495293006], [1.158291185472127, 43.63272397754135], [1.158901458643683, 43.633090727638866], [1.159444487444759, 43.633815447205706]], "type": "LineString" } },
{ "type": "Feature", "geometry": { "coordinates": [[1.168152938761366, 43.62917262321181], [1.167467920251437, 43.62939958202886], [1.166101976396903, 43.62960874939632], [1.164673843635074, 43.629863651007135], [1.163738326615552, 43.63021236020524], [1.163236303364402, 43.630566588076604], [1.162728104605807, 43.63119071739829], [1.161282685092185, 43.632253508072225], [1.160336935333006, 43.633151033736986], [1.159444487444759, 43.633815447205706]], "type": "LineString" } },
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
1.0526275634765625,
43.550289946081115
],
[
1.07940673828125,
43.63334186269
],
[
1.0764884948730469,
43.6336524704596
]
]
}
}
];
// L.geoJSON(riverGeoJSON, {}).addTo(mymap);
var centerGeoJSON = [center[1], center[0]];
var radiusGeoJSON = radius / 1000;
var options = { steps: 50, units: 'kilometers' };
var circleGeoJSON = turf.circle(centerGeoJSON, radiusGeoJSON, options);
L.geoJSON(circleGeoJSON, {}).addTo(mymap);
var riverClipped = {}
for (let index = 0; index < riverGeoJSON.length; index++) {
const feature = riverGeoJSON[index];
var within = turf.booleanWithin(feature, circleGeoJSON);
console.log({ within });
var split = turf.lineSplit(feature, circleGeoJSON);
console.log({ split });
if (within && split.features.length === 0) {
L.geoJSON(feature, {}).addTo(mymap);
} else {
L.geoJSON(split.features[0], {}).addTo(mymap);
}
}使用turfJS计算圆，以具有有效的GeoJSON特征。然后将此功能用作拆分器。
当直线完全在圆内时，within函数返回true，split函数不返回拆分特征。
当直线完全在圆之外时，拆分函数为false，拆分函数不返回拆分特征。
当直线与圆相交时，within函数将返回false，拆分要素集合中的第一个要素是圆内的要素。
在JSFiddle上完成源代码：https://jsfiddle.net/tsamaya/6sc58m7u/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63811822
复制相关文章
相似问题
腾讯云开发者
