使用HTML5缩放到国家/地区的世界地图

时间:2013-01-29 16:19:10

标签: javascript canvas map svg geocoding

我一直在关注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 个答案:

答案 0 :(得分:3)

查看D3.js World Map that Zooms into each Country on Click下的两个示例。您应该能够扩展它并构建您需要的东西。

答案 1 :(得分:0)

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

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

此示例放大各大洲,但您可以尽可能详细地了解详细信息。看一下这个来源,希望它是非常自我解释的,但如果你有查询请大声喊叫。

答案 2 :(得分:0)

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

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

它使用RaphaelJS。

答案 3 :(得分:0)

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

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