3

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

http://htmlpreview.github.com/?https://raw.github.com/escobar5/raphael-pan-zoom/master/examples/complete-map/index.html

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

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

4

4 回答 4

3

查看D3.js 世界地图下的两个示例,它们在单击时放大到每个国家/地区。你应该能够扩展它并构建你需要的东西。

于 2013-02-22T14:13:45.653 回答
0

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

http://www.fla-shop.com/products/html5/world/zoom-world-map/

它使用 RaphaelJS。

于 2013-02-14T15:16:20.110 回答
0

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

https://igr-inc.com/iGR_Global_Statistics_Services/

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

于 2013-01-29T17:09:59.610 回答
0

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

https://github.com/crittercism/critter-world-map

于 2017-07-10T19:12:08.710 回答