关注前端开发
关注用户体验

HTML5绘制上海地铁线路图

某市政项目用到地铁图展示,展示地铁站点以及相关信息流,使用Qunee组件可以很好的解决这类需求,做出优美的展现,下面以上海2012地铁图为例,效果如下:
上海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]);
	        }
	    }
    });
});

在线示例

http://demo.qunee.com/#Shanghai Metro Map 2012

赞(7)
未经允许不得转载:大前端 » HTML5绘制上海地铁线路图
分享到: 更多 (0)

评论 79

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #54

    кредит 911
    kreditkarte.ru

    Albertpef1小时前回复
  2. #53

    always avoid plastic tv mounts when possible and buy those aluminum or steel tv mounts because they last longer“

    Nonton Anime2周前 (05-11)回复
  3. #52

    I’m having a small problem. I’m unable to subscribe to your rss feed for some reason. I’m using google reader by the way.

    cat blog2周前 (05-08)回复
  4. #51

    Выездной мобильный шиномонтаж в Москве и МО круглосуточно!
    Мегафон: +7(495)908-97-71
    Мтс: +7(915)448-25-25
    Хранение шин.
    1. Шиномонтажные работы.
    2. Снятие секреток.
    3. Переобувка шин.
    4. Ремонт проколов и порезов.
    Выездной шиномонтаж 24 часа в Москве и МО.
    Звоните!

    DavidWriny1个月前 (04-16)回复
  5. #50

    дешевый алкоголь в спб
    В петербургском управлении Антимонопольной службы подтвердили, что с незаконной рекламой незаконной продажи алкоголя они борются, но за пять лет им ни разу не приходилось преследовать интернет-торговцев. Но как это делается, рассказали.

    ? Если человек создал сайт, который не находится через поисковые системы типа “Яндекс” или “Гугл”, и через этот сайт рекламирует свои напитки, это не возбраняется. Он может рекламировать этот сайт, разрисовывая асфальт или раскидывая листовки, это его дело. Но если набрать в строке поиска “ночная торговля алкоголем” или что-то вроде этого, и выпадет точное название сайта, владельцы которого действительно осуществляют такую продажу, то их уже можно оштрафовать, а сайт закрыть. За минувшие пять лет нам такой сайт не попадался ни разу.
    в канистре элитный алкоголь в санкт петербурге
    ОДНА ВОЗЛЮБЛЕННАЯ ПАРА ВСЮ НОЧЬ ВИНОМ ПРОТОРГОВАЛА.

    магазин алкоголя в спб
    Из тысячи имеющихся в Петербурге кафе и ресторанов немногие предлагают доставку продуктов и напитков на дом. Но алкоголя в прайсах у большинства нет. Все-таки я нашла кафе “Быстрая еда”, которое вроде как берет на себя и эту заботу. Мы созвонились, я заказала бутылку водки “Хлебная” за 750 рублей плюс 400 доставка. Обещали привезти в любое время. Но я сдуру заказ отменила ? пожалела денег.
    магазин алкоголя в спб – Алкоголь в канистрах в спб.

    Звоню еще по одному телефону, который обещает привезти ночью любой алкоголь. На сайте ? только номер, каталог товара, и все. Сразу в лоб спрашиваю: вы как продаете: посредством аренды или по обмену? Там даже не поняли, что я имею в виду.

    Kennethdrulk1个月前 (04-11)回复
  6. #49

    Lernen Sie den Koran kennen und werden auch Sie ein Muslim bei der HSK Fairmietung GmbH.

    In unserer radikalen Koranschule werden Sie bestens indoktriniert und zum strengen Muslim ausgebildet.

    Unsere Madrasa Innsbruck ist fuer eine besonders strenge und wortgetreue Auslegung des Koran bekannt.

    HSK Fairmietung hilft Ihnen, in kurzer Zeit strenger und radikaler Muslim zu werden!

    Vergessen Sie das Christentum und konvertieren Sie noch heute zum Islam.

    Es gibt genug Katholiken in Tirol, gehen Sie also mit gutem Beispiel voran und werden Sie Muslim bei der HSK Fairmietung GmbH.

    Besuchen Sie die Moschee der HSK Fairmietung GmbH, und wir werden alles tun, um Sie schell zu einem strengen Muslim zu machen.

    Allah ist GROSS bei der HSK Fairmietung GmbH.

    Gern missionieren wir auch Ihr Umfeld und Ihre Familie, so dass Sie in streng muslimischer Gemeinschaft leben.

    HSK Fairmietung GmbH, Ihr Islamdienstleister

    GEPRIESEN SEI ALLAH HSK Fairmietung GmbH

    KoranschuleHSKFairmietunggause2个月前 (04-06)回复
  7. #48

    Konkurs HSK Fairmietung GmbH!

    HSK Fairmietung GmbH Konkurs Insolvenz

    Insolvenz HSK Fairmietung GmbH

    HSK Fairmietung GmbH Konkursverfahren

    HSKFairmietungGmbHMeepe2个月前 (03-31)回复
  8. #47

    Incredible update of captcha solution software “XEvil 4.0”:
    captchas solution of Google (ReCaptcha-2 and ReCaptcha-3), Facebook, BitFinex, Bing, Hotmail, SolveMedia, Yandex,
    and more than 8400 another types of captcha,
    with highest precision (80..100%) and highest speed (100 img per second).
    You can use XEvil 4.0 with any most popular SEO/SMM software: iMacros, XRumer, GSA SER, ZennoPoster, Srapebox, Senuke, and more than 100 of other software.

    Interested? There are a lot of demo videos about XEvil in YouTube.

    FREE DEMO AVAILABLE!

    See you later!

    Sharonberne2个月前 (03-26)回复
  9. #46

    Absolutely NEW update of captchas recognition software “XEvil 4.0”:
    captcha recognition of Google (ReCaptcha-2 and ReCaptcha-3), Facebook, BitFinex, Bing, Hotmail, SolveMedia, Yandex,
    and more than 8400 another subtypes of captcha,
    with highest precision (80..100%) and highest speed (100 img per second).
    You can use XEvil 4.0 with any most popular SEO/SMM software: iMacros, XRumer, GSA SER, ZennoPoster, Srapebox, Senuke, and more than 100 of other programms.

    Interested? You can find a lot of impessive videos about XEvil in YouTube.

    Free XEvil Demo available.

    See you later 😉

    Sharonberne2个月前 (03-25)回复
  10. #45

    Revolutional update of captchas recognition package “XEvil 4.0”:
    captcha breaking of Google (ReCaptcha-2 and ReCaptcha-3), Facebook, BitFinex, Bing, Hotmail, SolveMedia, Yandex,
    and more than 8400 another types of captchas,
    with highest precision (80..100%) and highest speed (100 img per second).
    You can use XEvil 4.0 with any most popular SEO/SMM software: iMacros, XRumer, GSA SER, ZennoPoster, Srapebox, Senuke, and more than 100 of other software.

    Interested? You can find a lot of demo videos about XEvil in YouTube.

    Free XEvil Demo available.

    Good luck 😉

    Sharonberne2个月前 (03-24)回复
  11. #44

    Perfect update of captcha solution package “XEvil 4.0”:
    captcha solving of Google (ReCaptcha-2 and ReCaptcha-3), Facebook, BitFinex, Bing, Hotmail, SolveMedia, Yandex,
    and more than 8400 another size-types of captcha,
    with highest precision (80..100%) and highest speed (100 img per second).
    You can use XEvil 4.0 with any most popular SEO/SMM programms: iMacros, XRumer, GSA SER, ZennoPoster, Srapebox, Senuke, and more than 100 of other programms.

    Interested? You can find a lot of impessive videos about XEvil in YouTube.

    FREE DEMO AVAILABLE!

    See you later 😉

    Sharonberne2个月前 (03-23)回复
  12. #43

    Доставка суши и пиццы Пиццаролла pizzarolla.ru в Симферополе – обманщики!!!
    pizzarolla.ru доставляют заказы в Симферополе и Севастополе с большим опозданием.
    Привозят несоответствующие заказы, хамят и оскорбляют клиентов без причины.
    Не смотря на то, что доставка pizzarolla.ru бесплатная – курьер может на свое усмотрение протребовать доплату за “плохую” дорогу или погоду.
    Настоятельно не рекомендую пользоваться услугами “Пиццаролла” (pizzarolla.ru) – сервисом доставки роллов и пиццы.
    pizzarolla.ru
    +7 (978) 076-32-09
    +7 (978) 707-17-87
    +7 (978) 707-17-37

    uanBam2个月前 (03-08)回复
  13. #42

    918Kiss Online download link
    918Kiss
    918Kiss Register
    918Kiss download apk
    918Kiss download ios

    Bradytak3个月前 (02-26)回复
  14. #41

    强大的HTML功能

    qianrenzhang4年前 (2015-01-28)回复
  15. #40

    彻底学会这个插件要花点时间吧

    顾陌博客4年前 (2015-01-21)回复
  16. #39

    牛逼,HTML功能就是强大

    数据库备份5年前 (2014-11-21)回复
  17. #38

    老大,代码高亮是用的插件吗,或者怎么实现的?

    lixiaolong5年前 (2014-11-06)回复
  18. #37

    浩哥。。我想问问阿里百秀的站长和你什么关系。。你还帮备案。。

    随便说说5年前 (2014-10-05)回复
  19. #36

    不懂,打酱油的。

    大城小我5年前 (2014-07-19)回复
  20. #35

    HTML5太强大了!! :mrgreen:

    多玩小说5年前 (2014-07-15)回复
  21. #34

    全是代码,没看懂,欢迎互访

    南京艺考培训学校5年前 (2014-07-13)回复
  22. #33

    确实很深奥,我都是调用百度的

    天津做网站5年前 (2014-07-09)回复
  23. #32

    确实不错的文章,学习了!

    坏小子5年前 (2014-07-06)回复
  24. #31

    好深奥,比我看到标题进来前高大上多了

    南京高起专学历5年前 (2014-06-30)回复
  25. #30

    😎

    iris5年前 (2014-05-14)回复
  26. #29

    很赞。。。

    云枫5年前 (2014-05-13)回复
  27. #28

    评论好像有问题

    sad5年前 (2014-05-07)回复
  28. #27

    😀 好深奥,比我看到标题进来前高大上多了~~~

    诸葛小觉5年前 (2014-05-06)回复
  29. #26

    博客貌似好久没更新了

    锤子5年前 (2014-04-25)回复
  30. #25

    很不错哦。赞一个

    电商大叔5年前 (2014-04-24)回复
  31. #24

    5年前 (2014-04-24)回复
  32. #23

    浩哥,你的主题实在是很漂亮,我看到你详细页下的相关文章是关联同一分类的文章,能改成同一标签的文章吗?这样是否会好些?

    顶礼膜拜5年前 (2014-04-24)回复
    • 首先关联标签,数量不足就关联分类

      浩子5年前 (2014-04-27)回复
      • i like chaning tatum because he has a great body, just look at those chest muscles*

        Earleen Baur2个月前 (03-11)回复
      • i tried some ayurvedic remedies on myself and all i can say is that this stuff works.,

        my singing monsters2个月前 (03-28)回复
      • After study several of the blog posts on your own site now, i genuinely as if your technique of blogging. I bookmarked it to my bookmark internet site list and you will be checking back soon. Pls take a look at my web site at the same time and figure out what you consider.

        cat blog2周前 (05-08)回复
  33. #22

    谁想到这个的…也是够无聊

    Kane5年前 (2014-04-22)回复
    • 哈哈,技术文,角度不一样吧

      浩子5年前 (2014-04-27)回复
  34. #21

    太牛逼了,果断收藏了

    泰安网站建设5年前 (2014-04-22)回复
  35. #20

    ➡ 我的博客,回复评论一直在提交中…半天才提交成功…

    萧晔离5年前 (2014-04-17)回复
    • 看了,是很慢,你试试mail插件,怀疑邮件发送问题

      浩子5年前 (2014-04-18)回复
  36. #19

    尊敬的站长,新版的D8什么时候更新?现在通过微信访问网站,只有图片没有文字

    3ice5年前 (2014-04-15)回复
    • 抱歉,目前可以使用下面方式解决http://www.daqianduan.com/5327.html

      浩子5年前 (2014-04-18)回复
  37. #18

    阿里百秀是一款WordPress主题吗,很喜欢,会发售吗?

    享乐5年前 (2014-04-15)回复
    • 哥们,我想说,那是广告位,你晓得不

      浩子5年前 (2014-04-15)回复
      • 阿里百秀上有推荐你,他的主题是不是你这边开发的?很漂亮

        灰度5年前 (2014-04-28)回复
        • 没错,这事是我干的

          浩子5年前 (2014-04-28)
      • 晕死,原来是你的站?网站备案这两个域名是同一个备案

        灰度5年前 (2014-04-28)回复
        • 要知道,对于小白来说,备案很困难,包括服务器都是我的阿里云

          浩子5年前 (2014-04-28)
  38. #17

    啊啊啊啊

    ads5年前 (2014-04-07)回复
  39. #16

    文章页面的百度分享按钮建议更新下,百度分享现在有新的样式了,更加漂亮。

    随心5年前 (2014-04-06)回复
    • 已经在测试阶段了,近几天的新版本加上

      浩子5年前 (2014-04-06)回复
      • 这几天等的难受死了啊

        购买主题呢5年前 (2014-04-15)回复
  40. #15

    好难啊。

    智享互联5年前 (2014-04-05)回复
  41. #14

    评论你的文章后,你回复我,会有邮箱提醒,这是通过php函数实现的还是smtp?

    主题评论5年前 (2014-04-05)回复
  42. #13

    写错了,是文章里的代码区域是黑色的,是怎么实现的

    主题蛮好的5年前 (2014-04-05)回复
    • 请参看:http://www.daqianduan.com/5253.html

      浩子5年前 (2014-04-05)回复
  43. #12

    主题里代码区域是黑色的,是主题自带的?还是插件实现的啊?

    主题蛮好的5年前 (2014-04-05)回复
  44. #11

    主题不错。

    d85年前 (2014-04-04)回复
  45. #10

    演示站打开好慢啊

    donghaichen5年前 (2014-04-03)回复
  46. #9

    反馈大前端一个BUG,用同一表情评论两次,网页变型啦

    反馈大前端BUG5年前 (2014-04-02)回复
    • 我看看这是什么个情况

      浩子5年前 (2014-04-05)回复
  47. #8

    演示站打开好慢啊

    东子5年前 (2014-03-31)回复
  48. #7

    这么赞!

    sylar5年前 (2014-03-31)回复
  49. #6

    反馈大前端一个BUG,浩子哥试试 用同一表情评论两次,看看网页变成了什么样—-360安全浏览器

    1235年前 (2014-03-31)回复
  50. #5

    :mrgreen:

    1235年前 (2014-03-31)回复
  51. #4

    相当的不错

    Win7en乐园5年前 (2014-03-27)回复
  52. #3

    强大啊,太酷了,html5确实强大,看看DEMO

    礼品定制5年前 (2014-03-26)回复
    • 肯定又是从哪里复制来的。然后改改的。

      路过5年前 (2014-06-17)回复
  53. #2

    原文在哪里

    胡绪宜5年前 (2014-03-25)回复
  54. #1

    很赞啊,特别是点击某条线路,然后高亮,这效果很棒。看过一个用HTML5绘出来的中国地图,是百度上次植树节做的,那效果也很好

    水中月明5年前 (2014-03-25)回复

themebetter 国内更好的WordPress主题服务商

立即前往