创建数据显示地图

时间:2012-03-06 00:33:57

标签: html5 graphics vector map svg

如何创造类似“选举地图”的东西。即,该国家的地图被划分成区域,然后基于支持数据转换一种颜色或另一种颜色(如果点击该区域则理想地可以看到该颜色)。 我希望用户添加数据然后他们的邮政编码区域变成一种颜色或另一种颜色,具体取决于用户添加的内容。 我假设矢量图形是这里的方式:我还没有用html5做任何事情,所以调查很好,我真的不想进入flash。我被告知尝试以某种方式修改谷歌地图,但是...这似乎并不适合它,它感觉就像一个警察。 有什么建议吗?

P.S:为了让事情变得更加复杂......无论如何要做到这一点,以便可以打开或关闭项目(例如选举地图示例,城市的位置)。 我所能想到的只是一个单独的svg,它覆盖了地图,但可能会因缩放而无法预测。

3 个答案:

答案 0 :(得分:2)

我的第一条建议是不要重新发明轮子。有许多有用的库和基础设施选项,其中许多是免费的(如啤酒和语音)。

客户端处理有很多选项。对于Javascript客户端,您可以使用:

其中我个人会推荐OpenLayers作为最通用和真正开放的客户端框架。

GIS.StackExchange上的这个问题详细介绍了该领域的竞争者。

您还必须拥有一些您想要符号化的地图几何/地理的提供者。这项任务有很多选项,您可以使用某种WMS(Web地图服务),其选项为many and varied,或者您可以提供某种空间格式的文件,如GML,KML或GeoJson 。由于易于使用和减少有效载荷,GeoJson似乎获得了很大的牵引力。

您可能想要考虑从后端spatial database提供此服务。如果你想走这个方向,我发现PostGIS + GeoServer是一个非常好的起点,但有很多选择和组合。好的是这个领域有完善的标准。

最后查看部分examples of what you could内容。

答案 1 :(得分:0)

HTML5画布被认为不适用于地图,因为它只是一个像素排列,不能对输入作出反应 矢量图形应该用于这种类型的应用程序。 您需要的事件处理程序可能是鼠标进入,鼠标离开并单击用户感兴趣的区域。 作为一种做法,请访问我的网站上的转换器

http://irunmywebsite.com/raphael/SVGTOHTML_LIVE.php

在Inkscape中创建一个小地图并另存为SVG文件并将其上传到上述网址

查看js窗口中的输出。

这可能会对你有所帮助。如果卡住留言...... C

答案 2 :(得分:0)

您需要的只是一个Web地图包 - 例如OpenLayers - 然后您只需编写javascript来驱动它。你可以改变功能的颜色,你可以打开或关闭它们,你可以做各种覆盖,弹出窗口等等。它只是Javascript。

跳到www.openlayers.org,看看它能做些什么。