SuperMap iClient3D for WebGL如何加载iDesktopX 场景美化绘制资产

作者：姜尔

一、功能介绍

本文主要介绍使用SuperMap iClient3D for WebGL加载SuperMap iDesktopX 场景中，场景美化功能结果。iDesktopX进行资产编辑，绘制区域。设置工程路径，保存美化结果，可以获得.instc以及.s3mb格式的实例化模型。在SuperMap iClient3D for WebGL中，通过接口instanceLayer.add/removeAll即可实现添加或删除实例图层。

iDesktopX场景美化功能，支持替换材质类型为UE材质的S3M瓦片的材质（仅渲染引擎V2），实现数据美化；也支持在场景中批量添加植被或静态模型。通过场景美化功能，可以开启资产管理器。资产管理器支持查看和编辑材质、植被或静态模型。

材质：通过资产管理器的材质按钮，可以访问软件内置的材质库（存储路径：SuperMap iDesktopX安装路径\templates\Materials），包括混凝土、砖石、金属、塑料、石头等PBR（Physically Based Rendering，基于物理的渲染）材质。若需要在软件中使用更多其他材质素材，将其与默认材质放置在同一路径下即可。
植被：通过资产管理器的植被按钮可以访问软件内置的植被小品库（存储路径：SuperMap iDesktopX安装路径\templates\Assets\Plant\样例），包括法国梧桐、桦树等。若需要在软件中使用更多其他植被小品，将其与默认植被小品放置在同一路径下即可。
静态模型：通过资产管理器的静态模型按钮可以访问软件内置的模型小品库（存储路径：SuperMap iDesktopX安装路径\templates\Assets\Asset），包括人物、城市地块附属物、运动设施、道路附属物等。若需要在软件中使用更多其他小品，将其与默认静态模型放置在同一路径下即可。
具体iDesktopX功能使用详见其帮助文档：https://help.supermap.com/iDesktopX/zh/tutorial/SceneOperation/3DDesigner/ModelOperation/Materialmanager.html?rhsearch=%E5%9C%BA%E6%99%AF%E7%BE%8E%E5%8C%96&rhhlterm=%E5%9C%BA%E6%99%AF%E7%BE%8E%E5%8C%96

SuperMap iClient3D for WebGL中主要使用接口InstanceLayer实例化图层，具体接口方法说明详见：

http://support.supermap.com.cn:8090/webgl/docs/Documentation/InstanceLayer.html?classFilter=InstanceLayer

二、主要代码接口

html 复制代码

instanceLayer.add("./SUModelingWorkDir/Plant/Plant.instc");//添加实例化图层
instanceLayer.removeAll("./SUModelingWorkDir/Plant/Plant.instc");//删除实例化图层

三、全部前端代码

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/SuperMap3D/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
     <script src="./js/spectrum.js"></script>
    <script type="text/javascript" src="../../Build/SuperMap3D/SuperMap3D.js"></script>
    <script src="./js/config.js"></script>
</head>
<body>
<div id="Container"></div>

<div id="toolbar" class="param-container tool-bar">
   <button id="batch">批量添加</button>
    <button id="delete">删除</button>
</div>
    
<script>
function onload(SuperMap3D) {
            var viewer = new SuperMap3D.Viewer('Container',{
                contextOptions: {
                  contextType: Number(2)  // Webgl2:2 ; WebGPU:3
                },
                orderIndependentTranslucency : false,
            });

            window.viewer = viewer;
            viewer.scenePromise.then(function (scene) {
                init(SuperMap3D, scene, viewer);
            });
        }

function init(SuperMap3D, scene, viewer) {
     viewer.imageryLayers.addImageryProvider(new SuperMap3D.TiandituImageryProvider({
            credit : new SuperMap3D.Credit('天地图全球影像服务     数据来源：国家地理信息公共服务平台 & 四川省测绘地理信息局'),
            token: URL_CONFIG.TOKEN_TIANDITU
        }));
     const promise = viewer.scene.open("http://localhost:8090/iserver/services/3D-WorkSpace/rest/realspace");
            viewer.scene.debugShowFramesPerSecond = true;
            viewer.resolutionScale = window.devicePixelRatio;
            viewer.scene.screenSpaceCameraController.zoomFactor = 1;
            viewer.scene.screenSpaceCameraController.inertiaZoom = 0.1;
            scene._performancePreferenceMode = 1

         
            const instanceLayer = new SuperMap3D.InstanceLayer(scene._context);
            scene.primitives.add(instanceLayer);
            instanceLayer.minVisibleAltitude = 0;
            instanceLayer.maxVisibleAltitude = 10000000;
            instanceLayer.filterMode = 0;
            instanceLayer.filterPixel = 0; // 对象过滤
            instanceLayer.filterDistance = 8000;
            instanceLayer.tileWidth = 5500;
            instanceLayer.pickEnable = true;
           
            window.instanceLayer = instanceLayer;

         $("#batch").click(function() {
                  instanceLayer.add("./SUModelingWorkDir/Plant/Plant.instc")
                });
                
        $("#delete").click(function() {
                 instanceLayer.removeAll("./SUModelingWorkDir/Plant/Plant.instc");
                });
                
        }
if (typeof SuperMap3D !== 'undefined') {
    window.startupCalled = true;
    onload(SuperMap3D);
}
</script>
<script>document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35929/livereload.js?snipver=1"></' + 'script>')</script><script>document.addEventListener('LiveReloadDisconnect', function() { setTimeout(function() { window.location.reload(); }, 500); })</script></body>
</html>

四、加载效果

操作视频详见：

https://live.csdn.net/v/507511