Question

我有一个线性数据的geoJSON，可以在地图上正确显示。我想做的是使用leaflet.pm或leaflet.draw，它允许您在地图上绘制一个矩形。当我在地图上绘制矩形时，我希望它显示矩形内的geoJSON数据。关于如何执行此操作的任何示例？

以下是geoJSON的示例：

{
"type": "FeatureCollection",
"name": "RoadSearch",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "Year": 1984.0,  "Day": "Tuesday",   "Route": 79.0,  "Project": "One" }, "geometry": { "type": "LineString", "coordinates": [ [ -82.08976, 40.28849 ], [ -82.08974, 40.28856 ], [ -82.08971, 40.28863 ] ] } },
{ "type": "Feature", "properties": { "Year": 1993.0,  "Day": "Wednesday",  "Route": 715, "Project": "Two" }, "geometry": { "type": "LineString", "coordinates": [ [ -82.15866, 40.36663 ], [ -82.15803, 40.36628 ], [ -82.15757, 40.366 ], [ -82.15682, 40.36547 ], [ -82.15653, 40.36525 ] ] } }
]
}

Answer 1

只需将FeatureCollection添加到geoJSON层。

L.geoJSON(geojsonFeature).addTo(map);

您需要过滤掉某些geoJSON功能：

var myFeatureCollection = {
"type": "FeatureCollection",
"name": "RoadSearch",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
  { "type": "Feature", "properties": { "Year": 1984.0,  "Day": "Happy",   "Route": 79.0,  "Project": "One" }, "geometry": { "type": "LineString", "coordinates": [ [ 0,1 ], [ 10,2 ] ] } },
  { "type": "Feature", "properties": { "Year": 1984.0,  "Day": "Day",   "Route": 79.0,  "Project": "One" }, "geometry": { "type": "LineString", "coordinates": [ [ 1,1  ], [ 2, 2 ], [ 10,10 ] ] } },
  { "type": "Feature", "properties": { "Year": 1984.0,  "Day": "Sunday",   "Route": 79.0,  "Project": "One" }, "geometry": { "type": "LineString", "coordinates": [ [ 2,3  ], [ 2, 20 ], [ -1,10 ] ] } }
};

我创建了一个简单的isInBox函数，如果给定坐标在相应的框中（如果使用此处的左上角和右下角，则可能需要对其进行调整），该函数将返回true。

function isInBox(topLeftCornerLat, topRightCornerLng, bottomRightCornerLat, bottomRightCornerLng, coordinates)
{
    // border not included.
    return function(coordinates) {
         return coordinates[0] > topLeftCornerLat && coordinates[0] < bottomRightCornerLat && coordinates[1] > bottomRightCornerLng && coordinates[1] < topRightCornerLng;
    }
}

这里我正在使用isInBox函数来过滤框{[1,5]，[6,1]}中的元素

var filteredGeometries = myFeatureCollection.features.filter(f => f.geometry.coordinates.some(isInBox(1,5,6,1)));

// before
console.dir(myFeatureCollection);

myFeatureCollection.features = filteredGeometries;

// after
console.dir(myFeatureCollection);

请参阅文档：https://leafletjs.com/reference-1.3.0.html#geojson

传单，如何从矩形框返回geoJSON数据

1 个答案: