超图iClient3DforCesium地形、影像、模型、在线影像交互示例

2023-12-30 05:04
文章标签 影像 模型 示例 在线 交互 地形 超图 iclient3dforcesium

本文主要是介绍超图iClient3DforCesium地形、影像、模型、在线影像交互示例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

超图iClient3DforCesium地形、影像、模型、在线影像交互示例

  • 描述
  • 示例代码

描述

数据源：基于iserver发布的三维场景(地形、影像、BIM模型) + 在线arcgis影像
应用：目录树展示源数据列表、目录树控制源数据可视化结果显隐、BIM模型点选查询关联属性

示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>模型交互示例</title><link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet"><link href="./css/pretty.css" rel="stylesheet"><script src="./js/jquery.min.js"></script><script src="./js/config.js"></script><script src="./js/bootstrap.min.js"></script><script src="./js/bootstrap-select.min.js"></script><script src="./js/bootstrap-treeview.js"></script><script src="./js/spectrum.js"></script><script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script></head><body><div id="cesiumContainer"></div><div id='tool-menu' class='tool-menu'><a data-toggle='dropdown' id='layerMangerBtn' title='图层管理' class='tool-menu-btn tool-menu-btn-inverse'><span class='smicon-layerlist tool-menu-btn-icon'></span><div class="dropDown-container treeview-dropDown-container" id="treeContainer"><div id='layerTree'></div></div></a></div><div id="bubble" class="bubble" style="bottom:0;left:82%;display:none;" ><div id="tools" style="text-align : right"><span  style="color: rgb(95, 74, 121);padding: 5px;position: absolute;left: 10px;top: 4px;">对象属性</span><span class="fui-export" id="bubblePosition" style="color: darkgrey; padding:5px" title="停靠"></span><span  class="fui-cross" title="关闭" id="close" style="color: darkgrey;padding:5px"></span></div><div style="overflow-y:scroll;height:150px" id="tableContainer"><table id="tab"></table></div></div> <script type="text/javascript">function 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-toggle=dropdown]',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>

这篇关于超图iClient3DforCesium地形、影像、模型、在线影像交互示例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/551781。

相关文章

详解SpringBoot+Ehcache使用示例

详解SpringBoot+Ehcache使用示例

《详解SpringBoot+Ehcache使用示例》本文介绍了SpringBoot中配置Ehcache、自定义get/set方式,并实际使用缓存的过程,文中通过示例代码介绍的非常详细,对大家的学习或者... 目录摘要概念内存与磁盘持久化存储：配置灵活性：编码示例引入依赖：配置ehcache.XML文件：配置
阅读更多...
Java高效实现PowerPoint转PDF的示例详解

Java高效实现PowerPoint转PDF的示例详解

《Java高效实现PowerPoint转PDF的示例详解》在日常开发或办公场景中,经常需要将PowerPoint演示文稿（PPT/PPTX）转换为PDF,本文将介绍从基础转换到高级设置的多种用法,大家... 目录为什么要将 PowerPoint 转换为 PDF安装 Spire.Presentation fo
阅读更多...
Python中isinstance()函数原理解释及详细用法示例

Python中isinstance()函数原理解释及详细用法示例

《Python中isinstance()函数原理解释及详细用法示例》isinstance()是Python内置的一个非常有用的函数,用于检查一个对象是否属于指定的类型或类型元组中的某一个类型,它是Py... 目录python中isinstance()函数原理解释及详细用法指南一、isinstance()函数
阅读更多...
python中的高阶函数示例详解

python中的高阶函数示例详解

《python中的高阶函数示例详解》在Python中,高阶函数是指接受函数作为参数或返回函数作为结果的函数,下面：本文主要介绍python中高阶函数的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录1.定义2.map函数3.filter函数4.reduce函数5.sorted函数6.自定义高阶函数
阅读更多...
Vue实现路由守卫的示例代码

Vue实现路由守卫的示例代码

《Vue实现路由守卫的示例代码》Vue路由守卫是控制页面导航的钩子函数,主要用于鉴权、数据预加载等场景,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一、概念二、类型三、实战一、概念路由守卫（Navigation Guards）本质上就是 在路
阅读更多...
JAVA实现Token自动续期机制的示例代码

JAVA实现Token自动续期机制的示例代码

《JAVA实现Token自动续期机制的示例代码》本文主要介绍了JAVA实现Token自动续期机制的示例代码,通过动态调整会话生命周期平衡安全性与用户体验,解决固定有效期Token带来的风险与不便,感兴... 目录1. 固定有效期Token的内在局限性2. 自动续期机制：兼顾安全与体验的解决方案3. 总结PS
阅读更多...
C#中通过Response.Headers设置自定义参数的代码示例

C#中通过Response.Headers设置自定义参数的代码示例

《C#中通过Response.Headers设置自定义参数的代码示例》：本文主要介绍C#中通过Response.Headers设置自定义响应头的方法,涵盖基础添加、安全校验、生产实践及调试技巧,强... 目录一、基础设置方法1. 直接添加自定义头2. 批量设置模式二、高级配置技巧1. 安全校验机制2. 类型
阅读更多...
Python屏幕抓取和录制的详细代码示例

Python屏幕抓取和录制的详细代码示例

《Python屏幕抓取和录制的详细代码示例》随着现代计算机性能的提高和网络速度的加快,越来越多的用户需要对他们的屏幕进行录制,：本文主要介绍Python屏幕抓取和录制的相关资料,需要的朋友可以参考... 目录一、常用 python 屏幕抓取库二、pyautogui 截屏示例三、mss 高性能截图四、Pill
阅读更多...
Java中的Schema校验技术与实践示例详解

Java中的Schema校验技术与实践示例详解

《Java中的Schema校验技术与实践示例详解》本主题详细介绍了在Java环境下进行XMLSchema和JSONSchema校验的方法,包括使用JAXP、JAXB以及专门的JSON校验库等技术,本文... 目录1. XML和jsON的Schema校验概念1.1 XML和JSON校验的必要性1.2 Sche
阅读更多...
使用MapStruct实现Java对象映射的示例代码

使用MapStruct实现Java对象映射的示例代码

《使用MapStruct实现Java对象映射的示例代码》本文主要介绍了使用MapStruct实现Java对象映射的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、什么是 MapStruct？二、实战演练：三步集成 MapStruct第一步：添加 Mave
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2