自定义解析SVG地图

发表于 & 归档在 地图.

制图行业,地图的美观是重要的指标,不是GIS系统直接配色设置格式就可以出图的,往往还需要细节调整,甚至出版社更多时候用的是corel draw这样的图形格式,完全没有传统地图坐标的概念,同样的SVG作为一种标准矢量图形格式,也是地图最常见的输出格式,Qunee示例中就有将SVG地图转换成Qunee地图的例子,但由于SVG是一种非常复杂的图形格式,将SVG百分百还原成基于Canvas技术的Qunee目前还没有通用的解决办法,通常都需要定制解析,下面是一张韩国地图的例子,自己解析SVG的path元素,转换成Qunee的Path对象,最终得到与SVG原图一样的效果,可作为参考

韩国地图-qunee

韩国地图示例

发表于 & 归档在 HTML5, 地图.

地图是Qunee图形组件的主要方向之一,发展过程中地图的实现方式比较多,比如基于SVG数据或者自定的json格式数据解析,支持geoJSON和TopoJSON格式,还能叠加leaflet地图

下面的示例是韩国地图,以首尔为中心墨卡托投影,数据格式为topoJSON,数据取自:https://github.com/southkorea/southkorea-maps

屏幕快照 2015-09-14 下午5.42.30

使用Qunee组件制作在线地图 – 加载GeoJSON/TopoJSON数据

发表于 & 归档在 HTML5, Map, 地图, 拓扑图.

Qunee for HTML5有许多地图的示例,包括地铁图,基于SVG数据的地图,结合leaflet的地图等,每个示例都是单独的实现,代码也各有不同,于是我们想,是否能将这些方案统一起来,实现一种地图解决方案呢?于是我们开始整合,从世界地图到国内各市县的地图,再到各种地铁图,都用HTML5技术呈现出来,而在地图之上还有我们的拓扑图,等值分析图,地铁线路分析等等,本文我们将介绍如何使用Qunee加载标准地图数据,实现从世界地图到国内省市地图的呈现
世界地图 by qunee

Qunee for HTML5与ECharts对比

发表于 & 归档在 HTML5, JavaScript, Web, 地图, 拓扑图.

ECharts是百度公司支持的开源产品,定位于Chart,Qunee for HTML5是上海酷利软件的商业软件,定位于拓扑图,两者都是前端技术,同属于数据可视化类库,但差异也很明显,本文将从大的方面对比两者特点

  • ECharts:图表 – 折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图
  • Qunee for HTML5:拓扑图 – 拓扑图 – 社交网络图、网络管理图;地图 – 地铁图、统计地图;其他 – 组织图、思维导图、流程图

echarts vs qunee for html5

Mapbox Studio 常见问题

发表于 & 归档在 地图, 翻译.

之前借助leaflet + qunee实现了地图拓扑图,同样使用leaflet的有个更专业的地图应用:Mapbox,可以定制出简单、专业、漂亮的地图,在传统地图服务商(Google,Nokia, Apple …)之外,有了更好的选择,Mapbox Studio是一款开源软件,使用了大量的web技术:Mapnik, node.js, backbone.js, leaflet, codemirror …… 其客户端本身就是一个webapp + Chrome,跨平台,有良好的交互体验,值得前端开发者学习和参考

mapbox studio中用到的web技术:Mapnik, node.js, backbone.js, leaflet, codemirror

使用Leaflet创建地图拓扑图

发表于 & 归档在 HTML5, JavaScript, 地图, 拓扑图.

之前我们采用过Openlayers+Qunee的方案,实现地图拓扑图,鉴于Openlayers是一种古老项目,略显臃肿,面向更新的前端地图方案,在客户的介绍下,我们找到了leaflet – 基于HTML5的轻量地图客户端方案,结合Qunee使用,以及第三方插件,实现更加轻快的地图拓扑图应用

leaflet + qunee