的初衷是为了模拟服务端-客户端的通信。我将整个需求简化为今天的例子。3D机房的模拟一般需要鹰眼的辅助，这样对产品的搜索和对整个空间的概览会更加清晰。在这个例子中，我也添加了它。这篇文章是我对这个项目的总结。.对了，这个例子是我参考了一个DEMO完成的，和例子中的显示有点出入，大家不要惊讶。范例链接：http://www.hightopo.com/guide...本文赠送：这个范例没有设计师的参与，大家就安于这种风格吧，不过我觉得还不错吧，哈哈~言归正传，整个例子用差不多200行代码实现，这也是我喜欢用HT的原因。现在Web3d技术兴起，大致分为两大派系：插件派和HTML5派。HT是基于HTML5的，不需要安装任何插件啊，扯远了。..首先，从场景的搭建开始。该接口在body中添加了三个部分：3d组件、property组件和topology组件（2d组件）。添加方式是这样的：为了方便加载最外层组件填充窗口，HT所有组件都有addToDOM函数，其实现逻辑如下，其中iv是invalidate的简写：addToDOM=function(){varself=this,view=self.getView(),style=view.style;document.body.appendChild(视图);style.left='0';style.right='0';style.top='0';样式.bottom='0';window.addEventListener('resize',function(){self.iv();},false);}因为这个函数固定了样式中的位置，所以所有的组件不能都使用这个函数，我们根据这个函数在界面中添加topology组件和property组件，3d组件可以直接使用addToDOM函数：dm=newht.DataModel();g3d=newht.graph3d.Graph3dView(dm);//3d组件g3d.addToDOM();//添加组件到bodyg3d.setDashDisabled(false);//启用虚线流g3d.setMovableFunc(function(){//重载移动函数returnfalse;//返回false，所有图元不可移动});g3d.setEye([-813,718,1530]);//设置眼睛g3d.setCenter([140,-25,217]);//设置中心(target)gv=newht.graph.GraphView(dm);//二维组件gv.getView().className='graphview';//HT组件的根层是一个div，通过getView()函数获取document.body.appendChild(gv.getView());//将拓扑组件添加到主体gv.fitContent(true);//缩放和平移整个拓扑以显示所有图元propertyView=newht.widget.PropertyView(dm);//属性组件propertyView.getView()。className='property';propertyView.setWidth(240);//设置组件宽度propertyView.setHeight(150);//高度document.body.appendChild(propertyView.getView());拓扑组件和属性组件的样式不再赘述，只设置背景颜色和左右上下位置。这里要声明一下，HT组件一般都是使用设置position为absolute的绝对定位方式。你可能想知道，这个鹰眼是怎么来的？在HT中，只要2D和3D共享同一个数据容器dataModel，就可以共享这个dataModel中的所有元素，位置都是对应的，就像这样：dm=newht.DataModel();g3d=newht.graph3d.Graph3dView(dm);gv=newht.graph.GraphView(dm);是不是很简单。..可以节省大量的开发时间。..本例中除了connection之外的所有元素都是ht.Node类型的节点，所以我们封装了这个节点的创建方法以便复用：functioncreateNode(p3,s3,name,shape){//CreateNodevarnode=newht.Node();//创建一个ht.Node类型的节点dm.add(node);//将节点添加到数据容器dataModelnode.s({//设置节点的样式，s是的缩写setStyle'shape3d':shape,//指定节点的形状，这里是传入3d模型的json文件'label.position':23,//文字显示位置'label.transparent':true,//是否文本在3d中是透明的可以消除字体周围的锯齿'label.color':'#eee',//文本颜色'label.t3':[0,0,-151],//文本在3d中的偏移'label.r3':[0,Math.PI,0],//文本在3d中的旋转'label.scale':2//文本缩放});node.r3(0,Math.PI,0);//节点旋转node.p3(p3);//设置节点在3d下的位置node.s3(s3);//设置节点在3d下的大小3dnode.setName(name);//设置节点的显示名称returnnode;//returnnode}和连接的创建：functioncreateEdge(exchange,service){//创建连接varedge=newht.Edge（交换，服务）；dm.add(edge);edge.s({'edge.width':4,//连线宽度'edge.color':'red',//连线颜色'edge.dash':true,//是否显示虚线'edge.dash.color':'黄色',//虚线颜色'edge.dash.pattern':[32,32],//默认虚线样式为[16,16]});edge.a({//用户自定义属性是setAttr的缩写'flow.enable':true,//是否开启flow'flow.direction':1,//direction'flow.step':4//步进});returnedge;}我们界面显示的连接都是虚线流，HT默认关闭虚线流功能，使用下面一句开启虚线流功能：g3d.setDashDisabled(false);//打开虚线流，我们还需要设置动画，控制时间间隔，让虚线偏移，形成“流”的状态。动画请参考调度手册：flowTask={interval:40,action:function(data){if(data.a('flow.enable')){data.s('edge.dash.offset',data.s('edge.dash.offset')+(data.a('flow.step')*data.a('flow.direction')));}}};dm.addScheduleTask(flowTask);//添加flowTask动画下面是所有出现在界面上的server和client节点声明，都是基于createNode和createEdge函数创建的：floor=createNode([0,5,0],[1000,10,500]);//floor元素floor.s({//设置元素s的样式为setStyle的缩写'all.color':'rgb(47,79,79)'//六面体的整体颜色});exchange=createNode([0,300,-400],[200,20,150],'H3C核心交换机','机型/机房/机柜相关/机柜设备6.json');//交换机//五具有不同功能的服务器service1=createNode([-400,140,0],[100,260,100],'Standby','models/机房/cabinet-related/cabinet2.json');service2=createNode([-200,140,0],[100,260,100],'网站','模型/机房/机柜相关/cabinet2.json');service3=createNode([0,140,0],[100,260,100],'OA','机型/机房/机柜相关/cabinet2.json');service4=createNode([200,140,0],[100,260,100],'广告','机型/机房/机柜相关/机柜2.json');service5=createNode([400,140,0],[100,260,100],'验收','机型/电脑room/cabinet-related/cabinet2.json');//创建交换机和服务器之间的连接(exchange,service5);//第二台交换机exchange2=createNode([-100,60,400],[200,20,150],'ProcurveSwitch2010-23交换机','机型/机房/机柜相关/机柜设备6.json').s('label.color','#000');createEdge(exchange2,service1);createEdge(exchange2,service2);createEdge(exchange2,service3);createEdge(exchange2,service4);createEdge(exchange2,service5);floor2=createNode([-100,5,800],[1000,10,500]);楼层2.s({'all.color':'rgb(47,79,79)'});device1=createNode([-400,20,650],[200,20,100],'VLS12000(top)','机型/机房/机柜相关/机柜设备6.json');device2=createNode([100,20,650],[200,20,100],'VLS12000(下)','机型/机房/cabinetRelated/cabinetequipment6.json');device3=createNode([-200,20,800],[200,20,100],'HPStrageWorks8/8SANSwitch(top)','models/computerroom/Cabinet-related/cabinetequipment6.json');device4=createNode([200,20,800],[200,20,100],'HPStrageWorks8/8SANSwitch(下)','models/机房/机柜相关/机柜设备6.json');device5=createNode([-300,20,950],[200,20,100],'EVA8400HSV450(top)','models/机房/机柜相关/机柜设备6.json');device6=createNode([100,20,950],[200,20,100],'EVA8400HSV450(下)','机型/机房/机柜相关/机柜设备6.json');createEdge(exchange2,device1);edge1=createEdge(exchange2,device2);createEdge(device1,device3);createEdge(device1,device4);createEdge(device2,device3);createEdge(device2,device4);createEdge(device3,device5);createEdge(device3,device6);createEdge(device4,device5);createEdge(device4,device6);dm.sm().ss(edge1);//设置edge1被选中。最后，您需要在属性栏中添加属性。这里我们只显示和调整“连接”的属性。5个属性，包括我通过setAttr自定义的属性flow.enable、flow.direction、flow.step和style属性edge.color和edge.dash.color（简称a）我们通过name属性结合accessType属性实现对Data节点的访问：//连接的属性edgeProperties=[{name:'flow.enable',//用于访问name属性accessType:'attr',//操作访问属性类型displayName:'EnableFlow',//用于访问属性名称的显示文本值，如果为空，则显示名称属性valueType:'boolean',//用于提示组件提供合适的renderer渲染，boolean类型，显示为复选框editable:true//设置属性是否可编辑},{name:'flow.direction',accessType:'attr',displayName:'FlowDirection',enum:{//enumerationtype属性传递数值和文字数组values:[-1,1],labels:['forwardflow','reverseflow']},editable:true},{name:'flow.step',displayName:'FlowStep',editable:true,accessType:'attr',slider:{//表单插件中的滑块，所以在ht-form.js中添加min:0,//最小值max:10,//最大值step:0.1//stepping}},{name:'edge.color',accessType:'style',displayName:'EdgeColor',editable:true,valueType:'color',//颜色类型，通过填充背景色显示colorPicker:{//颜色选择框instant:true//获取和设置是否为即时状态，默认为true，表示为表格和属性页编辑时，模型值会实时变化}},{name:'edge.dash.color',displayName:'DashColor',accessType:'style',valueType:'color',editable:true,colorPicker:{instant:true}}];propertyView.setEditable(true);//设置属性组件可编辑propertyView.addProperties(edgeProperties);//添加连接属性是不是很简单~来实践一下吧！
