绘制地铁线路html,基于HTML5技术绘制上海地铁图
某市政项目用到地铁图展现,展现地铁站点以及相关信息流,使用Qunee组件能够很好的解决这类需求,作出优美的展示,下面以上海2012地铁图为例,效果以下:node
示例讲解
首先须要解决数据问题,能够从维基百科或者上海地铁官网中获取,不过也免不了人工,要达到良好的显示效果,须要不仅要记录站点的位置,还须要设置文本标签的理想位置,有时为了不文字叠加,须要设置旋转角度......总之事在人为,想一想办法,最终解决了数据问题,再加上Qunee图形组件的强大展现效果,作出来能够交互的在线地铁图函数
数据格式
采用JSON格式数据,分三种类型:文本标签、站点、地铁线spa
总的结构以下:对象
{
"labels" : [ ... ],
"stations" : [ ... ],
"lines" : [ ... ]
}
文本标签数据
包含坐标和文字信息,若是文字须要旋转,则会增长"rotate"属性,下面是“莘庄”文本标签信息事件
{
"text" : "莘庄",
"x" : 883.591,
"y" : 1625.695
}
文字与节点旋转效果
站点数据
包含坐标、旋转角度以及编号信息,下面是“莘庄”站的信息ci
{
"id" : 5,
"x" : 869.8513512641732,
"y" : 1597.6559686949402,
"rotate" : 0.7853981633974483
}
地铁线数据
包含名称,颜色,以及通过的站点编号rem
{
"name" : "1",
"color" : "#e52035",
"stations" : [64, 70, 67, 71, 72, 65, 69, 73, 66, 68, 63, 62, 22, 61, 60, {"id": 21, "yOffset": 0.5}, 59, {"id": 18, "yOffset": -0.5}, 17, 58, 14, 7, 57, 6,
56, 44, 47, 5]
}
对于特殊状况,好比两条地铁线共用一条线路的状况,会出现两条线重合,为了不这种状况,还能够指定站点横向偏移量,好比上面一号线中的以下数据get
{"id": 21, "yOffset": 0.5}
由于上海地铁三号线与四号线共用线路较多,因此这种处理更加明显it
三号线数据
{
"name" : "3",
"color" : "#f9d300",
"stations" : [6, 95, 96, 97, {"id":12,"yOffset":0.5}, {"id":11,"yOffset":0.5}, {"id":8,"yOffset":0.5}, {"id":9,"yOffset":0.5},
{"id":10,"yOffset":0.5}, {"id":25,"yOffset":0.5}, {"id":26,"yOffset":0.5}, {"id":238,"yOffset":0.5}, {"id":22,"yOffset":-0.5}, {"id":27,"yOffset":-0.5},
98, 99, 100, 101, 104, 105, 107, 108, 109, 106, 110, 111]
}
地铁共线效果
建立图元
数据须要转换成qunee图元对象,三种类型分别对应三个建立函数io
建立文本标签
function createText(name, x, y, rotate){
var text = graph.createNode(name, x, y);
if(rotate){
text.rotate = rotate;
}
text.zIndex = 20;
text.image = null;
text.setStyle(Q.Styles.BACKGROUND_COLOR, Q.toColor(0x88FFFFFF));
text.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.LEFT_BOTTOM);
text.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_MIDDLE);
text.setStyle(Q.Styles.LABEL_PADDING, PADDING);
return text;
}
建立站点
function createStation(station){
var node = graph.createNode(null/**station.name*/, station.x, station.y);
node.stationId = station.id;
node.setStyle(Q.Styles.LABEL_FONT_SIZE, 10);
node.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_MIDDLE);
node.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_MIDDLE);
node.zIndex = 10;
if(station.rotate){
node.image = roundRect;
node.rotate = station.rotate;
}else{
node.image = circle;
}
node.setStyle(Q.Styles.SHAPE_FILL_COLOR, "#FFF");
node.setStyle(Q.Styles.SHAPE_STROKE_STYLE, "#000");
return node;
}
建立地铁线
createLine(...)函数用于建立地铁线,使用了节点类型图元,并设置节点主体为路径,函数updateLine(...)用于从站点信息自动生成线路路径
function createLine(line){
var stations = line.stations;
var node = graph.createNode(line.name);
node.stations = stations;
node.movable = false;
node.setStyle(Q.Styles.LABEL_FONT_SIZE, 50);
node.setStyle(Q.Styles.LABEL_COLOR, line.color);
node.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.LEFT_BOTTOM);
node.setStyle(Q.Styles.LABEL_POSITION, Q.Position.LEFT_TOP);
node.setStyle(Q.Styles.LAYOUT_BY_PATH, true);
node.anchorPosition = null;
node.setStyle(Q.Styles.SHAPE_STROKE, size);
node.setStyle(Q.Styles.SHAPE_STROKE_STYLE, line.color);
updateLine(node, true);
return node;
}
function updateLine(line, addListener){
var path = new Q.Path();
line.image = path;
var stations = line.stations;
var first = true;
Q.forEach(stations, function(s){
var station = getStation(s.id || s);
if(!station){
return;
}
if(addListener){
addLocationChangeListener(station.stationId, line);
}
var location = station.location;
var x = location.x, y = location.y;
if(s.yOffset){
var offset = s.yOffset * size;
var rotate = station.rotate || 0;
var sin = Math.sin(rotate);
var cos = Math.cos(rotate);
x += cos * offset;
y += sin * offset;
}
if(first){
first = false;
path.moveTo(x, y);
}else{
path.lineTo(x, y);
}
})
}
交互处理
增长交互处理,监听站点拖动事件,保持地铁路线跟随站点位置变化
graph.interactionDispatcher.addListener(function(evt){
if(evt.kind != Q.InteractionEvent.ELEMENT_MOVING){
return;
}
var datas = evt.datas;
Q.forEach(datas, function(data){
if(!data.stationId){
return;
}
var listeners = stationLocationChangeListeners[data.stationId];
if(listeners){
for(var l in listeners){
updateLine(listeners[l]);
}
}
});
});
在线示例
绘制地铁线路html,基于HTML5技术绘制上海地铁图相关推荐
- html5地图连线原理,基于html5技术绘制上海地铁图 – 双车道路况信息
上海地铁图的绘制,最近有客户提出了新的需求:双车道,并显示路网状态信息.经过一番研究,在原地铁图基础上做了扩展实现 交通图介绍 路况状态在GIS系统中广泛应用,谷歌地图,百度地图都有实时路况的功能,太 ...
- 自动绘图html,基于HTML5技术绘制上海地铁图
某市政项目用到地铁图展示,展示地铁站点以及相关信息流,使用Qunee组件可以很好的解决这类需求,做出优美的展现,下面以上海2012地铁图为例,效果如下: 示例讲解 首先需要解决数据问题,可以从维基百科 ...
- java界面绘制地铁路线_基于 HTML5 Canvas 的交互式地铁线路图
前言 前两天在 echarts 上寻找灵感的时候,看到了很多有关地图类似的例子,地图定位等等,但是好像就是没有地铁线路图,就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo,地铁线路上的点是 ...
- 地铁线路图显示效果php,基于HTML5制作在线上海地铁图
某市政项目要用到地铁图,展示上海地铁站点以及相关信息流,尝试使用HTML5技术来实现,自己折腾有点慢,找到一个HTML5的图形组件-Qunee for HTML5,简单学习一下,就可以很好的解决这类需 ...
- HTML绘制交互图,基于 HTML5 Canvas 的交互式地铁线路图
原标题:基于 HTML5 Canvas 的交互式地铁线路图 作者:xhload3d my.oschina.net/xhload3d/blog/1629064 摘要:感觉目前地铁上的地铁线路图也不是很人 ...
- html实现音乐界面设计,基于HTML5技术的音乐播放器的设计与实现.doc
基于HTML5技术的音乐播放器的设计与实现 基于HTML5技术的音乐播放器的设计与实现 常志强 刘正余 杨劲楠 皖西学院电子与信息工程学院 X 关注成功! 加关注后您将方便地在 我的关注中得到本文献的 ...
- web html5音乐播放器设计与实现,基于HTML5技术的音乐播放器的设计与实现
Vol.33No.11Nov.2017 赤峰学院学报(自然科学版) Journal of Chifeng University (Natural Science Edition )第33卷第11期(下 ...
- html5脑图_基于HTML5的三维思维导图软件开发技术研究
龙源期刊网 http://www.qikan.com.cn 基于 HTML5 的三维思维导图软件开发技术 研究 作者:汪升华 唐国纯 来源:<软件工程> 2017 年第 10 期 摘 要: ...
- 基于html的音乐播放设计,基于HTML5技术的音乐播放器的设计与实现
Vol.33No.11 Nov.2017 赤峰学院学报(自然科学版) JournalofChifengUniversity(NaturalScienceEdition) 第 33 卷第11 期(下) ...
最新文章
- 使用libjpeg进行图片压缩(哈夫曼算法,无损压缩)
- mysql中vlookup函数_wps表中vlookup函数使用方法将一表引到另一表
- 困难样本挖掘(Online Hard Sample Mining)
- 3des java ecb_PHP 3DES加密 与JAVA通用 加密模式:ECB
- linux ubuntu16.04 Clion 安装及快捷方式创建
- ES6 Generator async
- 使用OTA绕过AppStore安装App
- esp32树莓派_用树莓派 DIY 宠物自动喂食机,再也不用担心家里的萌宠了
- Git学习05 --分支管理02
- HTML5 音频 / 视频 DOM 操作
- 深度学习之卷积神经网络(CNN)的设计准则
- 机器学习性能改善备忘单:32个帮你做出更好预测模型的技巧和窍门
- Android 开发基于Webview 自制一个简单的手机浏览器
- 许昌一高2021年高考成绩查询,2020年许昌高中高考成绩怎么样啊??
- 类似华为麒麟鸿蒙类的名字,华为除了“麒麟”,还有四款顶级芯片,名字背后隐藏寓意令人感动...
- 电脑上PDF文档怎么做笔记?
- checkbox 点击搜索失去焦点_jquery获取焦点和失去焦点事件代码
- infiniband学习总结
- 详细介绍OAuth2.0及实现和SpringSecurity的整合应用
- linux下分区比例,安全地调整Linux分区大小的三种方法 | MOS86
热门文章
- Forter在过去12个月营收翻番;融资3亿美元,估值达到30亿美元
- #C语言-基础篇(Ⅳ)
- QIIME 2教程. 09数据导入Importing data(2021.2)
- C# WPF 获取系统文化和国家信息(CultureInfo)类
- 首饰logo创意欣赏 - 设计商标 - logo公司
- RK平台--EVS模块: (一)概述
- 鸿蒙开发(13)---ProgressBar与RoundProgressBar组件
- 涡线图用tecplot咋画
- 快速开发平台,让开发变得简单
- SAP BW4 410(数据抽取、信息对象、建模等)学习1-5章