基于 HTML5 Canvas实现 的交互式地铁线路图

前两天在 echarts 上探求灵感的时辰，看到了许多有关舆图相同的例子，舆图定位等等，可是仿佛就是没有地铁线路图，就本身花了一些时刻捣鼓出来了这个交互式地铁线路图的 Demo，地铁线路上的点是在网上任意下载了一个，这篇文章记录本身的一些收成（事实我照旧个菜鸟）以及代码的实现，但愿可以或许帮到一些伴侣。虽然，假若有什么意见的可以直接跟我说，各人一路交换才会前进。

结果图

舆图轻微内容有点多，要所有展示，字显得有点小了，可是不要紧，可以凭证需求放大缩小，字体和绘制的内容并不会失真，事实都是用矢量绘制的~

界面天生

底层的 div 是通过 ht.graph.GraphView 组件天生的，然后就可以操作 HT for Web 提供好的要领，挪用 canvas 画笔任意绘制就好，先来看看怎么天生底层 div：
 

var dm = new ht.DataModel();//数据容器 var gv = new ht.graph.GraphView(dm);//拓扑组件 gv.addToDOM();//将拓扑图组件添加进body中

addToDOM 函数声明如下：

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); //窗口变革变乱 }

此刻我就可以在这个 div 上乱涂乱画了~起首我获取下载好的地铁线路图上的点，我将它们放在 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]});

接下来来描画地铁线路，我声明白一个数组 lineNum，用来装 js 中全部的地铁线路的编号，以及一个 color 数组，用来装全部的地铁线的颜色，这些颜色的 index 与 lineNum 中地铁线编号的 index 是逐一对应的：

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，将 lineNum 中的元素和颜色传到 createLine 函数中，按照这两个参数来绘制地铁线路以及配色，事实 js 文件中的定名方法也是有纪律的，哪一条线路，则定名后头必然会加上对应的数字，以是我们只必要将字符串与这个编号团结即可得到 js 中对应的数组了：

let lineName = 'Line' + num; let line = window[lineName]; createLine 的界说也很是简朴，我的代码配置了不少的样式，以是看起来有点多。建设一个 ht.Polyline 管线，我们可以通过 polyline.addPoint() 函数向这个变量中添加详细的点，通过 setSegments 可以配置点的毗连方法。 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; }

上面代码中添加地铁线上的点有分为几种环境，是由于 js 中配置线的时辰 Line68 有一个“跳跃”点的征象，以是我们必需“跳跃”已往，篇幅有限 Line68 数组详细的声明自行看 subway.js。

这里声名一点，假如用的是 addPoint 函数，不配置 segments 时，默认将添加进的点用直线毗连，segments 的界说如下：

1： moveTo，占用 1 个点信息，代表一个新路径的出发点
 

2： lineTo，占用 1 个点信息，代表以前次最后点毗连到该点
 

3： quadraticCurveTo，占用 2 个点信息，第一个点作为曲线节制点，第二个点作为曲线竣事点
 

4： bezierCurveTo，占用 3 个点信息，第一和第二个点作为曲线节制点，第三个点作为曲线竣事点
 

5： closePath，不占用点信息，代表本次路径绘制竣事，并闭合到路径的起始点

以是我们要做“跳跃”的举动配置 segments 为 1 即可。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!