将巨大图像加载到D3地图背景中的高效方法

Question

这个问题涉及前一个问题：Loading a huge image (5mb) into svg background leads to pixelation and performance issues

图片 ~5 MB 大， 20000 x 11596 像素。

在这里，我想知道哪些替代方案可以将巨大的PNG图像加载到背景中。我已经尝试了几件事。也许我以错误的方式使用它们，但最后我在D3.js的缩放对象中以某种方式需要这个图像。这是我认为最困难的部分。将图像加载到整个背景中确实非常简单。但让它变焦和拖动更难。正如您从上面的链接中看到的那样，我已经管理过了，但性能很糟糕。

所以目前我有一个带有svg背景的“有时”运行方法。但正如您可以在上面的链接上看到并访问该网站，它现在无法正常工作。但我相信这是因为图像分辨率/尺寸太高。几天前，它使用相同的代码，非常奇怪。所以svg背景不是解决方案。我已经测试了其他一些事情：

• 将图片加载到svg对象中的 img 环境中 - 没有显示任何内容，我认为原因是因为在svg中你可以使用图像或的xlink：HREF
• 使用画布加载html5，显示图片但缩放时不会更改
• 使用 CSS 加载图片，在svg环境中无法正常工作

所以没有任何帮助或按预期工作。正如我所说，我有一些特殊的要求：

• 图片大约5 MB
• 图像只是地图的另一种表现形式，因此只需点击底部的按钮即可加载
• 最后每张地图有3张图片不同，所以需要在运行时更改它
• 图像应通过通常的d3事件/鼠标交互来调整大小和拖动
• 带有图像的地图应具有良好的性能，如基于矢量的

所以我现在的问题是：

• 哪种解决方案最适合我的情况
• 如何使用缩放事件
• 或者如何改进当前解决方案与svg背景

我也可以使用平铺图像。但我不想放大步伐。我真的希望有一张地图，如果可能的话，不需要重新加载图片。

谢谢。

在这里显示的图像：http://arda-maps.org/ages/pics/map/ages/firsthigh.png（需要一些时间才能加载......）

Answer 1

与Loading a huge image (5mb) into svg background leads to pixelation and performance issues一样，没有看到解决方案。只需缩小尺寸即可在Firefox和Chrome中使用。