将传单功能隐藏在指定区域之外

Question

我试图隐藏一些传单功能以外的定义区域。

我有一张传单地图，显示河流作为河流层的特征，还有一个圆圈，用于在地图的当前中心周围绘制一个区域。

在我的数据库中，每条河流被分成多个部分，我只检索与当前圆形区域相交的部分。

计算每个有关部分的交点以调整坐标将是一个解决方案，但是一个复杂的问题。

事实上，我更愿意简单地在客户端隐藏这些溢出，但我找不到解决方案。

传单有可能做这样的事情吗？

谢谢你的时间

Answer 1

我在一个简单的基本HTML和普通JS上做了这个示例。我在“river”上添加了另一个linestring来模拟圈外的river

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 &copy; <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特性。然后将此特性用作拆分器。

当line完全在圆内时，inne函数返回true，split函数不返回split特性。

JSFiddle的完整源代码:https://jsfiddle.net/tsamaya/6sc58m7u/