HTML5画布或SVG世界地图

Question

我正在寻找HTML5画布或任何JS库的世界地图的开源实现。我需要一个简单的矢量世界地图，具有景观和缩放功能。如果它能在iOS/Android/BB OS上运行就更好了。

http://cartagen.org/对我来说太冗长了。

- Alexander Gryanko

---

Canvas不如SVG适合放大，因为前者是位图图像，而后者是矢量图像。在此类操作中，矢量图像表现最佳。 - Jesufer Vn

@Jesufer 这并不完全正确，除非画布显示的是位图图像。您可以使用基于矢量的绘图命令在画布上绘制，因此在发出这些命令之前缩放画布上下文将正确地“缩放”绘图而不会出现像素化。请参见此答案以演示缩放画布绘图的效果。（在我的眼睛中间的十字准星上缩放。） - Phrogz

但是我考虑到每次缩放图像时，都需要使用画布重新绘制图像，因此如果图像太复杂而无法绘制，则需要加载大量的JavaScript。 - Jesufer Vn

Answer 1

使用SVG可能更容易实现。我建议试用Raphael JS。

这里是一个相关示例，展示了Raphael JS的功能以及所需的代码非常简短。

可以在许多地方找到SVG世界地图定义，包括维基百科，搜索起来应该不难。

- Simon Sarris

Answer 2

jVectorMap (http://jvectormap.com/) 是一个基于 jQuery 的插件，具有内置的缩放功能和一个漂亮的世界地图示例，同时还提供了可扩展的事件 API 和自定义选项。它在所有现代浏览器中都使用 SVG，如 Firefox 3 或 4、Safari、Chrome、Opera、IE9，同时为旧版本的 IE（从 6 到 8）提供了 VML 的支持。非常易于使用。

- Ryan Rose

Answer 3

Simon说Raphael.js是个不错的选择。可以看一下他们的世界范例： http://dmitrybaranovskiy.github.io/raphael/

如果你想要在Raphael基础上构建缩放/位置的内容，商业选项是: http://simplemaps.com/world

- Chris

Answer 4

请查看 https://github.com/thomaspeklak/raphaeljs-worldmap 进行结账。

- Jonathan Gross

Answer 5

我找到了解决方案。Google Maps支持自定义水域和地貌颜色：

http://code.google.com/apis/maps/documentation/javascript/maptypes.html#StyledMaps

向导：

https://google-developers.appspot.com/maps/documentation/embed/wizard/

- Alexander Gryanko