地铁线路图涂鸦大作战：线路拼图游戏开启

addToDOM = function(){   
    var self = this,
        view = self.getView(),   
        style = view.style;
    document.body.appendChild(view); //将组件底层div添加到body中           
    style.left = '0';//默认组件是绝对定位，所以要设置位置
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false); //窗口变化事件           
}

获取并分配地铁线路图上的点

咱们已经下好了地铁线路图，准备涂鸦一番。首先要找出几个关键点，放入叫做subway.js的文件中。这个js文件只是把点按线路整理成了一个数组。接下来，就可以安心地在地铁线上挥洒你的创意！

mark_Point13 = [];//线路 数组内包含线路的起点和终点坐标以及这条线路的名称
t_Point13 = [];//换成站点 数组内包含线路中的换乘站点坐标以及换成站点名称
n_Point13 = [];//小站点 数组内包含线路中的小站点坐标以及小站点名称
mark_Point13.push({ name: '十三号线', value: [113.4973,23.1095]}); 
mark_Point13.push({ name: '十三号线', value: [113.4155,23.1080]}); 
t_Point13.push({ name: '鱼珠', value: [113.41548,23.10547]}); 
n_Point13.push({ name: '裕丰围', value: [113.41548,23.10004]});

声明地铁线路数组和颜色数组

var lineNum = ['1', '2', '3', '30', '4', '5', '6', '7', '8', '9', '13', '14', '32', '18', '21', '22', '60', '68'];
var color = ['#f1cd44', '#0060a1', '#ed9b4f', '#ed9b4f', '#007e3a', '#cb0447', '#7a1a57', '#18472c', '#008193', '#83c39e', '#8a8c29', '#82352b', '#82352b', '#09a1e0', '#8a8c29', '#82352b', '#b6d300', '#09a1e0'];

为了画地铁线，我们可以提前准备两个小列表——lineNum 和 color——用来记录线路号跟对应的颜色。这么做就不怕画出的哪条线出岔子了~

let lineName = 'Line' + num;
let line = window[lineName];

绘制地铁线路

function createLine(num, color) {//绘制地图线
    var polyline = new ht.Polyline();//多边形 管线
    polyline.setTag(num);//设置节点tag标签，作为唯一标示
    
    if(num === '68') polyline.setToolTip('A P M');//设置提示信息 
    else if(num === '60') polyline.setToolTip('G F'); 
    else polyline.setToolTip('Line' + num);
    if(color) {
        polyline.s({//s 为 setStyle 的简写，设置样式
            'shape.border.width': 0.4,//设置多边形的边框宽度
            'shape.border.color': color,//设置多边形的边框颜色
            'select.width': 0.2,//设置选中节点的边框宽度
            'select.color': color//设置选中节点的边框颜色
        });
    }
    let lineName = 'Line' + num;
    let line = window[lineName];
    for(let i = 0; i < line.length; i++) {
        for(let j = 0; j < line[i].coords.length; j++) {
            polyline.addPoint({x: line[i].coords[j][0]*300, y: -line[i].coords[j][1]*300});
            if(num === '68'){//APM线（有两条，但是点是在同一个数组中的）
                if(i === 0 && j === 0) {
                    polyline.setSegments([1]);
                }
                else if(i === 1 && j === 0) {
                    polyline.getSegments().push(1);
                }
                else {
                    polyline.getSegments().push(2);
                }
            }    
        }
    }
    polyline.setLayer('0');//将线设置在下层，点设置在上层“top”
    dm.add(polyline);//将管线添加进数据容器中储存，不然这个管线属于“游离”状态，是不会显示在拓扑图上的
    return polyline;
}

咱们用rth.Polyline编辑器来玩拼图游戏似的加点点，这个addPoint函数就像是堆积木，方便大家随时补进新的点。而那个setSegments就是把所有点串在一起，形成完整的线。不过，那条线上有些特殊点，比如Line68那里那些，所以我们得小心翼翼地处理。给segements参数设个数值，就能决定是用lineTo还是closePath来连接咯。

节点绘制与显示

除了给管线打上标签，我还给每个点位加入了ht.Node节点。这样一来，只需要把这些节点放入数据容器，就能马上在拓扑图中看见了，当然前提是你要用到图形视图组件并选它做为你的数据源。如果觉得图形太小看起来费劲，那就试试调整一下图形视图的自动缩放功能！

鼠标交互功能实现

首先，我们得监控鼠标滑动，这样gv那个最底层的div就能随着你移动了。然后，利用ht：getDataAt函数找准相关的节点，这不就能随心所欲地操控它们了吗？当然，如果你把鼠标放在地铁线路上不动，“具体线路信息”就会跳出来！其实就是这么简单，只需要激活下gv的tooltip功能就好。

var tName = 't_Point' + num;
var tP = window[tName];//大站点
if(tP) {//有些线路没有“换乘站点”
    for(let i = 0; i < tP.length; i++) {
        let node = createNode(tP[i].name, tP[i].value, color[index]);//在获取的线路上的点的坐标位置添加节点
        node.s({//设置节点的样式style
            'label.scale': 0.05,//文本缩放，可以避免浏览器限制的最小字号问题
            'label.font': 'bold 12px arial, sans-serif'//设置文本的font
        });
        node.setSize(0.6, 0.6);//设置节点大小。由于js中每个点之间的偏移量太小，所以我不得不把节点设置小一些
        node.setImage('images/旋转箭头.json');//设置节点的图片
        node.a('alarmColor1', 'rgb(150, 150, 150)');//attr属性，可以在这里面设置任何的东西，alarmColor1是在上面设置的image的json中绑定的属性，具体参看 HT for Web 矢量手册(http://www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html#ref_binding)
        node.a('alarmColor2', 'rgb(150, 150, 150)');//同上
        node.a('tpNode', true);//这个属性设置只是为了用来区分“换乘站点”和“小站点”的，后面会用上
    }
}

点击交互功能实现

只要用我们这个CV表单，不管是选择路线还是双击图里的’站点’,都会直接帮你移动到对应地方，并且还有放大效果。要看红色注释？那就点一下’站点’;要是不想显示了,就在空白地方双击一下就好，全都是根据GV事件控制滴哦!

gv.fitContent(false, 0.00001);//自适应大小，参数1为是否动画，参数2为gv与边框的padding值
gv.setMovableFunc(function(){
    return false;//设置gv上的节点不可移动
});

样式属性定义与灵活运用

别忘了，s(style)是网站本身带有的样子，a(attr)则是你自由发挥添加的美感。利用字符串随便连一连，这些美学效果就出来了，想怎么调就怎么调！

gv.getView().addEventListener('mousemove', function(e) {
    var data = gv.getDataAt(e);//传入逻辑坐标点或者交互event事件参数，返回当前点下的图元
    if(name) {
        originNode(name);//不管什么时候都要让节点保持原来的大小
    }
    if (data instanceof ht.Polyline) {//判断事件节点的类型
        dm.sm().ss(data);//选中“管道”
        name = '';
        clearInterval(interval);
    }
    else if (data instanceof ht.Node) {
        if(data.getTag() !== name && data.a('tpNode')) {//若不是同一个节点，并且mousemove的事件对象为ht.Node类型，那么设置节点的旋转
            interval = setInterval(function() {
                data.setRotation(data.getRotation() - Math.PI/16); //在自身旋转的基础上再旋转
            }, 100);
        }
        if(data.a('npNode')) {//如果鼠标移到“小站点”也要停止动画
            clearInterval(interval);
        }
        expandNode(data, name);////自定义的放大节点函数，比较容易，我不粘代码了，可以去http://hightopo.com/   查看
        dm.sm().ss(data);//设置选中节点
        name = data.getTag();//作为“上一个节点”的存储变量，可以通过这个值来获取节点
    }
    else {//其他任何情况则不选中任何内容并且清除“换乘站点”上的动画
        dm.sm().ss(null);
        name = '';
        clearInterval(interval);
    }
});

节点动画效果设置

选好”站点”后，看到上头有个红色”呼吸”标志？这可是咱用HTML中的setAnimation函数搞出的。别忘了得先把数据库里的动画状态打开然后设定特效哈~

gv.enableToolTip();//打开 tooltip 的开关
if(num === '68') polyline.setToolTip('A P M');//设置提示信息 
else if(num === '60') polyline.setToolTip('G F'); 
else polyline.setToolTip('Line' + num);

这段文字讲的是，有人在网上看到那幅地铁线路图后，突发奇想，玩涂鸦，结果很成功，看起来有趣又有互动性。这里分享了他们是怎样做到的，还告诉如何提高地图的趣味性。