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

gv.enableToolTip();//打开 tooltip 的开关 if(num === '68') polyline.setToolTip('A P M');//设置提示信息 else if(num === '60') polyline.setToolTip('G F'); else polyline.setToolTip('Line' + num);

然后我利用右下角的 form 表单，单击表单上的具体线路，或者双击拓扑图上任意一个“站点”或者线路，则拓扑图会自适应到对应的部分，将被双击的部分展现到拓扑图的中央。

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

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

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

（编辑：西安站长网）

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