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

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

上海地铁图的绘制,最近有客户提出了新的需求:双车道,并显示路网状态信息。经过一番研究,在原地铁图基础上做了扩展实现 路况状态在GIS系统中广泛应用,谷歌地图,百度地图都有实时路况的功能,太复杂并非好事,就像地铁图,按真实经纬度呈现反而不够直观,交通图、路网也是如此,去掉无关信息,将有限的数据(路,收费站,路况)展现出来,成为一种解决方案 Screen Shot 2014-05-13 at 下午12.27.30 ]]>

Qunee for HTML5 v1.3版本发布

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

http://demo.qunee.com v1.3更新内容

鱼骨型总线

可设定连线走向,实现不同的总线型效果

Q.Text图元类型

提供大小调整和对齐方式功能,实现更丰富的文字呈现效果

Q.Text图元类型

]]>

总线型拓扑图

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

总线拓扑图示例 Qunee中定义了Bus类型图元,可以通过路径描述一条总线,与总线相连的节点连线,成正交线性布局 鱼骨型总线布局]]>

拓扑图编辑器(1)

发表于 & 归档在 HTML5, JavaScript, 案例.

拖拽创建节点 拖拽创建节点,以前要实现拖拽,需要监听全局mousemove事件,复制拖拽元素,实现drop效果,现在HTML5提供了新的拖拽事件,处理起来变得很容易 创建连线交互]]>

HTML组件的交互事件设计

发表于 & 归档在 HTML, HTML5, JavaScript, Web.

传统的HTML事件监听方式 通常使用on***对HTML元素添加事件监听,比如

button.onclick = function(evt){
  console.log(evt);
}
很自然的,用户在使用Qunee组件时也会想到这种用法,试图直接在Node上添加onclick监听,结果出现问题,正确的写法应该是这样
graph.onclick = function(evt){
  var element = evt.getData();
  Q.log(element);
}
Qunee拖拽事件过程]]>

基于HTML5的网络拓扑图(1)

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

什么是网络拓扑

网络拓扑,指构成网络的成员间特定的排列方式。分为物理的,即真实的、或者逻辑的,即虚拟的两种。如果两个网络的连接结构相同,我们就説它们的网络拓扑相同,尽管它们各自内部的物理接线、节点间距离可能会有不同。 – 维基百科

网络拓扑图的绘制

很多人用visio绘制网络拓扑图,非常精美,但只能静态示意,也有些传统的拓扑图中间件,基于Java、flex或者Silverlight技术,能够动态显示,只是界面略显沉重,于是有人尝试纯Web技术的图形组件,其中有不少佼佼者如:mxgraph, yfiles…… 都是老外开发的产品,类库巨大,售价昂贵,技术支持是个问题,那么有没有一种轻巧、干净、国产的纯Web拓扑图组件呢?于是就有了Qunee – 开发清新、高效的图形组件
Qunee是一套基于HTML5的网络图组件,提供Web图形解决方案,借助Qunee,可以轻松完成 地图,拓扑图,组织图等等,官方网站:qunee.com, 在线演示:demo.qunee.com
公共事业服务中心网络拓扑图]]>