三维应用开发及示例易智瑞信息技术有限公司张迪三维模型的加载与展示即拿即用的微件示例展示场景的优化策略02010304三维模型的加载—API引入方式•通过CDN使用AMD模块:异步加载,无需打包,项目运行时在html中挂载script标签,直接获取部署在服务器上的API。对比ES模块的加载方式较为简单,可快速开始开发,目前推荐demo级或者轻量的应用开发使用。(向前兼容4.XAPI的项目)•通过NPM使用ES模块:通过npm下载依赖到本地,接入webpack等打包工具,引入编译、压缩和单元测试等功能,享受更丰富现代的JS或TS语法支持,适合规模更大,更复杂的应用开发场景。三维模型的加载—API引入方式•通过CDN使用ES模块:该方法要注意,需要浏览器支持使用CDN来加载ES模块的特性。因此,要确保目标浏览器支持ES模块并且版本较新。(仅建议将此方法用于开发和原型设计)•本地托管的AMD模块:在某些情况下,可能需要使用GeoSceneAPIAMD模块的本地托管版本。例如,在没有互联网接入的受限网络环境中工作时。•本地托管的AMD模块:在官网下载API类库包,然后将API部署到本地,即可离线使用。API部署:将API包解压后放到WebServer(IIS的wwwroot或Tomcat的webapps)下IIS服务器HTTP响应标头配置如图所示:三维模型的加载—API引入方式三维模型的加载—基础元素JSAPI构建Web三维应用的基础元素数据层:Map、Layers展示层:SceneView、Camera三维模型的加载—Maps新JSAPIMVVM架构下,数据层和视图层是完全分离的,Map作为一个数据层的容器,负责数据管理,管理所有的图层。最终需要通过视图展示它。Map类管理图层的属性与方法:属性方法•basemap:底图,Basemap类型•ground:地形与高程信息,Ground类型•allLayers:所有图层的集合,Collection类型•layers:具体业务图层,Coolection类型•add():添加一个图层,可指定图层位置•addMany():添加多个图层,可指定位置•findLayerById():根据ID寻找图层•remove():移除指定图层•removeAll():移除全部图层•removeMany():移除多个图层•reorder():对某个图层进行重排序(id变换)三维模型的加载—Layers图层是可在Map中使用的数据集合,JSAPI支持多种类型的图层(多种类型的数据源)构建一个三维应用常用的数据:精模(SceneLayer)BIM(BuildingLayer)倾斜摄影数据(IntegratedMeshLayer)点云(PointCloudLayer)体元(VoxelLayer)适合手工精细建模数据,如3dsMax生产出来的数据。BIM数据无人机倾斜摄影数据激光雷...