SuperMap加载三维模型数据

### 使用 SuperMap 加载 3D 模型数据 #### 地形数据加载 为了展示如何通过SuperMap iClient3D for WebGL加载三维地形模型，可以采用来自iServer的服务作为数据源。这涉及到创建一个WebGL场景并配置好连接至SuperMap iServer的参数来获取地形瓦片[^1]。 ```javascript // 创建Viewer实例 var viewer = new Cesium.Viewer('cesiumContainer'); // 添加SuperMap iServer地形服务 viewer.terrainProvider = new SuperMap3D iTerrainProvider({ url: 'http://localhost:8090/iserver/services/3D-Terrain/rest/realspace' }); ``` #### 地图服务贴倾斜显示 对于希望将二维矢量数据以一定角度附着于三维表面上的情况，在SuperMap iClient3D for WebGL中有专门的支持用于实现这种效果。此功能允许开发者把诸如道路、建筑轮廓等地物对象按照指定的角度投射到地面或其他物体上，从而增强视觉表现力和空间感知度[^2]。 ```javascript // 定义地图服务URL const mapServiceUrl = "http://localhost:8090/iserver/services/map-world/rest/maps/World"; // 设置样式模板ID和服务地址 let styleTemplateId = "yourStyleTemplateId"; let serviceAddress = `${mapServiceUrl}?styleTemplateId=${styleTemplateId}`; // 构建倾斜显示的地图图层 let tiltedDisplayLayer = new SuperMap.Web.Map.Tiled({ id: 'tilted-display-layer', name: 'Tilted Display Layer', type: 'vector', source: new ol.source.VectorTile({url: serviceAddress}) }); // 将新构建好的图层加入到视图中 viewer.scene.primitives.add(tiltedDisplayLayer); ``` #### 加载Cesium原生3DTiles切片 当尝试利用SuperMap平台加载由其他工具生产的基于Cesium标准的3D Tiles格式的数据集时，可能会遇到一些兼容性挑战。特别是针对那些已经过特殊处理（如坐标系变换）后的倾斜摄影成果文件。此时应当参照官方文档中的`3D Tiles Photogrammetry.html`案例学习正确设置方法，并注意调整可能影响最终呈现效果的各项属性值[^3]。 ```javascript // 初始化3DTileset对象 var tileset = new Cesium.Cesium3DTileset({ url : './data/tilesets/quantized-mesh-url.json' // 替换成实际路径 }); // 应用特定转换矩阵确保方位角一致 tileset.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame( Cesium.Cartesian3.fromDegrees(longitude, latitude, height) ); // 把准备完毕的对象添加进当前场景里 viewer.scene.primitives.add(tileset); ``` #### 结合Cesium与SuperMap进行高级应用开发 在某些复杂的应用场合下，混合使用两种框架的优势成为一种趋势——即让Cesium承担起大部分底层图形渲染工作的同时借助SuperMap所提供的独特算法库完成更加专业的GIS任务。例如下面这段代码片段展示了怎样联合二者的力量来进行可视域分析以及自定义S3M图层的操作[^4]。 ```javascript // 实现可视域计算逻辑... function calculateViewshed(pointOfInterest){ let result; try { const viewshedAnalysisTask = new SuperMap.Analysis3D.ViewShed(); pointOfInterest && (viewshedAnalysisTask.parameter.point = pointOfInterest); result = await viewshedAnalysisTask.start().then((res)=>{ console.log(`Visibility analysis completed.`); return res; }); } catch(error){ console.error("Error occurred during visibility calculation:", error.message); } return result; } ```