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

这篇具有很好参考价值的文章主要介绍了超图iClient3DforCesium地形、影像、模型、在线影像交互示例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


描述

数据源:基于iserver发布的三维场景(地形、影像、BIM模型) + 在线arcgis影像
应用:目录树展示源数据列表、目录树控制源数据可视化结果显隐、BIM模型点选查询关联属性文章来源地址https://www.toymoban.com/news/detail-778154.html


示例代码

<!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地形、影像、模型、在线影像交互示例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SuperMap iClient3D for Cesium最短路径分析

    作者:Mei    在交通、消防业务场景中,如果某地发生火灾或者交通事故,需要快速规划出最短抢救路线,这就要用到网络分析中的最短路径分析功能。接下来就跟着小编一起看看,在三维场景中,如何实现最短路径分析。    首先在iDesktop中通过二维线构建网络数据集,

    2024年02月11日
    浏览(56)
  • SuperMap iClient3D for WebGL/Cesium端性能优化

        目录 一、请求优化 1.1 多子域 1.1.1 scene.open()打开场景 1.1.2 加载地形 1.1.3 加载影像 1.1.4 加载S3M 1.1.5 加载MVT 1.2 批量请求 1.2.1 地形 1.2.2 影像 二、内存优化 2.1 根节点驻留内存 2.2 自动释放缓存 2.3 内存管理 三、图层优化 3.1 LOD 3.2 空间索引 3.3 控制图层显示范围 3.4 控制图层

    2024年01月25日
    浏览(49)
  • SuperMap iClient3D for Cesium 实现图层下钻功能

    目录 前言 一、所需数据及发布服务 1、数据准备  2、地图展示 二、Cesium.SuperMapImageryProvider 接口 三、相关代码         实现地图下钻功能可以提供更详细的地理信息、支持交互式探索、展示层级关联的数据和提供数据分析决策支持等优势。通过点击地图上的区域或点,用

    2024年02月03日
    浏览(87)
  • vue3+SuperMap iClient3D for Cesium实现可视域分析功能

    本人小白一枚,文章如有问题还请各位大神评论区指出。整体实现是参考SuperMap iClient3D for Cesium的可视域分析功能源码~ 文章目录 前言 一、主要功能 二、使用步骤 1.HTML主要结构 2.javascript SuperMap iClient3D for Cesium中的ViewShed3D类提供了可视域分析,设置观察点、目标的位置,水平

    2024年02月15日
    浏览(45)
  • iClient3D for Cesium&WebGL入门之使用vscode以服务方式运行调试

    作者:超图研究院技术支持中心-于丁 iClient3D for CesiumWebGL入门之使用vscode以服务方式运行调试 相信大家第一次使用SuperMap iClient3D for Cesium或SuperMap iClient3D for WebGL的时候,都遇到过和我一样的事情: 在文件夹中直接打开html的示例代码文件于浏览器中; 或者使用vscode安装open

    2024年02月04日
    浏览(53)
  • SuperMap iClient3D 11i (2023) SP1 for Cesium之移动实体对象

     作者:nannan 目录 前言 一、代码思路 1.1 绘制面实体对象 1.2 鼠标左键按下事件 1.3 鼠标移动事件 1.4 鼠标左键抬起事件 二、运行效果 三、注意事项        SuperMap 官网三维前端范例 编辑线面,可以对面实体对象的节点进行增加、删除以及修改位置。那可不可以整个线/面对

    2024年02月09日
    浏览(53)
  • 超图嵌入论文阅读2:超图神经网络

    原文:Hypergraph Neural Networks ——AAAI2019(CCF-A) 源码:https://github.com/iMoonLab/HGNN 500+star 贡献 :用于数据表示学习的超图神经网络 (HGNN) 框架,对超图结构中的高阶数据相关性进行编码 定义 超边卷积 来处理表示学习过程中的数据相关性 够学习考虑高阶数据结构的隐藏层表示,

    2024年02月10日
    浏览(43)
  • 超图神经网络(HGNN)

    传统的图网络结构,两点之间就可以引入一条边链接; 但在某些特定的领域,一条边可能链接的不止两个点,我们便引入了超图 比如:同一个班级,一个班级可以连接很多个学生;一个IP下有很多个用户,我们可以用超边来表示这个班级或这个IP; 一个超图可以拥有任意数量

    2024年01月25日
    浏览(28)
  • 超图(HyperGraph)学习,看这一篇就够了

    最近事多,好久没更新了,随便写写(Ctrl+V)点 一、超图定义 通常图论中的图,一条edge只能连接2个vertex,在超图中,不限量 如何理解呢,就用我正在做的KT问题来看:7道题目-7个顶点;4种概念-4条超边,其中第1,2,3题都是考察概念1的,则构建一个包含了这仨的超边,以此类

    2024年02月02日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包