基于H5 Canvas的交互式地铁路线图_前端开发者

 前端开发者丨HTML5

https://www.rokub.com

效果图http://www.hightopo.com/demo/subway/index.html 地图稍微内容有点多,要全部展示,字显得有点小了,但是没关系,可以按照需求放大缩小,字体和绘制的内容并不会失真,毕竟都是用矢量绘制的~界面生成底层的div是通过ht.graph.GraphView组件生成的,然后就可以利用HTforWeb提供好的方法,调用canvas画笔随便绘制就好,先来看看怎么生成底层div:

var dm = newht.DataModel();//数据容器

var gv = newht.graph.GraphView(dm);//拓扑组件gv.addToDOM();//将拓扑图组件添加进body中123

var dm=newht.DataModel();//数据容器

var gv=newht.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);//窗口变化事件}1234567891011addToDOM=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]});1234567mark_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'];12

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中对应的数组了:letlineName='Line'+num;letline=window[lineName];12letlineName='Line'+num;letline=window[lineName];createLine的定义也非常简单,我的代码设置了不少的样式,所以看起来有点多。创建一个ht.Polyline管线,我们可以通过polyline.addPoint()函数向这个变量中添加具体的点,通过setSegments可以设置点的连接方式。functioncreateLine(num,color){//绘制地图线

var polyline=newht.Polyline();//多边形管线polyline.setTag(num);//设置节点tag标签,作为唯一标示if(num==='68')polyline.setToolTip('APM');//设置提示信息elseif(num==='60')polyline.setToolTip('GF');elsepolyline.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//设置选中节点的边框颜色});}letlineName='Line'+num;letline=window[lineName];for(leti=0;ivar polyline=newht.Polyline();//多边形管线polyline.setTag(num);//设置节点tag标签,作为唯一标示if(num==='68')polyline.setToolTip('APM');//设置提示信息elseif(num==='60')polyline.setToolTip('GF');elsepolyline.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//设置选中节点的边框颜色});}letlineName='Line'+num;letline=window[lineName];for(leti=0;ivar tName='t_Point'+num;

var tP=window[tName];//大站点if(tP){//有些线路没有“换乘站点”for(leti=0;ivar tName='t_Point'+num;

var tP=window[tName];//大站点if(tP){//有些线路没有“换乘站点”for(leti=0;ivar data=gv.getDataAt(e);//传入逻辑坐标点或者交互event事件参数,返回当前点下的图元if(name){originNode(name);//不管什么时候都要让节点保持原来的大小}if(datainstanceofht.Polyline){//判断事件节点的类型dm.sm().ss(data);//选中“管道”name='';clearInterval(interval);}elseif(datainstanceofht.node){if(data.getTag()!==name&&data.a('tpNode')){//若不是同一个节点,并且mousemove的事件对象为ht.node类型,那么设置节点的旋转interval=setInterval(function(){data.setRotation(data.getRotation()-Math.PI/16);//在自身旋转的基础上再旋转},100);}if(data.a('npNode')){//如果鼠标移到“小站点”也要停止动画clearInterval(interval);}expandNode(data,name);////自定义的放大节点函数,比较容易,我不粘代码了,可以去http://hightopo.com/查看dm.sm().ss(data);//设置选中节点name=data.getTag();//作为“上一个节点”的存储变量,可以通过这个值来获取节点}else{//其他任何情况则不选中任何内容并且清除“换乘站点”上的动画dm.sm().ss(null);name='';clearInterval(interval);}});123456789101112131415161718192021222324252627282930gv.getView().addEventListener('mousemove',function(e){

var data=gv.getDataAt(e);//传入逻辑坐标点或者交互event事件参数,返回当前点下的图元if(name){originNode(name);//不管什么时候都要让节点保持原来的大小}if(datainstanceofht.Polyline){//判断事件节点的类型dm.sm().ss(data);//选中“管道”name='';clearInterval(interval);}elseif(datainstanceofht.node){if(data.getTag()!==name&&data.a('tpNode')){//若不是同一个节点,并且mousemove的事件对象为ht.node类型,那么设置节点的旋转interval=setInterval(function(){data.setRotation(data.getRotation()-Math.PI/16);//在自身旋转的基础上再旋转},100);}if(data.a('npNode')){//如果鼠标移到“小站点”也要停止动画clearInterval(interval);}expandNode(data,name);////自定义的放大节点函数,比较容易,我不粘代码了,可以去http://hightopo.com/查看dm.sm().ss(data);//设置选中节点name=data.getTag();//作为“上一个节点”的存储变量,可以通过这个值来获取节点}else{//其他任何情况则不选中任何内容并且清除“换乘站点”上的动画dm.sm().ss(null);name='';clearInterval(interval);}});鼠标悬停在地铁线路上时显示“具体线路信息”,我是通过设置tooltip来完成的(注意:要打开gv的tooltip开关):gv.enableToolTip();//打开tooltip的开关if(num==='68')polyline.setToolTip('APM');//设置提示信息elseif(num==='60')polyline.setToolTip('GF');elsepolyline.setToolTip('Line'+num);1234gv.enableToolTip();//打开tooltip的开关if(num==='68')polyline.setToolTip('APM');//设置提示信息elseif(num==='60')polyline.setToolTip('GF');elsepolyline.setToolTip('Line'+num);然后我利用右下角的form表单,单击表单上的具体线路,或者双击拓扑图上任意一个“站点”或者线路,则拓扑图会自适应到对应的部分,将被双击的部分展现到拓扑图的中央。", "flag":0, "Article_Keyword":0, "Article_Keywords":0, "Article_Keywords_3":0 }


前端开发者丨HTML5

https://www.rokub.com
» 本文来自:前端开发者 » 《基于H5 Canvas的交互式地铁路线图_前端开发者》
» 本文链接地址:https://www.rokub.com/244.html
» 您也可以订阅本站:https://www.rokub.com
赞(1)
64K

评论 抢沙发

评论前必须登录!