带上空空的胃及放空的首游澳门

 

中餐:诚昌饭店–水蟹粥–推荐!

 

             安德鲁葡式蛋挞(大运河购物为主)

兄弟很自豪地为自己介绍这个力量:图标可以随心所欲拖动,松开后会自行弹回。哥问小弟就发生什么用,他同样比照正经过地说:证明图是活的!

2.1口岸澳码头

 

背景:前澳门总督御厨

 

2.5初葡京酒店

1.    network.setZoomManager(new twaver.vector.MixedZoomManager(network));
2.    network.setMinZoom(0.2);
3.    network.setMaxZoom(3);
4.    network.setZoomVisibilityThresholds({
5.        label : 0.6,
6.    });

自从公共为会巴士站可因33行程(澳门币:3.2)可及新街

 

2.4新马路

哼吧你战胜了,虽然是只没什么卵用的效应,但闲的蛋疼的时候可以不管玩上几十分钟我啊是信的。

当上环的海港澳码头买船票,下轮就是了

 

然后新街–议事亭–玫瑰圣母堂–大三屈居(手信街/喷水池方向)–澳门博物馆

 

背景:曾祖父是葡萄牙派驻澳门总督

 

海口澳码头–威尼斯人酒店–龙环葡韵–新大街–议事亭前地–玫瑰圣母堂–大三巴牌坊–澳门博物馆–港澳码头

 

1、路线规划

图片 1图片 2

              陆军俱乐部餐厅(节假日提前一定)

图片 3

             沙度那木糠布甸(推荐原味)

 

              九如坊

 

晚餐:海湾餐厅(马介休/咸虾猪肉)–推荐!

 

每当港湾澳码头可以坐免费的蓝色中巴

 

2、路线详解

 

3、话说吃才是主题(之前的亲笔本身看看就哼了,看看下面的。)

命名比较正式,通过名字就可以看出中心信息(例如“l01s01”就是1声泪俱下线第1个站点),甚至一直动用名字就是可以进行查询和遍历。

步行回新街因为巴士去新葡京酒店,坐免费车去港澳码头(附近有渔人码头/金沙酒店)

图片 4

2.2威尼斯人酒店

 

经步行系统及官也街,官为会巴士站后面有一样长达“跛脚街”的台阶,爬上左转按路牌即可(12-15mins)

 

              莫义记甜品(榴莲雪糕)

又对数据文件中之各长达线下的保有站点进行遍历,在站点里依次创建Link。

2.3龙缠葡韵

 

小吃:大利来猪熬包+浮鱼丸(很弹)

var createFollowSta = function(json, line, staNode, staId){
    staFollow = new twaver.Follower(staId);
    staFollow.setImage();
    staFollow.setClient('lineColor',line.color);
    staFollow.setClient('lines',[line.id]);
    staFollow.setHost(staNode);
    var az = azimuth[staId.substr(6,2)];
    var loc0 = json.stations[staId.substr(0,6)].loc;
    var loc = {x:loc0.x+az.x, y:loc0.y+az.y};
    staFollow.setClient('location',loc);
    box.add(staFollow);
    return staFollow;
}
var createTurnSta = function(line, staSn){
    staTurn = new twaver.Node(staSn);
    staTurn.setImage();
    staTurn.setClient('lineColor',line.color);
    staTurn.setClient('lines',[line.id]);
    var loc = line.stations[staSn];
    staTurn.setClient('location',loc);
    box.add(staTurn);
    return staTurn;
}
1.    {
2.        "stations":{
3.            "l01s01":{ },
4.            …………
5.        }
6.        "lines":{
7.            "l01":{……},
8.            …………
9.        }
10.        "sundrys":{
11.            "railwaystationshanghai":{……},
12.            …………
13.        }
14.    }

大家好见见,并无是具路段都直接连入站点为主,在成千上万气象下得要开展偏移。

 

twaver.Util.registerImage('station',{
    w: linkWidth*1.6,
    h: linkWidth*1.6,
    v: function (data, view) {
        var result = [];
        if(data.getClient('focus')){
            result.push({
                shape: 'circle',
                r: linkWidth*0.7,
                lineColor:  data.getClient('lineColor'),
                lineWidth: linkWidth*0.2,
                fill: 'white',
            });
            result.push({
                shape: 'circle',
                r: linkWidth*0.2,
                fill:  data.getClient('lineColor'),
            });
        }else{
            result.push({
                shape: 'circle',
                r: linkWidth*0.6,
                lineColor: data.getClient('lineColor'),
                lineWidth: linkWidth*0.2,
                fill: 'white',
            });
        }
        return result;
    }
});

 

双击站点

 

 

 

 

 

 

 

 

站点路线的创办

管失真缩放是矢量图的原状优势,小弟也掌握得炉火纯青,把TWaver的鱼龙混杂缩放模式用到最好致,还有缩放比例控制、文字自动隐藏等小作用,方便订制。

图片 5

 

前言

 

 

 

第一是朗诵取json文件之数据。

图片 6

 

1.    "l01s01":{
2.        "id":"l01s01",
3.        "name":"莘庄",
4.        "loc":{"x":419,"y":1330},
5.        "label":"bottomright.bottomright",
6.    },
7.    …………
1.    twaver.Util.registerImage('rotateArrow', {
2.        w: 124,
3.        h: 124,
4.        v: [{
5.            shape: 'vector',
6.            name: 'doubleArrow',
7.            rotate: 360,
8.            animate: [{
9.                attr: 'rotate',
10.                to: 0,
11.                dur: 2000,
12.                reverse: false,
13.                repeat: Number.POSITIVE_INFINITY
14.            }]
15.        }]
16.    });

小弟用了虚拟节点的法门,就是以站点的一旁,添加一个Follower(但连无亮出来),让彼此的差线路连接到不同的Follower上。通过调整Follower的职务,来实现线和站点连接点的决定。

 

1.    for(lineId in json.lines) {
2.        ……
3.        for(staSn in line.stations) {
4.            ……
5.            var link = new twaver.Link(linkId,prevSta,staNode);
6.            link.s('link.color', line.color);
7.            link.s('link.width', linkWidth);
8.            link.setToolTip(line.name);
9.            box.add(link);
10.        }
11.    }
1.    for(staId in json.stations){
2.        var station = json.stations[staId];
3.        staNode = new twaver.Node({
4.            id: staId,
5.            name: station.name,
6.            image:'station',
7.        });
8.        staNode.s('label.color','rgba(99,99,99,1)');
9.        staNode.s('label.font','12px 微软雅黑');
10.        staNode.s('label.position',station.label);
11.        staNode.setClient('location',station.loc);
12.        box.add(staNode);
13.    }

当鼠标移到站点及不时,站点图标做了放作用,这个力量很贴心,看了下百度家,用的凡发光效果。

站点图标变更换更换

 

图片 7

 

1.    function init(){
2.        loadJSON("shanghaiMetro.json", function(){
3.            initNetwork(dataJson);
4.            initNode(dataJson);
5.        });
6.    }

而通过对站点进行同样次等遍历,车站之成立就完成了。

 

 

图片 8

 

 

 

 

连接单击同一站点

 

 

接点位置的调动

 

网上的地铁图还是多的,小弟选了即张比较新的做参考。想当年哥来魔都由拼时,图及可尽管同一红一绿油油于个叉……暴露年龄的言辞未多说,看图:

自然为了增进程序的油滑,应本着要上加少单或以上拐点的景,也用了人工拐点的一手。不过这里人工拐点被设成一个隐蔽的节点,可能有利于智能拐点的论断,但也时有发生或于途径操作时造成杂乱。如何处理还好还足以更进一步推敲。

图片 9

再来探望小弟做的:

当然这对TWaver来说也要命容易,只不过对rotate属性进行了动态改变而已。 另外,在单击和双击站点时,还实现了selected和loading的卡通片效果,值得点赞!

数格式,选择了JavaScript原生支持之json文件,直观方便。 数据结构,按照站点、线路、杂项三万分块来团,结构清晰,利于遍历、查询等操作。

 

 

代码也未复杂:

 

 

 

介绍到此处就是了了,虽然是独稍例子,实在是可美观性和实用性还还过得去,小弟花了想法去举行,其实有些加改造就得做出高铁图、公交图、运行图等以。设想一下,如果能够就此当规则交通列控中心大屏监控里,是多炫酷。说交就,又忆起了前段时间云栖大会上正好看的杭州城市数目大脑,不知何时,哥吧能够参与一把那么的种也?可视化,哥的硬…… 最后,想使看程序,或者想打“地铁拖拖乐”的诸位,都可以于我留言与发邮件:tw-service@servasoft.com。

图片 10

 

路线拐点的长

 

 

图片 11

 

成效图对比

 

数据文件的整治

 

 

图片 12

互相作用因此起来

夹缩放炫炫炫

图片 13

最后来八一八次设计的笔触吧,小弟是棵好萌,能做出那么看似的次第,必然是深思熟虑了之。不思还任自己啰嗦的情人,也得以一直发邮件给自家,tw-service@servasoft.com,来玩下小弟的名堂。

1.    function loadJSON(path,callback){
2.        var xhr = new XMLHttpRequest();
3.        xhr.onreadystatechange = function(){
4.            if (xhr.readyState === 4) {
5.                if (xhr.status === 200) {
6.                   dataJson = JSON.parse(xhr.responseText);
7.                   callback && callback();
8.               }
9.           }
10.       };
11.       xhr.open("GET", path, true);
12.       xhr.send();
13.    }

第一,把鼠标移到站点、路段、图标等职,都见面生出文件提示弹出,这个于基本,百度家的虽出,小弟也便加大了比较简单的弹奏有内容。如果加上基本介绍啊、相关提示啊、周边信息啊……要是加上广告,就好赚取了……反正什么还足以加嘛,就是一个setToolTip命令而已。

卡通效果拽拽拽

再次指向label位置进行调,否则站点名称会显示的要命乱。小弟是经当旧数据中手动加入位置信息来落实之,稍显笨了少数,应该好通过序自动判断站点周围空间来进展智能调整。 最后还投入图标,一摆原始的地铁图就展现出了。

 

 

 

 

文本提示弹弹弹

 

主导的示意功能都具有了,这里,小弟让我很欣赏的少数凡是从未有过就这个平息,而是越来越做了调整,使线路特保留了横平竖直和正斜的走向,以高达整齐美观的机能。可能拘留起和参考图稍小有若干不同,主要因每路段基本就补充加了一个拐点,这样做既大大简化了程序,又基本保证了图片的美观度。想多一些,做多一点,是片做产品之好料子。

本身是一眼看不发出分,但这可是免是同等张效果图,而是一个新手就用了几龙举行下的东西,而且其中许多吹嘘和调整是经序自动完成的,这便无轻了。更着重之是,它并无是相同布置死图,而是纯矢量、可相互、有动态效果、无失真缩放的拓扑图!我们事先简单看一下互相作用,后面可以详细说说代码的兑现。

 

近年来专门繁忙,承蒙大伙看,3D机房的种一个随着一个,领了千篇一律援手小弟,搞抓传帮带,乌飞兔走,转眼就菊黄蟹肥……有只兄弟很对,勤奋好学,很快就将API都摸清了,自己磨着开了单HTML5的魔都的地铁线路图,能拖延能拽的,还同电子地图做了相。哥决定把小弟的结晶纳入“HTML5十分数据可视化效果”系列,以显示鼓励(P.S.
其实还颇有压力之,后浪推前浪,新人赶旧人。我们这些老鸟也得小心,免得让00后给抢了业)

落实的不二法门为不行省心,就是于报站点矢量图形时,加入了动态判断。以下注册普通站点矢量图形的代码:

var azimuth = {
    bb: {x: 0, y: linkWidth*zoom/2},
    tt: {x: 0, y: -linkWidth*zoom/2},
    rr: {x: linkWidth*zoom/2, y: 0},
    ll: {x: -linkWidth/2, y: 0},
    br: {x: linkWidth*zoom*0.7/2, y: linkWidth*zoom*0.7/2},
    bl: {x: -linkWidth*zoom*0.7/2, y: linkWidth*zoom*0.7/2},
    tr: {x: linkWidth*zoom*0.7/2, y: -linkWidth*zoom*0.7/2},
    tl: {x: -linkWidth*zoom*0.7/2, y: -linkWidth*zoom*0.7/2},
    BB: {x: 0, y: linkWidth*zoom},
    TT: {x: 0, y: -linkWidth*zoom},
    RR: {x: linkWidth*zoom, y: 0},
    LL: {x: -linkWidth, y: 0},
    BR: {x: linkWidth*zoom*0.7, y: linkWidth*zoom*0.7},
    BL: {x: -linkWidth*zoom*0.7, y: linkWidth*zoom*0.7},
    TR: {x: linkWidth*zoom*0.7, y: -linkWidth*zoom*0.7},
    TL: {x: -linkWidth*zoom*0.7, y: -linkWidth*zoom*0.7}
};

打高达图还可见到,在更换乘站图标被,除了增加了颜色,还实现了转效果。这个就是秒杀百度家了。 来拘禁代码:

总是单击同一站点(注意勿是双击),可以拿经这个站点的拥有线路突出展示出来。小弟说参加这个作用纯粹因简单好做,我……竟然表示万分理解,谁年轻时并未玩了这类轻松又拍的略微招数呢?

为读取文件是一个异步的进程,所以要先后的展开都如在文件读取函数的里。

 

双击站点,竟然弹有了本站周边的电子地图!知道引入他山之玉,看来小子可叫什么。我意识他的定势法,有的是用经过纬度,有的是关键词查询。小弟狡黠地游说,开始是人为查每个站点经纬度的,干了一段儿发觉最累,后来转路子了。马大大说之,懒人改变世界,我服!