【问题标题】:D3 avoid projecting data that extends beyond the frameD3 避免投影超出框架的数据
【发布时间】:2021-07-10 12:49:34
【问题描述】:

我正在处理一个涉及大型可缩放地图的 D3 项目。一切看起来都不错,工作正常,只是当我缩放和平移视图时可能会有点滞后。

我想知道 D3 是否有办法让我避免投影超出框架的地图数据。如果可能的话,我想在不牺牲细节的情况下提高性能。任何提示或提示将不胜感激!

【问题讨论】:

  • 我想你使用进入/退出模式。你呢?
  • @MichaelRovinsky 是的,没错。
  • 这是一个使用坐标过滤器渲染 50K 对象的示例:jsfiddle.net/mrovinsky/q3fjemop 看看第 108-123 行。如果您需要进一步的帮助,请告诉我
  • @MichaelRovinsky 好吧,我想我明白了它的要点.. 将这个例子从简单的圆圈适应国家多边形数据需要一些时间,但我可以做到.. 基本上只是计算如果元素落在框架内。如果不在,则将其从画布中移除。

标签: javascript d3.js map-projections


【解决方案1】:

这里有几个选项。我将把这个问题广泛地视为使用 d3 优化显示大量地理数据的方法。

projection.clipExtent(extent)

此方法采用一个数组来标记所绘制要素的左上角和右下角(在投影/像素坐标空间中)。要素被裁剪到指定范围。每个点仍然通过投影,但您不必绘制它们或沿边缘进行大圆采样。严格来说,这与问题所要求的很接近。

projection.clipAngle(角度)

上述方法适用于投影空间,而此方法适用于非投影空间。此方法采用一个表示角度(以度为单位)的值,并根据该角度和投影的旋转中心裁剪特征。根据您的投影,旋转可能是平移和居中地图的合适方法。您必须计算给定缩放级别和居中的最大剪辑角度,然后在投影到剪辑角度指定的小圆圈之前剪辑地图。这通过避免在裁剪之前需要投影点来改进上述内容,但是由于小圆圈很少符合视口,因此会绘制一些超出所需范围的特征(尽管少得多)。以上可以与这种方法结合使用。

可以制作自定义预剪裁功能以获得更好的结果。这对于圆柱投影来说比其他投影更容易,以便在投影之前将特征裁剪到指定的框,从而提高效率。

其他选项

  • 矢量图块

矢量瓦片可从许多来源获得 - 尽管我并不特别关心 d3-瓦片(我一直在研究替代方案,但一直忙于真正专注于它)。您仍然需要在每次缩放时加载切片,每次平移时加载一些切片,但此选项可为您提供最大范围的细节和适当的数据分辨率。

  • 边界框

上述方法的替代方法是在每个多边形上存储边界框信息(不要即时执行)。绘制地图时,过滤与视口有任何重叠的多边形将启用仅相关要素的选择性渲染。根据投影和缩放机制,这可以在投影或非投影坐标空间中完成。

这可以通过以两个或更多比例加载要素来补充:缩小所有要素的绘制与可见性无关,但在缩小时以适当的分辨率绘制。放大超过一定深度时,使用更详细的特征,但基于边界框进行过滤。

  • 帆布

我在这里包含这个只是因为 SVG 有时可能是关键点,这取决于绘制的特征的数量和类型。切换到 Canvas可能会有所改进。

  • 投影类型

投影类型确实会影响速度,等角投影快,一些方位投影慢。虽然我只在任何detail 中测试过projection.invert(),但投影类型是一个因素。

预投影几何是最快的,它完全绕过了投影:特征坐标空间以像素为单位。有关该主题的更多信息,请参阅here

结合边界框方法和/或根据当前范围进行裁剪的函数,这可能是一种非常快速的方法。

  • 缩放事件

我根据您的问题的文本添加了这一点:投影功能应该与放大或不放大相同的时间。绘图可能是可变的,但投影以任何一种方式运行。这表明您可能正在使用.on("zoom" 事件。这不是很有效:平移事件的每个刻度都需要重新绘制,换句话说,单个平移可以触发许多缩放事件。这意味着您需要在平移期间几乎不断地投影特征。

一个简单的解决方案是使用.on("end" 事件作为重绘地图的事件。这样我们每次缩放只重绘一次地图。

但是,您可能会变得更复杂。如果您希望地图在整个平移事件中跟随鼠标,您可以使用变换来平移地图,避免投影任何内容,然后在缩放结束时重新投影地图并移除变换。这几乎肯定需要重新考虑您的缩放功能。在确定缩放比例不变时是否发生平移以避免重绘集群之前,我采取了一些类似的方法 (example)。

【讨论】:

  • 哇,太好了,非常感谢!添加projection.clipExtent(extent)projection.clipAngle(angle) 立即提高性能!我还将尝试使用边界框的想法。
  • 我还发现您关于剪裁投影的其他帖子非常有用! stackoverflow.com/a/65564957/1544937
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-08-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-08-14
  • 1970-01-01
相关资源
最近更新 更多