HiMap

系统演示

在线地址:http://www.higis.org/wp-content/uploads/himap/himap.html

系统截图

项目说明

HiMap主要是基于HTML5+javascript+css3实现的一个简单GIS平台,用于离线或小数据量的在线地图展示。 数据层:离线提供geojson,或者通过postgis存储矢量文件,然后通过访问服务器实时获取对应当前范围的地物并生成geojson文件返回到客户端。 逻辑层:完全由原生javascript实现,包括地图投影,地图矢量动态绘制,geojson解析,标绘等。 展现层:UI基于HTML5+css3.地图的绘制基于canvas实现,标绘等使用css3. HTML5绘制优点:http://www.higis.org/2012/04/27/html5-canvas-improve-gis/

开发日志

  • 2012-06-02: 实现地图的放大、缩小、平移、拉框放大、拉框缩小、全局显示。
  • 2012-06-05: 实现地图的投影及geojson的绘制、比例尺的计算、Zoom等级计算、当前经纬度显示。
  • 2012-06-20: 实现点、线、面的绘制,及专题图的设置。修复拉框放大bug。测试使用北京地铁数据进行绘制。下一步进行文本的标绘及相关动态效果的实现。
  • 2012-06-26:完善地图显示标绘tip,使用css3动态效果显示提示,支持专题图的相关展示。实现文本的标绘,标绘避让需要完善。压缩javascript发布。
  • 2012-06-28:chrome.13+版本测试正常,firefox测试,站点提示显示不正常,ipod touch4测试没有显示地图,需再调试。

 

HiMap:目前有2 条留言

  1. 沙发
    jiyee:

    Canvas绘制方式地图拖动还是有明显的延时; 交互性如何才能提高?

    2012-07-02 %I:%M%p [回复]
    • H.J:

      考虑通过imagedata进行绘制,在大数据量时的效率应该要高很多。var imgdata = ctx.getImageData(0, 0, width, height),
      data = imgdata.data;

      2012-07-02 %I:%M%p [回复]

发表评论

快捷键:Ctrl+Enter