如何在浏览器中索引geojson数据以存储在indexDB中（使用geojson-vt）

Question

概述

我有一个非常有趣的要求，我需要从服务（不是矢量切片服务）中加载geojson数据，然后将该数据缓存以供脱机使用（使用indexDB）。因此，当离线运行应用程序时，我需要将数据从indexDB加载到地图中（使用mapbox-gl）。可以离线缓存（在indexDB中）的数据量可能非常大，因此我不能将所有数据都带入内存并将其添加到地图中（在这种情况下，mapbox可以使用geojson-vt在内部为我们处理所有操作）。

我意识到，如果源是矢量平铺服务，这将使事情变得更容易，但不幸的是，目前这不是一个选择。

尝试的解决方案

我相信解决此问题的方法是在将数据存储在indexDB中时对数据进行索引。我的想法是，我将找出每个“特征”的每个UTM网格值，这样，当地图移动时，我可以简单地查询相应网格中的特征并将它们加载到mapbox中。

示例IndexDB“表”：

feature_id |属性| utm_tiles（{z} _ {x} _ {y}）1 ... 14_0_0、13_1_1、13_1_2等2 ... 14_0_0、12_100_100、12_100_101等等等...

具有上面的信息，然后我可以查询从index_db_features中选择*，其中utm_tiles位于（'14_0_0'，'14_0_1'）

虽然从理论上看来这是可行的，但我遇到的问题是找出给定特征接触的所有图块。 geojson-vt库似乎可以满足我的要求，只是它没有为您提供在其中找到特征的所有图块的实际列表-它的功能相反，您需要向其要求基于特征的特征给定图块。

有人对找出给定功能的所有图块有什么建议吗？还是对在indexDB中使用的空间对geojson数据进行索引的更好建议？

Answer 1

这是我当前解决此问题的方法：

1. 将具有location，location.lat字段的location.lon对象添加到每个geojson要素的properties（我正在使用要素的中心）。>>
2. 在location.lon和location.lng的IndexDB中创建复合索引（我正在使用dexie.js）>
3. 查询IndexDB数据库以查找可见屏幕内的所有功能（或在需要时添加填充）

基本上：

// Create DB:
let db = new Dexie("features");
db.version(1).stores({
    pois: "properties.id,[properties.location.lat+properties.location.lon]"
});
// Adding:
db.table("pois").bulkPut(someGeojsonFeaturesArray);
// Getting:
function getFeatures(northEast, southWest): Promise<GeoJSON.Feature[]> {
        return db.table("pois")
            .where("[properties.location.lat+properties.location.lon]")
            .between([southWest.lat, southWest.lon], [northEast.lat, northEast.lon])
            .toArray();
    }

这有效且可扩展，但我认为切片数据应能更快地工作。随时向此Github问题添加您的评论：https://github.com/IsraelHikingMap/Site/issues/1169

在此处查看实现：https://github.com/IsraelHikingMap/Site/blob/e31e4e73107897c9e069f1426ca9d56f13cf7bff/IsraelHiking.Web/sources/application/services/database.service.ts#L30