最近又有客户提到地铁图，高速路线图的需求，本质上只是基本的线条和点，重点是要有坐标数据，我从北京地铁官网找到了路线的xml数据，于是就做了个简单的示例，以供参考 在线演示： http://map.qunee.com/beijing_subway.html 数据来源为：http://www.bjsubway.com/subwaymap/station_map.html 因为代码非常简单，只有一百来行，所以这里就不多赘述，直接访问在线示例，查看源码即可 北京地铁图-html5_代码

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

地图是Qunee图形组件的主要方向之一，发展过程中地图的实现方式比较多，比如基于SVG数据或者自定的json格式数据解析，支持geoJSON和TopoJSON格式，还能叠加leaflet地图 下面的示例是韩国地图，以首尔为中心墨卡托投影，数据格式为topoJSON，数据取自：https://github.com/southkorea/southkorea-maps 示例代码下载：southkorea-map-demo

Qunee for HTML5有许多地图的示例，包括[地铁图](http://demo.qunee.com/#Shanghai%20Metro Map 2012)，基于[SVG数据的地图](http://demo.qunee.com/#U.S.%20Presidential Election 2012)，结合leaflet的地图等，每个示例都是单独的实现，代码也各有不同，于是我们想，是否能将这些方案统一起来，实现一种地图解决方案呢？于是我们开始整合，从世界地图到国内各市县的地图，再到各种地铁图，都用HTML5技术呈现出来，而在地图之上还有我们的拓扑图，等值分析图，地铁线路分析等等，本文我们将介绍如何使用Qunee加载标准地图数据，实 …

概述 ECharts是百度公司支持的开源产品，定位于Chart，Qunee for HTML5是上海酷利软件的商业软件，定位于拓扑图，两者都是前端技术，同属于数据可视化类库，但差异也很明显，本文将从大的方面对比两者特点 ECharts Qunee for HTML5 License 开源 商业 产品定位 图表 - 饼图、柱状图、雷达图、地图等 拓扑图 - 组织图、流程图、地铁图等 典型界面 标题，图例，数据过滤等 工具栏 - 框选，缩放，搜索等 典型驱动方式 数据驱动，配置 API驱动，二次开发 js大小 echarts.js - 350kb, echarts-all.js - 921kb …

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

之前我们采用过Openlayers+Qunee的方案，实现地图拓扑图，鉴于Openlayers是一种古老项目，略显臃肿，面向更新的前端地图方案，在客户的介绍下，我们找到了leaflet - 基于HTML5的轻量地图客户端方案，结合Qunee使用，以及第三方插件，实现更加轻快的地图拓扑图应用 Leaflet介绍 leaflet是一个开源软件，作者在乌克兰，在移动设备上的有良好的体验，比较新和现代的地图客户端，类库压缩后只有33k，非常小巧，这一点让qunee都相形见绌，先看一个leaflet的入门示例 官方示例 // create a map in the "map" div, set the view to a …

前面介绍了上海地铁图的绘制，最近有客户提出了新的需求：双车道，并显示路网状态信息。经过一番研究，在原地铁图基础上做了扩展实现 交通图介绍 路况状态在GIS系统中广泛应用，谷歌地图，百度地图都有实时路况的功能，太复杂并非好事，就像地铁图，按真实经纬度呈现反而不够直观，交通图、路网也是如此，去掉无关信息，将有限的数据（路，收费站，路况）展现出来，成为一种解决方案 百度地图中的路况信息 双车道的绘制 来看具体实现，原来的地铁图是一条线表示，改用双线绘制，可表现来往的方向，canvas并没有双线线形，需要自己实现 三种连接点类型 双线的算法类似2d中的stroke算法，stroke拐点有三种方式：尖的、圆角、斜面，考虑到路网拐角不会太尖， …