基于HTML5Canvas实现的交互式地铁线路图_前端画地铁线路图

canvas

html5

64 浏览量更新于2023-03-03 评论 2 收藏 298KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

前言前言

前两天在 echarts 上寻找灵感的时候，看到了很多有关地图类似的例子，地图定位等等，但是好像就是没有地铁线路图，就自己花了一些时间捣鼓出来了这个交互

式地铁线路图的 Demo，地铁线路上的点是在网上随便下载了一个，这篇文章记录自己的一些收获（毕竟我还是个菜鸟）以及代码的实现，希望能够帮到一些朋

友。当然，如果有什么意见的可以直接跟我说，大家一起交流才会进步。

效果图

http://www.hightopo.com/demo/subway/index.html

地图稍微内容有点多，要全部展示，字显得有点小了，但是没关系，可以按照需求放大缩小，字体和绘制的内容并不会失真，毕竟都是用矢量绘制的~

界面生成界面生成

底层的 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//设置选中节点的边框颜色

});

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38529951

粉丝: 6
资源: 882

会员权益专享

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

评论0

会员权益专享

最新资源

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

评论0

js点击绘制地铁线路图地铁站（可自定义颜色）百度map_subway line

广州精细地铁线路图（轨迹图）可视化.py

地铁、地图上下左右移动图 放大放小

html交互式添加线要素,HTML5 Canvas绘制交互式交叉线

Html5 canvas全景交互

canvas实现类CAD的交互式命令系统

请编写基于h5开发图件交互式查看技术方案

canvas中的交互式

html制作北京地铁线路图

html canvas 开发工具

HTML5绘制一个3D立方体,HTML5/Canvas交互式3D立方体

html5 canvas 开发详解 pdf

基于html5 canvas的t恤、箱包、礼品定制等设计组件

html5 抽奖效果,基于HTML5 canvas的简单抽奖轮盘

uniapp h5 html2canvas

html5 canvas 遮罩,HTML5 Canvas视频背景+图片透明遮掩层

html使用canvas实现图文混排，

html2canvas实现截图功能

htmlcanvas 实现下载

基于html5 canvas的一个日期时间控件、日期选择器

会员权益专享

最新资源

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

地铁、地图上下左右移动图放大放小