【发布时间】:2019-09-11 20:58:33
【问题描述】:
目标
我正在尝试构建一个应用程序,将整个世界地图分成大量的六边形。这些六边形一旦生成,将始终覆盖地图上的同一区域。然后,给定特定的地理坐标,如果这些坐标位于其边界内,则会在地图上呈现一个六边形。这些六边形需要非常小,每边大约。 50m - 这是主要问题。
第一次尝试
我的第一个想法是预先生成六边形网格,其中每个六边形都是不可见的,在确定坐标是否在边界内之后,只需更改六边形的样式。如果六边形边长非常大(数百公里),则此方法有效。然而,在我的情况下,当尝试绘制非常小的六边形时,应用程序将耗尽内存,即使是地图的一小部分也是如此。
// Attempting to cover the whole map in small hexagons
turf.hexGrid([-179.99, -89.99, 179.99, 89.99], 0.2);
第一次尝试,但有点曲折
我的第二个想法是使用mask 选项hexGrid(),这样我仍然会生成一个六边形坐标不变的六边形网格,但只会尝试在小地图区域内渲染六边形(例如可见区域在地图上)。这似乎也不可能,因为即使生成这样的网格(而不是在地图上渲染)也证明消耗太多资源。
// Attempting to cover the whole map in small hexagons only within a given area (mask)
turf.hexGrid([-179.99, -89.90, 178.99, 88.90], 30, {
mask: polygon([[[20, 60], [21, 60], [22, 62], [22, 63], [20, 60]]]),
});
然而,这会产生非常倾斜的六边形,这让我相信尝试为整个世界生成六边形网格通常是一个坏主意。
乐观计算
我最后一次尝试是在地图的左上角生成一个六边形,并使用它的坐标来计算在第一个六边形和任何给定坐标之间可以容纳多少个六边形。
这些计算几乎有效,但由于四舍五入或我计算距离的方式(手动)错误,坐标离坐标越远,定位偏离的数字越大第一个六边形。
现实生活中的例子 最接近我想要实现的例子是在名为“Run an Empire”的跑步游戏中。那里的六边形网格似乎是按需加载的,并且仅围绕一个所在的区域。从外观上看,该网格没有任何间隙会阻止六边形完美连接。
作为一个额外的兴趣点,在世界地图上绘制六边形会使它们向北倾斜。在上述游戏中似乎没有发生这种情况(下面的屏幕截图)。这是否意味着六边形尺寸是硬编码的,也许它们是在不同的地图投影上绘制的,其中不会发生倾斜?
主要问题
给定 GPS 位置等地理坐标,如何可靠地生成六边形网格,以便在基于另一组坐标生成另一个六边形网格时,这两个网格会完美重叠?我愿意用任何工具解决这个问题,不一定是 Turf 或 Mapbox。
【问题讨论】:
-
您使用哪种坐标系?六边形层可以是矢量图层,根据需要动态加载(例如使用 GeoJSON)?过去我使用过 GeoServer、OpenLayer 和其他工具,包括 ESRI 和 QMAP 等离线桌面应用程序。出于您的目的,您可以尝试使用 geoserver,将矢量数据保存在 geodb 或文件中,然后根据您选择的点根据请求将背景地图与矢量网格化。
-
另一个选项是获取您选择的坐标,向地理数据库发送 ajax 请求,进行空间查询并返回与您的点(或区域)相交的 exagon,然后使用缓冲区,您例如,甚至可以添加 100m 范围并获得该区域的所有 exagons。为获得最佳精度,背景地图(通常为 WGS84 (EPSG:4326))和预生成网格之间的坐标系应相同。这是因为用 2 个不同的坐标系对 2 层进行网格划分总是会引入误差范围,并且给定 5m 的大小,很容易注意到不匹配。
-
@Norcino AFAIK Mapbox(绘制地图)和 Turf(绘制六边形)都使用 WGS84。六边形是矢量,只有在可见地图区域内才会绘制。它们可以异步加载。我肯定会检查 GeoServer,尽管我真的希望可以通过计算坐标来实现这一点。您会推荐任何资源来阅读以按照您描述的方式设置地理服务器吗?
-
GeoServer 文档非常好 (docs.geoserver.org/latest/en/user/gettingstarted/…),我正要向您指出 OpenGeo Suite 但已重命名并且可能已更改,很遗憾所有链接似乎都已损坏,请检查此:github.com/boundlessgeo/suite 和这个opengeo-suite.software.informer.com/download。在虚拟机或沙盒中使用安装程序,我不知道那个网站。
-
谢谢!您要提交答案以便我接受吗?否则赏金会在 15 分钟后结束,而且会浪费掉
标签: maps mapbox map-projections hexagonal-tiles turfjs