发表自： sam

自定义解析SVG地图

发表于 由 & 归档在 地图.

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

韩国地图-qunee

SVG to Canvas在线转换工具

发表于 由 & 归档在 HTML5, JavaScript.

HTML5中有两种图形解决方案：SVG和Canvas，两者都有各自特点，这里不多说，Qunee图形组件中我们常常使用SVG作为节点图标，这在大部分场景下都表现良好，但是IE下有些小问题，IE下可以将SVG图片绘制到Canvas上，但是无法读取SVG的像素信息，这意味着一些特殊功能（追踪图片边缘，图片染色等）无法被实现，这时候我们考虑选择将SVG解析，转换成Canvas的绘制代码，这样就可以使用Canvas来绘制SVG图片了

项目代码：https://github.com/samsha/svg2canvas

SVG to HTML5 Canvas
在线地址：http://demo.qunee.com/svg2canvas/

使用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

拓扑图编辑器（3）- Graph.Editor项目

发表于 由 & 归档在 HTML5, JavaScript, Web, 拓扑图, 编辑器.

继续拓扑图编辑器的开发，并创建了项目Graph.Editor，正式发布到github了，项目使用了nodejs，bower，gulp等HTML5项目开发工具，bower用于前端包管理，Gulp用于自动发包和发布，欢迎Qunee客户使用和贡献代码

相关文章：

项目地址：https://github.com/samsha/graph.editor

在线演示：http://demo.qunee.com/editor/

拓扑图编辑器截图1