轻量高效的拓扑图组件
zh

基于html5技术绘制上海地铁图 - 双车道路况信息

2014-05-13

前面介绍了上海地铁图的绘制,最近有客户提出了新的需求:双车道,并显示路网状态信息。经过一番研究,在原地铁图基础上做了扩展实现 Screen Shot 2014-05-13 at 下午12.27.30

交通图介绍

路况状态在GIS系统中广泛应用,谷歌地图,百度地图都有实时路况的功能,太复杂并非好事,就像地铁图,按真实经纬度呈现反而不够直观,交通图、路网也是如此,去掉无关信息,将有限的数据(路,收费站,路况)展现出来,成为一种解决方案

百度地图中的路况信息 百度地图-路况信息

双车道的绘制

来看具体实现,原来的地铁图是一条线表示,改用双线绘制,可表现来往的方向,canvas并没有双线线形,需要自己实现

三种连接点类型

双线的算法类似2d中的stroke算法,stroke拐点有三种方式:尖的、圆角、斜面,考虑到路网拐角不会太尖,所以简单实现,采用miter方式,沿线各个拐点左右偏移 拐点的三种样式

绘制双车道,计算拐点的法线和夹角

function drawDoubleLine(path, points, isDoubleLine, size, lineDirection) {
    var p0, p1;
    Q.forEach(points, function (p) {
        if (!p1) {
            p1 = p;
            return;
        }
        p1._a = Math.atan2(p.y - p1.y, p.x - p1.x);
        if (p0) {
            p1.angle = Math.atan2(Math.sin(p0._a) + Math.sin(p1._a), Math.cos(p0._a) + Math.cos(p1._a));
            p1.angle -= Math.PI / 2;
            var theta = Math.abs(p1._a - p0._a);
            if (theta > Math.PI) {
                theta = 2 \* Math.PI - theta;
            }
            p1.inclinedAngle = Math.PI - theta;
        } else {
            p1.angle = p1._a - Math.PI / 2;
        }
        p0 = p1;
        p1 = p;
    });
    p1.angle = Math.atan2(p1.y - p0.y, p1.x - p0.x) - Math.PI / 2;
    if (lineDirection == "left") {
        drawLine(path, points, 0.5, size);
        return;
    }
    if (lineDirection == "right") {
        drawLine(path, points, -0.5, size);
        return;
    }
    if (!isDoubleLine) {
        drawLine(path, points, 0, size);
        return;
    }
    drawLine(path, points, 0.5, size);
    drawLine(path, points, -0.5, size);
}

绘制连线

function drawLine(path, points, yOffset, size, doubleLine) {
    Q.forEach(points, function (p, index) {
        var angle = p.angle;
        var inclinedAngle = p.inclinedAngle;
        var x = p.x, y = p.y;
        var offset = yOffset;
        if (offset) {
            offset \*= 2 / 3 \* 0.8;
        }
        if (p.yOffset) {
            offset += p.yOffset;
        }
        if (offset) {
            offset \*= size;
            if (inclinedAngle) {
                offset /= Math.max(0.2, Math.sin(inclinedAngle / 2));
            }
            var sin = Math.sin(angle);
            var cos = Math.cos(angle);
            x += cos \* offset;
            y += sin \* offset;
        }
        if (index == 0) {
            path.moveTo(x, y);
        } else {
            path.lineTo(x, y);
        }
    });
}

双车道呈现效果

双车道

路况状态绘制

路况状态也是呈线条状,与路网绘制相同,只不过为单向,还是上面的绘制函数,参数lineDirection表示车道方向,左侧车道偏移50%,右侧则偏移-50%,这样可以实现两侧不同的状态

function drawDoubleLine(path, points, isDoubleLine, size, lineDirection) {
    ...
    if (lineDirection == "left") {
        drawLine(path, points, 0.5, size);
        return;
    }
    if (lineDirection == "right") {
        drawLine(path, points, -0.5, size);
        return;
    }
    ...
}

路况模拟数据

与原来的例子相同,路况信息也可以通过JSON数据加载,整个为一个array,集合中每个元素为一条路的路况片段信息,“line"属性表示所在路线的编号,“fragments"表示路况片段集合,每个片段包含三个属性,与路线的json表示相同,只不过增加了"direction"属性,表示片段的方向

[{
    "line": "11",
    "fragments": [
        {
            "color": "#FF0000",
            "direction": "right",
            "stations": [230, 231, 232]
        },
        {
            "color": "#FFFF00",
            "direction": "left",
            "stations": [229, 230, 231, 232]
        },
        {
            "color": "#00FF00",
            "direction": "left",
            "stations": [227, 228, 229]
        }
    ]
}]

路况运行效果

上面11号线上的模拟数据,得到下面的效果 路况片段的绘制

在线演示

在线演示:[http://demo.qunee.com/#Shanghai Metro Map 2012](http://demo.qunee.com/#Shanghai Metro Map 2012) 示例下载:路况图示例.zip 原文地址:http://blog.qunee.com/?p=4594

Next Prev