php线路图,HTML5绘制上海地铁线路图-大前端
某市政项目用到地铁图展示,展示地铁站点以及相关信息流,使用Qunee组件可以很好的解决这类需求,做出优美的展现,下面以上海2012地铁图为例,效果如下:
示例讲解
首先需要解决数据问题,可以从维基百科或者上海地铁官网中获取,不过也免不了人工,要达到良好的显示效果,需要不只要记录站点的位置,还需要设置文本标签的理想位置,有时为了避免文字叠加,需要设置旋转角度……总之事在人为,想想办法,最终解决了数据问题,再加上Qunee图形组件的强大展示效果,做出来可以交互的在线地铁图
数据格式
采用JSON格式数据,分三种类型:文本标签、站点、地铁线
总的结构如下:
{
"labels" : [ ... ],
"stations" : [ ... ],
"lines" : [ ... ]
}
文本标签数据
包含坐标和文字信息,如果文字需要旋转,则会增加”rotate”属性,下面是“莘庄”文本标签信息
{
"text" : "莘庄",
"x" : 883.591,
"y" : 1625.695
}
文字与节点旋转效果
站点数据
包含坐标、旋转角度以及编号信息,下面是“莘庄”站的信息
{
"id" : 5,
"x" : 869.8513512641732,
"y" : 1597.6559686949402,
"rotate" : 0.7853981633974483
}
地铁线数据
包含名称,颜色,以及经过的站点编号
{
"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]
}
对于特殊情况,比如两条地铁线共用一条线路的情况,会出现两条线重合,为了避免这种情况,还可以指定站点横向偏移量,比如上面一号线中的如下数据
{"id": 21, "yOffset": 0.5}
因为上海地铁三号线与四号线共用线路较多,所以这种处理更加明显
三号线数据
{
"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图元对象,三种类型分别对应三个创建函数
创建文本标签
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]);
}
}
});
});
在线示例
php线路图,HTML5绘制上海地铁线路图-大前端相关推荐
- html5制作线路图,HTML5绘制上海地铁线路图
某市政项目用到地铁图展示,展示地铁站点以及相关信息流,使用Qunee组件可以很好的解决这类需求,做出优美的展现,下面以上海2012地铁图为例,效果如下: 上海2012地铁图效果 示例讲解 首先需要解决 ...
- HTML5绘制上海地铁线路图
某市政项目用到地铁图展示,展示地铁站点以及相关信息流,使用Qunee组件可以很好的解决这类需求,做出优美的展现,下面以上海2012地铁图为例,效果如下: 示例讲解 首先需要解决数据问题,可以从维基百科 ...
- 绘制地铁线路html,HTML5绘制上海地铁线路图(2)
创建图元 数据需要转换成qunee图元对象,三种类型分别对应三个创建函数 创建文本标签 function createText(name, x, y, rotate){ var text = grap ...
- 基于html5绘制上海地铁图 - 路况信息展示
为什么80%的码农都做不了架构师?>>> 前面介绍了上海地铁图的绘制,最近有客户提出了新的需求:双车道,并显示路网状态信息.经过一番研究,在原地铁图基础上做了扩展实现 交通图介 ...
- 【R语言】使用leaflet绘制沈阳地铁线路图——R实训第六次作业
参考: 一.惭愧惭愧,基本都是抄自这个大牛学长,自己做了一部分改进--R语言绘制沈阳地铁线路图 二.这个发布的时间比学长还要早(学长可能也借鉴过)--上海地铁数据可视化 三.这个是真正的大牛,从他的文 ...
- pwa, 上海地铁线路图全新重构.
之前一直有在维护一个上海地铁线路图的 pwa,最主要的特性就是 "offline first".但是由于代码都是通过原生的 js 去实现,之前我都不是很喜欢去用框架,不想具有任何框 ...
- Day1.绘制上海地铁网络图
Day1.绘制上海地铁网络图 需求 1.网络图适配iOS.android.web.大屏 2.线路高亮 技术选择 vue + d3 方法设计 1.初始化 var metro = function (in ...
- html绘制LR graph,[LR]用R绘制上海地铁
使用Leaflet绘制上海地铁地图 直接上代码,如下: library(leaflet) library(data.table) library(dplyr) stations stations #地 ...
- tableau三轴该怎么做_如何用tableau绘制城市地铁线路图?
在用tableau绘制地铁线路图之前,当然是要获取相关的数据啦 我们以郑州目前已开通的地铁为例,分别是1.2.5号线 经度.维度可在 网页上自行搜索哦(以谷歌地图为准) 有了这些下面我们就要开始啦 将 ...
最新文章
- java数据结构-HashMap
- Mac解决终端显示乱码
- 智能情绪分析技术_石化缘推荐:炼化企业智能机器人巡检技术应用前景分析!...
- ajax失败的原因,使用https协议失败的ajax请求失败的可能原因但http工作
- 设计模式笔记九:组合模式
- c++网络编程连接成功后回调onconnected_谈谈网络编程(基于C++)
- 高等数学一使用python实现极限后有代码
- read.table与readr::read_delim
- 《A Tour of PostgreSQL Internals》学习笔记——进程间通信
- HyperLedger Fabric 1.0的Transaction处理流程
- 区块链 p2p点对点网络是什么
- Rust : 简单模拟交易所与参与机构
- toma线攻略_AMNESIA WORLD 手打攻略【SCHOOL WORLD part】アムネシア
- 【Ubuntu 提升音质】 Linux 平台下的一个 全局音效均衡器插件
- mac charles4.0.2免费破解版安装
- STM32旋转立方体
- 进化算法中的两种常用交叉算子SBX和DE
- Django REST Framework中的Serializer relations
- 完美解决“未能装载Office文档控件。请使用Internet Explorer(6.0+)浏览器并检查浏览器的安全设置。”的方案
- gitlab使用163邮箱向用户发送邮件