Javascript D3实现：D3地图后面的自定义拓扑图

我需要显示具有拓扑/阴影地形背景的D3地图。需要实现所有用户功能（例如缩放和平移）

到目前为止，我已经在一个具有拓扑结构的PNG上分层了地图。然后我对投影做了一些修改，将PNG边框与地图边框对齐。然后，我允许用户缩放PNG（例如：）。结果其实很好。当我平移和缩放时，地图会随着PNG一起移动，这非常棒（下图）：

问题是PNG非常重（20MB），并且整个结果体验严重缺陷，无法使用。结果显然是使用低分辨率的图像，但是当用户放大时，拓扑看起来很糟糕。我试着把PNG转换成JPG。。。事实上更糟

实现D3目标的最佳解决方案是什么？初步想法如下：

（1） d3.geo.tile插件（）。这里的困难在于，我需要从PNG图像创建自己的平铺。这条路有前途吗？我能在上面放一张D3地图吗？我找不到自定义瓷砖的示例

（2） 我已经看到OpenSeaDragon和D3（）的成功实现。这里的问题是，我不确定是否能够实现所需的D3功能（缩放、平移、变换），从而使D3贴图和基础图像同时移动

---

（3） 还有其他想法吗？

要将图像转换为平铺，您需要有一个地理参考图像，或者自己能够对图像进行地理参考。因为我相信您正在使用自然地球数据集创建此图像，所以您可以使用源tif文件并处理此图像。我通常对我的瓷砖使用tile mill（使用一些python），这相当简单。您将无法将png原样用于平铺

但是，如果要查找山体阴影或某种高程/地形纹理指示，则不需要在平铺集处创建。以传单为例，您可以找到相当多的瓷砖供应商，ESRI.WorldShadedRelieve看起来很合适。这是一个将其拉入d3的演示，其中带有一个绘制在桌面上的topojson特性：

var pi=Math.pi，
tau=2*pi；
var宽度=960；
高度=500；
//初始化投影以使世界适合以原点为中心的1×1正方形。
var projection=d3.geoMercator（）
.刻度（1/tau）
.翻译（[0,0]）；
var path=d3.geoPath（）
.投影（投影）；
var tile=d3.tile（）
.尺寸（[宽度、高度]）；
var zoom=d3.zoom（）
.scaleExtent（[1您当然可以使用OpenSeadragon进行此操作。您希望将图像转换为平铺；您不需要专门的服务器…您可以使用许多独立脚本：


一旦你有了它，OpenSeadragon将为你处理缩放和平移

要覆盖SVG以使其与缩放和平移匹配，请使用SVG覆盖插件：


它与D3生成的SVG配合使用效果很好

需要注意的一点是OpenSeadragon没有任何特定于地理位置的功能，因此您将以图像像素而不是纬度/经度来定位覆盖

顺便说一句，OpenSeadragon还可以处理非平铺图像，所以如果你想在平铺图像之前对其进行测试，那没问题。你只需要在制作之前平铺图像，这样就不会向用户发送20mb的数据。
我不是传单用户，但为什么不使用D3+传单呢？你好，杰拉尔多。这个实现是核心组件复杂！我不需要设置一个平铺服务器等吗？我不知道。正如我所说，我不是一个传单用户。不用担心。顺便说一句，这个实现很漂亮。感谢您向我展示这一点。传单当然可以更好地处理平铺服务，但这些服务应该与d3平铺一起使用，提供了一些平铺层的极好概述s可用。感谢Andrew-d3.geo.tiles是答案。我想我不得不放弃创建自定义瓷砖的想法。这个解决方案的问题是，除非瓷砖被缓存，否则任何时候都需要在互联网上创建。是的，这是一个缺点。如果使用来自自然地球的原始数据，如果陛下，我可以在一个新的回答中完成这些步骤。安德鲁，这将是一个好主意。我没有立即实施的需要，但我渴望了解这一点，这肯定会对社区有所帮助。我还在编写上述脚本，并在以下位置提出了一个新问题：