HTML5 Canvas 或 SVG 世界地图 [关闭]

Posted 2023-03-05

技术标签:

【中文标题】HTML5 Canvas 或 SVG 世界地图 [关闭]【英文标题】：HTML5 Canvas or SVG world map [closed] 【发布时间】：2011-08-31 13:26:04 【问题描述】：

我正在为 html5 Canvas 或任何 JS 库搜索世界地图的开源实现。我需要带有风景和缩放的简单矢量世界地图。如果能在ios/android/BB OS上运行就好了。

http://cartagen.org/ 对我来说太多余了。

【问题讨论】：

Canvas 做缩放不如 SVG，因为前者是位图，后者是矢量图。矢量图像在此类动作中表现最佳。 @Jesufer 不是真的，除非画布显示的是位图图像。您使用基于矢量的绘图命令在画布上绘图，因此在发出这些命令之前缩放画布上下文将正确“缩放”绘图而不会出现像素化。有关放大和缩小画布绘图的演示，请参阅 this answer。（放大我两眼之间的十字准线。）但我考虑到每次缩放图像时，都必须使用画布重新绘制图像，因此如果图像绘制复杂，则需要加载大量javascript。 【参考方案1】：

SVG 可能更容易实现。我会研究 Raphael JS

这里是relevant example raphael JS 可以做什么以及它需要多少代码

SVG 世界地图定义可以在很多地方找到，包括 Wikipedia，它们应该不难搜索。

【讨论】：

【参考方案2】：

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

【讨论】：

【参考方案3】：

Simon 是对的，Raphael.js 是一个不错的选择。在以下位置查看他们的世界示例： http://dmitrybaranovskiy.github.io/raphael/

如果您正在寻找基于 Raphael 构建但具有缩放/位置的东西，那么商业选择是： http://simplemaps.com/world

【讨论】：

【参考方案4】：

结帐https://github.com/thomaspeklak/raphaeljs-worldmap

【讨论】：

【参考方案5】：

我找到了解决方案。 Google 地图支持自定义水和风景颜色：

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

向导：