html5地图连线原理,基于html5技术绘制上海地铁图 – 双车道路况信息

上海地铁图的绘制，最近有客户提出了新的需求：双车道，并显示路网状态信息。经过一番研究，在原地铁图基础上做了扩展实现

交通图介绍

路况状态在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

示例下载：路况图示例.zip