javascript - 使用 HTML5 放大到国家的世界地图

Question

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

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

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

score 3 · Accepted Answer

score 0 · Accepted Answer

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

它使用 RaphaelJS。

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

4 回答 4