资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/基于 HTML5 Canvas 的交互式地铁线路图

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

zengdongbao / 3231人阅读

摘要：前言前两天在上寻找灵感的时候，看到了很多有关地图类似的例子，地图定位等等，但是好像就是没有地铁线路图，就自己花了一些时间捣鼓出来了这个交互式地铁线路图的，地铁线路上的点是在网上随便下载了一个，这篇文章记录自己的一些收获毕竟我还是个菜鸟以及代

前言

前两天在 echarts 上寻找灵感的时候，看到了很多有关地图类似的例子，地图定位等等，但是好像就是没有地铁线路图，就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo，地铁线路上的点是在网上随便下载了一个，这篇文章记录自己的一些收获（毕竟我还是个菜鸟）以及代码的实现，希望能够帮到一些朋友。当然，如果有什么意见的可以直接跟我说，大家一起交流才会进步。

效果图

form 表单的声明部分我好像还没有解释。。。就是通过 new 一个 ht.widget.FomePane 类创建一个 form 表单组件，通过 form.getView() 获取表单组件的底层 div，将这个 div 摆放在 body 右下角，然后通过 addRow 函数向 form 表单中添加一行的表单项，可以在这行中添加任意多个项，通过 addRow 函数的第二个参数（一个数组），对添加进的表单项进行宽度的设置，通过第三个参数设置这行的高度：

</>复制代码 
  1. function createForm() {//创建右下角的form表单
  2.     var form = new ht.widget.FormPane();
  3.     form.setWidth(200);//设置表单宽度
  4.     form.setHeight(416);//设置表单高度
  5.     let view = form.getView();
  6.     document.body.appendChild(view);//将表单添加进body中
  7.     view.style.zIndex = 1000;
  8.     view.style.bottom = "10px";//ht组件几乎都设置绝对路径
  9.     view.style.right = "10px";
  10.     view.style.background = "rgba(211, 211, 211, 0.8)";
  11.     names.forEach(function(nameString) {
  12.         form.addRow([//向表单中添加行
  13.             {//这一行中的第一个表单项
  14.                 button: {//向表单中添加button按钮
  15.                     icon: "images/Line"+nameString.value+".json",//设置按钮的图标
  16.                     background: "",//设置按钮的背景
  17.                     borderColor: "",//设置按钮的边框颜色
  18.                     clickable: false//设置按钮不可点击
  19.                 }
  20.             },
  21.             {//第二个表单项
  22.                 button: {
  23.                     label: nameString.name,
  24.                     labelFont: "bold 14px arial, sans-serif",
  25.                     labelColor: "#fff",
  26.                     background: "",
  27.                     borderColor: "",
  28.                     onClicked: function() {//按钮点击回调事件
  29.                         gv.sm().ss(dm.getDataByTag(nameString.value));//设置选中按下的按钮对应的线路
  30.                         gv.fitData(gv.sm().ld(), true, 5);//将选中的地铁线路显示在拓扑图的中央
  31.                     }
  32.                 }
  33.             }
  34.         ], [0.1, 0.2], 23);//第二个参数是设置第一参数中的数组的宽度，小于1是比例，大于1是实际宽度。第三个参数是该行的高度
  35.     });
  36. }

单击“站点”显示红色标注，双击节点自适应放置到拓扑图中央以及双击空白处将红色标注隐藏的内容都是通过对拓扑组件 gv 的事件监听来控制的，非常清晰易懂，代码如下：

</>复制代码 
  1. var node = createRedLight();//创建一个新的节点，显示为“红灯”的样式
  2. gv.mi(function(e) {//ht 中拓扑组件中的事件监听
  3.     if(e.kind === "clickData" && (e.data.a("tpNode") || e.data.a("npNode"))) {//e.kind获取当前事件类型，e.data获取当前事件下的节点
  4.         node.s("2d.visible", true);//设置node节点可见
  5.         node.setPosition(e.data.getPosition().x, e.data.getPosition().y);//设置node的坐标为当前事件下节点的位置
  6.     }
  7.     else if(e.kind === "doubleClickData") {//双击节点
  8.         gv.fitData(e.data, false, 10);//将事件下的节点自适应到拓扑图的中央，参数1为自适应的节点，参数2为是否动画，参数3为gv与边框的padding
  9.     }
  10.     else if(e.kind === "doubleClickBackground") {//双击空白处
  11.         node.s("2d.visible", false);//设置node节点不可见 查看 HT for Web 样式手册（http://www.hightopo.com/guide/guide/core/theme/ht-theme-guide.html#ref_style）
  12.     }
  13. });

注意 s（style） 和 a（attr） 定义是这样的，s 是 ht 预定义的一些样式属性，而 a 是我们用户来自定义的属性，一般是通过调用字符串来调用结果的，这个字符串对应的可以是常量也可以是函数，还是很灵活的。

最后还做了一个小小的部分，选中“站点”，则该“站点”的上方会显示一个红色的会“呼吸”的用来注明当前选中的“站点”。

阅读需要支付1元查看
<