怎么用网站做word文件格式,招商网站大全免费,58好项目网,包装公司网站模板下载超图iClient3DforCesium地形、影像、模型、在线影像交互示例 描述示例代码 描述 数据源#xff1a;基于iserver发布的三维场景(地形、影像、BIM模型) 在线arcgis影像 应用#xff1a;目录树展示源数据列表、目录树控制源数据可视化结果显隐、BIM模型点选查询关联属性 示例代… 超图iClient3DforCesium地形、影像、模型、在线影像交互示例 描述示例代码 描述 数据源基于iserver发布的三维场景(地形、影像、BIM模型) 在线arcgis影像 应用目录树展示源数据列表、目录树控制源数据可视化结果显隐、BIM模型点选查询关联属性 示例代码 !DOCTYPE html html langenheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEEdge,chrome1meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, minimum-scale1, user-scalablenotitle模型交互示例/titlelink href../../Build/Cesium/Widgets/widgets.css relstylesheetlink href./css/pretty.css relstylesheetscript src./js/jquery.min.js/scriptscript src./js/config.js/scriptscript src./js/bootstrap.min.js/scriptscript src./js/bootstrap-select.min.js/scriptscript src./js/bootstrap-treeview.js/scriptscript src./js/spectrum.js/scriptscript typetext/javascript src../../Build/Cesium/Cesium.js/script/headbodydiv idcesiumContainer/divdiv idtool-menu classtool-menua data-toggledropdown idlayerMangerBtn title图层管理 classtool-menu-btn tool-menu-btn-inversespan classsmicon-layerlist tool-menu-btn-icon/spandiv classdropDown-container treeview-dropDown-container idtreeContainerdiv idlayerTree/div/div/a/divdiv idbubble classbubble stylebottom:0;left:82%;display:none; div idtools styletext-align : rightspan stylecolor: rgb(95, 74, 121);padding: 5px;position: absolute;left: 10px;top: 4px;对象属性/spanspan classfui-export idbubblePosition stylecolor: darkgrey; padding:5px title停靠/spanspan classfui-cross title关闭 idclose stylecolor: darkgrey;padding:5px/span/divdiv styleoverflow-y:scroll;height:150px idtableContainertable idtab/table/div/div script typetext/javascriptfunction onload(Cesium) {// 初始化viewer部件var viewer new Cesium.Viewer(cesiumContainer);var scene viewer.scene;var widget viewer.cesiumWidget;// 场景光照scene.lightSource.ambientLightColor new Cesium.Color(0.65, 0.65, 0.65, 1); // 添加在线影像服务 let onlineImageries []; // 在线影像资源对象管理var arcgisonline viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({url: https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer}), 2);onlineImageries.push({name: arcgis-L17, provider: arcgisonline});// 对象属性展示载体 var infoboxContainer document.getElementById(bubble);viewer.customInfobox infoboxContainer;// 添加场景服务// 场景服务-界面管理图层数组let loadedLayers [];try {var promise scene.open(isever服务地址/iserver/services/3D-publish-workspace/rest/realspace);Cesium.when(promise, function(layers) {// 设置相机位置、方向定位至模型// 可以先不设置 待第一次渲染的时候 使用console.log()打印出相关参数 来填充此设置//scene.camera.setView({// destination : new Cesium.Cartesian3(-2180753.065987198,4379023.266141494,4092583.575045952),// orientation : {// heading : 4.0392222751147955,// pitch :0.010279641987852584,// roll : 1.240962888005015e-11// }//}); // 界面图层管理树形菜单控件// 初始化树形目录var $tree $(#layerTree).treeview({data: [{text:图层目录, selectable:false}],showIcon: true,showCheckbox: true,backColor: transparent,color: #fff,// 通过NodeChecked状态设置子图层的显示与隐藏的切换onNodeChecked: function(evt, node) {// 判断是否选中图层管理节点if (node.text 模型图层包) {// 模型图层的父节点 所有模型图层显隐for (var i 0; i loadedLayers.length; i) {if (loadedLayers[i].type model) {loadedLayers[i].source.visible true;}}return;} else if (node.text 地形图层包) {// 地形图层的父节点 所有地形图层显隐for (var i 0; i loadedLayers.length; i) {if (loadedLayers[i].type terrain) {viewer.terrainProvider loadedLayers[i].source;}}return;} else if (node.text 影像图层包) {// 影像图层的父节点 所有影像图层显隐for (var i 0; i loadedLayers.length; i) {if (loadedLayers[i].type imagery || loadedLayers[i].type imagery-online) {loadedLayers[i].source.show true;}}return;} else if (node.text 图层目录) {for (var i 0; i loadedLayers.length; i) { if (loadedLayers[i].type model) {loadedLayers[i].source.visible true;} else if (loadedLayers[i].type terrain) {viewer.terrainProvider loadedLayers[i].source;} else {loadedLayers[i].source.show true;}}return;}// 判断是否是模型图层// 先判断是否选中图层的子图层内容var opLayerIndex -1;var ids [];for (var i 0; i loadedLayers.length; i) {// 先判断是否选中了子图层内容if (loadedLayers[i].type model) {// 只有模型节点存在子图层内容for (var j 0; j loadedLayers[i].nodes.length; j) {if (loadedLayers[i].nodes[j].name node.text) {opLayerIndex i;ids range(loadedLayers[i].nodes[j].source.startID, loadedLayers[i].nodes[j].source.endID);break;}}}if (opLayerIndex ! -1) {break;}// 再判断是否选中的是图层节点本省if (loadedLayers[i].name node.text) {opLayerIndex i;break;}}if (ids.length 0) {// 设置子图层id对应的内容显隐loadedLayers[opLayerIndex].source.setOnlyObjsVisible(ids,true);} else if (opLayerIndex ! -1) {// 图层节点本身if (loadedLayers[opLayerIndex].type model) {// 模型图层loadedLayers[opLayerIndex].source.visible true;} else if (loadedLayers[opLayerIndex].type terrain) {// 地形图层viewer.terrainProvider loadedLayers[opLayerIndex].source;} else {// 影像图层loadedLayers[opLayerIndex].source.show true;}}},onNodeUnchecked: function(evt, node) {// 判断是否选中图层管理节点if (node.text 模型图层包) {// 模型图层的父节点 所有模型图层显隐for (var i 0; i loadedLayers.length; i) {if (loadedLayers[i].type model) {loadedLayers[i].source.visible false;}}return;} else if (node.text 地形图层包) {// 地形图层的父节点 所有地形图层显隐for (var i 0; i loadedLayers.length; i) {if (loadedLayers[i].type terrain) {viewer.terrainProvider new Cesium.EllipsoidTerrainProvider({}); // 空地形}}return;} else if (node.text 影像图层包) {// 影像图层的父节点 所有影像图层显隐for (var i 0; i loadedLayers.length; i) {if (loadedLayers[i].type imagery || loadedLayers[i].type imagery-online) {loadedLayers[i].source.show false;}}return;} else if (node.text 图层目录) {for (var i 0; i loadedLayers.length; i) { if (loadedLayers[i].type model) {loadedLayers[i].source.visible false;} else if (loadedLayers[i].type terrain) {viewer.terrainProvider new Cesium.EllipsoidTerrainProvider({}); // 空地形} else {loadedLayers[i].source.show false;}}return;}// 判断是否是模型图层// 先判断是否选中图层的子图层内容var opLayerIndex -1;var ids [];for (var i 0; i loadedLayers.length; i) {// 先判断是否选中了子图层内容if (loadedLayers[i].type model) {// 只有模型节点存在子图层内容for (var j 0; j loadedLayers[i].nodes.length; j) {if (loadedLayers[i].nodes[j].name node.text) {opLayerIndex i;ids range(loadedLayers[i].nodes[j].source.startID, loadedLayers[i].nodes[j].source.endID);break;}}}if (opLayerIndex ! -1) {break;}// 再判断是否选中的是图层节点本省if (loadedLayers[i].name node.text) {opLayerIndex i;break;}}if (ids.length 0) {// 设置子图层id对应的内容显隐loadedLayers[opLayerIndex].source.setOnlyObjsVisible(ids,false);} else if (opLayerIndex ! -1) {// 图层节点本身if (loadedLayers[opLayerIndex].type model) {// 模型图层loadedLayers[opLayerIndex].source.visible false;} else if (loadedLayers[opLayerIndex].type terrain) {// 地形图层viewer.terrainProvider new Cesium.EllipsoidTerrainProvider({}); // 空地形} else {// 影像图层loadedLayers[opLayerIndex].source.show false;}}},onNodeSelected: function(evt, node) {// 模型节点子图层选中时 模型渲染状态var opLayerIndex -1;var ids [];for (var i 0; i loadedLayers.length; i) {// 先判断是否选中了子图层内容if (loadedLayers[i].type model) {// 只有模型节点存在子图层内容for (var j 0; j loadedLayers[i].nodes.length; j) {if (loadedLayers[i].nodes[j].name node.text) {opLayerIndex i;ids range(loadedLayers[i].nodes[j].source.startID, loadedLayers[i].nodes[j].source.endID);break;}}}if (ids.length 0) {break;}}if (ids.length 0) {loadedLayers[opLayerIndex].source.releaseSelection();loadedLayers[opLayerIndex].source.setSelection(ids);} else {loadedLayers[opLayerIndex].source.removeAllObjsColor();}}});// 树形目录根节点var rootNode $tree.treeview(getNode, 0);// 属性目录分成三类子节点:// 第一类: 模型节点var modelNode $tree.treeview(addNode, [rootNode, {text:模型图层包, showDel: true, fontSize: 10pt,state: {checked: true}}]);// 第二类: 地形节点var terrainNode $tree.treeview(addNode, [rootNode, {text:地形图层包, showDel: true, fontSize: 10pt,state: {checked: true}}]);// 第三类: 影像节点var imageryNode $tree.treeview(addNode, [rootNode, {text:影像图层包, showDel: true, fontSize: 10pt,state: {checked: true}}]);// 解析图层 设置图层挂载数据 layers.forEach((layer, index) {// 将图层添加到loadedLayers便于管理if (layer._isS3MB || layer._isS3MBlock) {// 模型图层// 模型图层需要查询属性需要挂载数据// 设置图层挂载的数据layer.setQueryParameter({url: isever服务地址/services/data-publish-workspace/rest/data,dataSourceName: datasource-publish,isMerge: true});// decodeURI(layer.name)loadedLayers.push({name: layer.name, checked: true, type: model, source: layer, nodes: []});// 树形目录添加模型图层节点var childNode $tree.treeview(addNode, [modelNode, {text: layer.name, showDel: true, fontSize: 10pt, state: {checked: true}}]);// 添加当前图层的内容信息layer.datasetInfo().then(function(result) {for (var i 0; i result.length; i) {loadedLayers[loadedLayers.length - 1].nodes.push({name: result[i].datasetName, checked: true, type: model-node, source: result[i], nodes: []});// 添加到树形目录$tree.treeview(addNode, [childNode, {text: result[i].datasetName, showDel: true,fontSize: 10pt, state: {checked: true}}]);}});} else if (layer.imageryProvider) {// 影像图层loadedLayers.push({name: decodeURIComponent(layer.imageryProvider.tablename), checked: true, type: imagery, source: layer, nodes: []});// 添加到树形目录$tree.treeview(addNode, [imageryNode, {text: decodeURIComponent(layer.imageryProvider.tablename), showDel: true, fontSize: 10pt, state: {checked: true}}]);} else if (layer._isTerrainZ) {// decodeURIComponent:可以转换等特殊字符和中文// decodeURI:只能转换中文// 地形图层loadedLayers.push({name: decodeURIComponent(layer.tablename), checked: true, type: terrain, source: layer, nodes: []});// 添加到树形目录$tree.treeview(addNode, [terrainNode, {text: decodeURIComponent(layer.tablename), showDel: true, fontSize: 10pt, state: {checked: true}}]);}});// 更新在线影像图层onlineImageries.forEach((online, index) {// 添加到界面管理图层数组loadedLayers.push({name: online.name, checked: true, type: imagery-online, source: online, nodes: []});// 添加到树形目录$tree.treeview(addNode, [imageryNode, {text: online.name, showDel: true, fontSize: 10pt, state: {checked: true}}]);});});} catch (e) {if (widget._showRenderLoopErrors) {var title 渲染时发生错误已停止渲染。;widget.showErrorPanel(title, undefined, e);}}//点击对象查询对象属性let labelPickedWorker [{name: 名字, value: , key: MODELNAME},{name: 编码, value: , key: MODELCODE},]var table document.getElementById(tab);viewer.pickEvent.addEventListener(function(feature){$(#bubble).show();for (i table.rows.length-1;i -1;i--){table.deleteRow(i);}for(var key in feature ){for (var i 0; i labelPickedWorker.length; i) {if (key labelPickedWorker[i].key) {var newRow table.insertRow();var cell1 newRow.insertCell();var cell2 newRow.insertCell();cell1.innerHTML labelPickedWorker[i].name;cell2.innerHTML feature[key];}}} });$(#bubblePosition).click(function(){if($(#bubblePosition).hasClass(fui-export)){viewer.customInfobox undefined;$(#bubble).removeClass(bubble).addClass(float);$(#bubblePosition).removeClass(fui-export).addClass(fui-bubble);$(#bubblePosition)[0].title 悬浮;$(#bubble).css({left : 82%,bottom : 45%});$(#tableContainer).css({height:350px});}else if($(#bubblePosition).hasClass(fui-bubble)){$(#bubble).removeClass(float).addClass(bubble);$(#bubblePosition).removeClass(fui-bubble).addClass(fui-export);$(#bubblePosition)[0].title 停靠;$(#tableContainer).css({height:150px});viewer.customInfobox infoboxContainer;}});$(#close).click(function(){$(#bubble).hide();});function range(startID,endID){var array[];for(var i startID; i endID 1; i){array.push(i);}return array;}//图层目录的隐藏显示$(document).on(click.dropDown-container touchstart.dropDown-container,[data-toggledropdown],function(evt){evt.stopPropagation();var target evt.target;if(!target.contains(evt.currentTarget) target.tagName ! SPAN){return ;}var $this $(this), $parent, isActive;var $target $this.children(div.dropDown-container);if($target.length 0){$(.dropDown-container).removeClass(dropDown-visible);return ;}isActive $target.hasClass(dropDown-visible);$(.dropDown-container).removeClass(dropDown-visible);if(!isActive){$target.addClass(dropDown-visible);}return false;});var height $(body).height()*0.85 px;$(#treeContainer).css({height : height,min-width : 260px,text-align : left});}if (typeof Cesium ! undefined) {window.startupCalled true;onload(Cesium);}/script/body /html