超图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。

相关文章

大模型研发全揭秘：客服工单数据标注的完整攻略

大模型研发全揭秘：客服工单数据标注的完整攻略

在人工智能（AI）领域，数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者，掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中，工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注，不仅能够帮助提升客服自动化系统的智能化水平，还能优化客户服务流程，提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人，AI大神Andrej Karpathy，曾是OpenAI联合创始人之一，特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ，宣布将长期致力于AI原生教育。 近日，Andrej Karpathy接受了No Priors（投资博客）的采访，与硅谷知名投资人 Sara Guo 和 Elad G
阅读更多...
电力系统中的A类在线监测装置—APView400

电力系统中的A类在线监测装置—APView400

随着电力系统的日益复杂和人们对电能质量要求的提高，电能质量在线监测装置在电力系统中得到广泛应用。目前，市场上的在线监测装置主要分为A类和B类两种类型，A类和B类在线监测装置主要区别在于应用场景、技术参数、通讯协议和扩展性。选择时应根据实际需求和应用场景综合考虑，并定期维护和校准。电能质量在线监测装置是用于实时监测电力系统中的电能质量参数的设备。 APView400电能质量A类在线监测装置以其多核
阅读更多...
Retrieval-based-Voice-Conversion-WebUI模型构建指南

Retrieval-based-Voice-Conversion-WebUI模型构建指南

一、模型介绍 Retrieval-based-Voice-Conversion-WebUI（简称 RVC）模型是一个基于 VITS（Variational Inference with adversarial learning for end-to-end Text-to-Speech）的简单易用的语音转换框架。 具有以下特点 简单易用：RVC 模型通过简单易用的网页界面，使得用户无需深入了
阅读更多...
透彻！驯服大型语言模型（LLMs）的五种方法，及具体方法选择思路

透彻！驯服大型语言模型（LLMs）的五种方法，及具体方法选择思路

引言 随着时间的发展，大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用，随着人们期望的不断增加，目标也发生了巨大的变化。在短短的几个月的时间里，人们对大模型的认识已经从对其zero-shot能力感到惊讶，转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构（例如Transformer）对海量的、多种多样的数据分布进行建模得到，它包含了大量的先验
阅读更多...
图神经网络模型介绍（1）

图神经网络模型介绍（1）

我们将图神经网络分为基于谱域的模型和基于空域的模型，并按照发展顺序详解每个类别中的重要模型。 1.1基于谱域的图神经网络         谱域上的图卷积在图学习迈向深度学习的发展历程中起到了关键的作用。本节主要介绍三个具有代表性的谱域图神经网络：谱图卷积网络、切比雪夫网络和图卷积网络。 （1）谱图卷积网络 卷积定理：函数卷积的傅里叶变换是函数傅里叶变换的乘积，即F{f*g}
阅读更多...
秋招最新大模型算法面试，熬夜都要肝完它

秋招最新大模型算法面试，熬夜都要肝完它

💥大家在面试大模型LLM这个板块的时候，不知道面试完会不会复盘、总结，做笔记的习惯，这份大模型算法岗面试八股笔记也帮助不少人拿到过offer ✨对于面试大模型算法工程师会有一定的帮助，都附有完整答案，熬夜也要看完，祝大家一臂之力 这份《大模型算法工程师面试题》已经上传CSDN，还有完整版的大模型 AI 学习资料，朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费
阅读更多...
【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入（Embedding）方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节：嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”，它将文本中的单词或短语转换成计算机能够理解的数学形式，即向量。 正如翻译机将一种语言
阅读更多...
AI Toolkit + H100 GPU，一小时内微调最新热门文生图模型 FLUX

AI Toolkit + H100 GPU，一小时内微调最新热门文生图模型 FLUX

上个月，FLUX 席卷了互联网，这并非没有原因。他们声称优于 DALLE 3、Ideogram 和 Stable Diffusion 3 等模型，而这一点已被证明是有依据的。随着越来越多的流行图像生成工具（如 Stable Diffusion Web UI Forge 和 ComyUI）开始支持这些模型，FLUX 在 Stable Diffusion 领域的扩展将会持续下去。 自 FLU
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2