使用 HTML5 放大到国家的世界地图答案

【问题标题】：World map that zooms into country using HTML5使用 HTML5 放大到国家的世界地图
【发布时间】：2013-01-13 06:49:05
【问题描述】：

我一直在研究 RaphaelJS、D3 和其他“映射”工具（jvectormap 等），但我找不到任何可以通过鼠标单击放大到一个国家的世界地图示例。我想首先看到一张世界地图，然后，当你点击一个国家时，它会放大并只显示那个国家（世界没有显示，你可以随时缩小到世界）。这是一个不好的例子：

您能否举个例子，最好是在 D3、protovis、Raphael 或其他流行的 SVG/CANVAS 类型库中。我将向这些地图添加大量数据点（基于地理坐标）。

最接近我需要的示例是http://theartofasking.com 上的 d3 地图，但我正在寻找更多示例。

【问题讨论】：

【解决方案1】：

这张地图可以用 d3 做你想做的事，放大每个国家并将每个国家分成一级行政区（县/州等）。对于拥有庞大州的美国来说，它更进一步，将每个州划分为县。

【讨论】：

【解决方案2】：

查看D3.js World Map that Zooms into each Country on Click 下的两个示例。您应该能够对此进行扩展并构建您需要的内容。

【讨论】：

【解决方案3】：

您可以查看另一个带有放大/缩小功能的 JavaScript 地图示例

它使用 RaphaelJS。

【讨论】：

【解决方案4】：

不久前，我使用 SVG 和 jQuery 构建了类似的东西。我正在为整个地图的宽度和高度设置动画并移动它的位置以伪造缩放效果。它可以完成这项工作，适用于所有浏览器，并且不依赖于学习新的库。

此示例放大了各大洲，但您可以了解尽可能多的细节。看看源代码，希望它是不言自明的，但如果你有疑问，请大声喊叫。

【讨论】：

感谢您的链接。我看到你做了什么，但它不适合我的用例。由于数据点（而不是放大世界视图），我需要将各个国家与世界分开加载。考虑在世界地图上绘制所有城市，它看起来不太好并且加载缓慢。但是，我可以在世界地图上只显示首都，当有人点击一个国家时，我可以加载该国家的所有城市。
不用担心。您没有理由不能单独加载每个国家/地区。处理大量 SVG 数据时很困难，因为加载时间会很慢。如果您的地图不需要太多细节，那么您可以只使用 png 的。如果您只使用 1 种颜色，文件大小会很小！