d3.js - 使用 PostGIS 和 D3 绘制水深图

Question

我正在开发一个应用程序，我想在滑动 map 上呈现不同水体的测深可视化。本质上，这些是基于插值 DEM 数据的地理包含地形可视化。我追求的结果是:

我编写了代码来根据深度样本插值 DEM，并进行了概念验证，我将这些代码存储在 PostGIS 中的非平铺栅格中(每个水体一个栅格)，效果相当好。

但我确实相信，我将不得不用某种基于图 block 的解决方案替换这个概念，因为水体几乎可以是任意大小，并且视觉方面可能应该根据缩放级别等进行调整。

如果这就是全部，我可能只会模仿在不同地方描述的常规高程栅格生成概念，通常基于 Mapnik。然而，这就是乐趣的开始..

理想情况下，我不想呈现栅格数据，而是呈现矢量(或者可能是两者的组合)。我希望我的 map 比栅格数据通常更具交互性(除非栅格数据被分解并使用例如 D3 进行分析 - 稍后会详细介绍)。我希望能够根据用户交互动态更改等距(轮廓线的距离和值)。

我希望得到一些关于如何安排这个堆栈的聪明的意见。我想表达的一些想法:

<强>1。仅光栅图 block 高程 DEM 栅格是根据经典 256x256 墨卡托概念生成的。这些由客户端浏览器动态下载，并按原样显示，或使用 canvas/D3 进行颜色映射。除此之外，我使用 Canvas API 通过 D3 提取矢量轮廓。这将是一个相当干净的解决方案，但我怀疑它会很慢(图像检查部分)。

<强>2。光栅图 block 与矢量图 block 相结合 高程 DEM 栅格仍然会生成，因为它们是表示和存储插值数据的好方法。栅格图 block 仍可能构成 map 上的图形叠加层，但本质上，高程等值线由单独获取的矢量图 block 组成(基于 GeoJSON 或 TopoJSON)。这些图 block 是根据光栅规则生成的。

由于我希望能够动态更改等距，因此我必须能够统一和组合向量，例如使用 D3。我查看了 d3.geom.contour 插件，但它似乎有点有限，例如似乎不可能有局部峰值，而是类似金字塔的拓扑。

最后但并非最不重要的一点是，为了美观，我想执行轻客户端线插值(或类似的操作)。 IE。测深图的分辨率可能较低(因为更高分辨率实际上没有值(value))，但在这种分辨率下，轮廓通常会变得笨拙。也许这是 TopoJSON 的一个论据以及简化的可能性？这是我用 D3 制作的示例(使用服务器端生成的非图 block GeoJSON):

欢迎任何建议!

Answer 1

做到这一点的最佳方法很大程度上取决于您最终想要拥有多少灵 active 。这是一个至少可以给您一定程度的灵 active 的建议。

在初始屏幕中，显示“合理的默认值”，即看起来不错并且不需要加载太多数据的东西。我已经做了一些类似的事情here ，尽管如果我今天再次这样做，我可能会使用 TopoJSON。

然后，对于每个用户交互，根据需要加载新数据。基本上有两种类型。

• 用户缩放/平移，您想要显示更多细节。如果您使用矢量，分辨率应该不是问题，但您可能想要执行诸如显示中间轮廓线之类的操作。为此，您只需从 JSON 加载附加轮廓线即可。
• 用户选择不同的高度间隔/等。同样，您只需加载新数据即可。这意味着您不允许任意更改这些内容，而只能具有预先计算数据的一定数量的离散级别。使浏览器和编程变得更加容易。

为了使其与矢量一起工作，您可能必须简化初始加载的几何图形 - 同样，您可以在用户放大时动态加载更详细的路径。

如果我理解你想要正确执行的操作，我不会推荐光栅图 block 。它们基本上没有为您提供任何灵 active ，也不是必需的。数据量(除非您想显示非常大的区域)应该是可管理的，特别是如果您只根据需要加载更详细的数据。