从geoJSON获取地图视口中的要素

Question

我需要在地图上为我拥有的数据添加标记.

在思考过程中,我经历map.data.loadGeoJson('google.json');了将能够将自定义数据附加到地图上的过程.现在,需要显示地图视口中存在的要素的属性.我无法遍历所有项目并检查.contains(),我有一个巨大的数据.是否有默认的谷歌方式来获取地图视口中存在的功能的属性？

Answer 1

我喜欢使用TurfJS来完成此类任务。我已经用 1M 点对其进行了测试，它的运行速度比人们预期的要快。

伪代码

1. 加载一次 GeoJSON 并将其初始化为草皮特征集合
2. 将地图视口的边界转换为 GeoJSON 多边形
3. 运行该pointsWithinPolygon函数
4. 使用以下方法将生成的要素集合传递到地图数据层上addGeoJson
5. 在节流 bounds_changed事件中冲洗并重复

实际代码

/*
 You'd load your own geojson like so:
 const points = turf.featureCollection(geojsonObject.features)
*/

// random 1M points as a demo
const points = turf.randomPoint(1e6, {
    bbox: [-180, -90, 180, 90]
});

const {
    west,
    south,
    east,
    north
} = map.getBounds().toJSON();

// extent in minX, minY, maxX, maxY order
const viewport_as_polygon = turf.bboxPolygon([west, south, east, north])


const points_within = turf.pointsWithinPolygon(points, viewport_as_polygon)

注意：由于在您调用 之前，这些都不会与 DOM 交互addGeoJSON，因此它会比为每个功能生成标记然后隐藏/修改视口之外的功能的透明度更快。