轻量高效的拓扑图组件
zh

基于HTML5的北京地铁图示例

2017-05-10

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

阅读更多

自定义解析SVG地图

2015-09-21

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

阅读更多

韩国地图示例

2015-09-14

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

阅读更多

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

2015-03-29

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

阅读更多

Qunee for HTML5与ECharts对比

2015-02-11

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

阅读更多

Mapbox Studio 常见问题

2014-12-01

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

阅读更多

使用Leaflet创建地图拓扑图

2014-07-27

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

阅读更多

基于html5技术绘制上海地铁图 - 双车道路况信息

2014-05-13

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

阅读更多