李魏-使用GeoScene Api for Javascript 构建强大高性能的三维应用.pptx

1、使用GeoScene API for Javascript构建强大高性能的三维应用专业服务事业部 李魏项目中引入JS API方式有两种：AMD：异步加载，无需打包，项目运行时在html中挂载script标签，直请求取部署在服务器上的API。对比ESM较为简单，可快速开始开发，目前推荐demo级或者轻量的应用开发使用。(向前兼容4.X API的老项目)ESM：通过npm下载依赖到本地，接入webpack等打包工具，引入编译、压缩、TreeShaking和单元测试等功能，享受更丰富现代的JS或 TS语法支持，适合规模更大，更复杂的应用开发场景。GeoScene Api for Javascript

2、 引入方式大部分JS API中提供的类都是访问器核心类的子类。Accessor中主要有 get（访问）、set（设置）和watch（监听）方法，提供一种读写和监听实例属性的机制，给开发者带来了一致、简洁、高效的开发体验。核心原理是通过Object.defineProperty，劫持数据的访问和设置。访问属性方法 get，支持安全访问嵌套属性（类似于es2020中的optional chaining）：const basemapTitle=map.get(basemap.title);设置属性方法 set，支持多个属性值的批量设置：const newViewProperties=center:-

3、100,40,zoom:6;view.set(newViewProperties);监听属性值变动方法watch，观察者设计模式，提供了响应式功能，高效更新修改部分数据对应的UI：const handle=view.watch(scale,(newValue,oldValue,property,object)=console.log(newValue,oldValue,property,object)）此外JS API 还提供了响应式工具 reactiveUtils，提供多种watch,on,once,when,whenOnce等多种监听工具（监听逻辑复用）。支持多种数据类型的对象属性的观察，

4、也支持合并观察多个属性。核心类 Accessor（访问器）多级缓存策略：除了服务器端CDN缓存和浏览器请求缓存的原始三维数据外，JS API会将当前场景处理过的CPU运算友好型3D数据，缓存在浏览器IndexedDB中，便于CPU复用。JS API 针对三维场景优化策略i3s数据请求策略：目的是有限时间内加载合适（屏幕中心先于屏幕边缘，先于屏幕外）的数据。单纯使用并行请求，消费全部有限带宽，会导致渲染场景不急需的数据请求占满带宽造成阻塞。JSAPI 将i3s数据请求分为两类：1.Index Nodes：返回服务数据的位置，包含许多子请求。2.Geometry Data：场景中渲染需要的数据，请

5、求数量少，但内容非常大。JS API针对这两种请求场景结合加载优先策略动态进行请求参数调整。渐进式加载（LOD）策略：加载大量三维数据时，先快速展示一个预览然后加载更精细的数据，优于长时间空白等待详细数据。JS API中的LOD系统基于屏幕分辨率。首先模拟一个较低的分辨率的屏幕，下载在该分辨率下需显示的节点，实现图层的快速概览。然后请求更精细的数据来优化三维场景显示。单个图层内存使用策略：渲染三维图层时，根据i3s服务提供的模型球体边界信息，重新计算出更贴合的模型包围体（计算结果缓存在IndexedDB，使用浏览器web worker进行计算工作，不阻塞浏览器主线程）。可以得到更精确的LOD加

6、载策略，达到减少渲染数据（减少的内存占用），却能保持渲染结果的目的。全局内存使用策略：在每次场景内容或摄像机位置发生变化时，都会重新评估内存使用情况，并动态地提高或降低全局细节级别，同时触发缓存和卸载数据。Draco模型压缩算法，保证模型精度的前提下，压缩模型文件大小。JS API 针对三维场景优化策略4.X系列的API所有的异步操作都使用Promise进行了封装。由于Promise的链式调用特性，便于开发者对异步操作进行顺序编排。由于layers,maps等都需要依赖服务器数据进行初始化，正常使用实例需要等数据资源加载完毕。JS API引入了loadable设计模式，用于管理资源的加载，同一