前言近年来，互联网与交通的融合改变了交易模式，影响了交通组织和运营模式，改变了交通主体的市场结构，模糊了交通运输的市场格局。经营与非经营的界限也更好地实现了交通资源的集约共享，同时也为更多地依靠外部力量和企业推进交通信息化提供了可能。互联网流量潜力巨大、发展迅速、生态广阔。要求政府顺应潮流，紧跟发展趋势，加强引导，转变职能，创新政府管理和市场监管模式。城市轨道交通投资体量巨大，一条线路动辄上百亿元。如何确保投资收益，提高投资管理的准确性和可控性是当务之急。引入“互联网+”思想，发展基于“互联网+”的城市轨道交通系统。本文在分析投资管理中存在问题的基础上，对系统的应用特点和主要功能进行了深入的描述，旨在完善系统的功能布局和用户体验。http://www.hightopo.com/demo/...代码实现场景搭建我们先来搭建基础场景，因为这个场景是在2D的基础上实现的，所以需要用到拓扑组件ht.graph.GraphView构建基础场景：dataModel=newht.DataModel();//存放数据节点的数据容器graphView=newht.graph.GraphView(dataModel);//拓扑组件graphView.addToDOM();//添加拓扑组件添加到正文上面代码中出现的addToDOM方法会将构建添加到DOM的正文。HT（https://hightopo.com）组件一般嵌入在BorderPane、SplitView和TabView（均为HT组件）容器中，而最外层的HT组件需要用户手动将getView()返回的底层div元素添加到DOM中页面的元素。这里需要注意的是，当父容器的尺寸变化时，如果父容器为BorderPane和SplitView等这些HT预定义的容器组件，HT容器会自动递归调用子组件的invalidate函数来通知更新.但是如果父容器是原生的html元素，HT组件无法知道它需要更新，所以最外层的HT组件一般需要监听window的窗口大小变化事件，调用最外层组件的invalidate函数来更新。为了方便加载最外层组件填充窗口，HT所有组件都有addToDOM函数，其实现逻辑如下，其中iv是invalidate的缩写：addToDOM=function(){varself=this,view=self.getView(),//获取组件底层divstyle=view.style;document.body.appendChild(view);//将组件底层div添加到body中style.left='0';//ht默认为所有组件的positions都设置为absolute绝对定位style.right='0';style.top='0';style.bottom='0';window.addEventListener('resize',function(){self.iv();},false);//窗口大小变化事件，调用刷新函数}场景导入在HT中，常用的方法是将场景导入到内部就是解析JSON文件。使用JSON文件构建场景的好处之一就是可以循环使用，而我们今天的场景就是使用JSON绘制的。接下来HT会使用ht.Default.xhrLoad函数加载JSON场景，使用HT封装的DataModel.deserialize(json)进行反序列化（http://hightopo.com/guide/gui...），以及反序列化序列化对象被添加到DataModel：ht.Default.xhrLoad('demo2.json',function(text){varjson=ht.Default.parse(text);if(json.title)document.title=json.title;//将json文件中的title赋值给全局变量titledataModel.deserialize(json);//反序列化graphView.fitContent(true);//缩放和平移拓扑显示所有图元素，即让所有元素被显示出来});在HT中，构造Data类型对象时，会自动为其分配一个id属性，可以通过data.getId()和data.setId(id)获取和设置。Data对象加入DataModel后，不允许修改id值，可以通过dataModel.getDataById(id)快速找到Data对象。但一般建议id属性由HT自动分配，用户业务意义的唯一标识可以存储在tag属性上。Data#setTag(tag)函数允许任意动态改变tag值，通过DataModel#getDataByTag(tag)对象可以找到对应的Data，支持通过DataModel#removeDataByTag(tag)删除Data对象。这里我们设置了JSON中Data对象的tag属性，代码中通过dataModel.getDataByTag(tag)函数获取Data对象：{"c":"ht.Block","i":3849,"p":{"displayName":"Fan1","tag":"fan1","position":{"x":491.24174,"y":320.88985},"width":62,"height":62}}varfan1=dataModel.getDataByTag('fan1');varfan2=dataModel.getDataByTag('fan2');varcamera1=dataModel.getDataByTag('camera1');varcamera2=dataModel.getDataByTag('camera2');varcamera3=dataModel.getDataByTag('camera3');varredAlarm=dataModel.getDataByTag('redAlarm');varyellowAlarm=dataModel.getDataByTag('yellowAlarm');我做了下图每个标签对应的元素：animation然后我们设置需要旋转和闪烁的对象，HT封装了setRotation(rotation)函数用于“旋转”。通过获取物体当前的旋转角度，在这个角度的基础上加上一定的弧度，通过setInterval定时调用。您可以在特定时间间隔内旋转相同的弧：setInterval(function(){vartime=newDate().getTime();vardeltaTime=time-lastTime;vardeltaRotation=deltaTime*Math.PI/180*0.1;最后时间=时间e;fan1.setRotation(fan1.getRotation()+deltaRotation*3);fan2.setRotation(fan2.getRotation()+deltaRotation*3);camera1.setRotation(camera1.getRotation()+deltaRotation/3);camera2.setRotation(camera2.getRotation()+deltaRotation/3);camera3.setRotation(camera3.getRotation()+deltaRotation/3);如果（时间-楼梯时间>500）{楼梯索引--;如果(stairIndex<0){stairIndex=8;}楼梯时间=时间；}for(vari=0;i<8;i++){//因为有一些相似的元素，所以我们设置的标签名也相似，只是后面改成了1,2,3，所以我们得到varcolor=stairlyIndex===i通过for循环？'#F6A623':'#CFCFCF';dataModel.getDataByTag('stair_1_'+i).s('shape.border.color',color);数据模型。getDataByTag('stair_2_'+i).s('shape.border.color',颜色);}if(newDate().getSeconds()%2===1){yellowAlarm.s('shape.background',null);redAlarm.s('shape.background',null);}else{yellowAlarm.s('shape.background','黄色');redAlarm.s('shape.background','red');}},5);当然，通过HT封装的动画操作还是可以的，不过这里一次性喂的不多，有兴趣的可以阅读https://www.cnblogs.com/xhloa...和我发表的其他文章。HT还封装了setStyle函数来设置样式，可以简写为s。具体样式可以参考HTforWebStyle手册(http://hightopo.com/guide/gui...):for(vari=0;i<8;i++){//因为有一些类似的元素，我们设置的标签名都差不多，只是后面改成了1、2、3，所以我们用for循环得到varcolor=stairlyIndex===i?'#F6A623':'#CFCFCF';dataModel.getDataByTag('stair_1_'+i).s('shape.border.color',color);dataModel.getDataByTag('stair_2_'+i).s('shape.border.color',color);}我们还有一个定时控制“警示灯”的闪烁，如果是偶数秒，设置灯的背景颜色为“无色”，否则，如果是黄色报警，则设置为“黄色”，如果是红色报警，则设置为“红色”：if(newDate().getSeconds()%2===1){yellowAlarm.s('shape.background',null);redAlarm.s('shape.background',null);}else{yellowAlarm.s('shape.background','yellow');redAlarm.s('shape.background','red');}概要2015年3月，李克强总理在政府工作报告中首次提出“互联网+”行动计划。随后，国务院出台《关于积极推进“互联网+”行动的指导意见》，推动互联网从消费领域向生产领域拓展，从而进一步提升产业发展水平，增强行业创新能力。“互联网+”背景下，城市轨道交通行业应紧跟时代潮流，将“互联网+”思维引入项目投资管理，开发基于“互联网+”的城市轨道交通项目投资管理体系，从而以完善成本管理系统的功能布局和用户体验。“互联网+”通过跨界跨界寻找互联网与城市轨道交通项目的关联，将传统行业的数据信息化，对原有有限的数据进行升级、分析和传递，有利于“乘数”互联网+”效应，显着提高工程投资管理数据的实时动态性和完整性和准确性。https://hightopo.com/demo/met...https://hightopo.com/demo/lar...
