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

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

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

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拖拽事件过程]]>

Hello World WebGL示例

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

Experimental Visualization of Artificial Neural Network with WebGL or Extremely Fast and Simple WebGL Motion Detector to Rotate 3D Graphic

前提条件&预期结果

目前支持WebGL得浏览器还很少(参见:Can I use WebGL? ),下面的例子在Chrome 16 – 23 for win32以及firefox for android 17下做了测试,如果你的浏览器不支持webGL,你会看到下面的警告
Your browser doesn’t appear to support the HTML5 <canvas>element.
运行效果: WebGL - hello world]]>