使用GeoScene Api for Javascript 构建强大高性能的三维应用.pdfVIP

使用GeoScene API for Javascript 构建强大高性能的三维应用 GeoScene Api for Javascript 引入方式 项目中引入JS API方式有两种： • AMD ：异步加载，无需打包，项目运行时在html中挂载script标签，直请求取部署在服务器上的API。 对比ESM较为简单，可快速开始开发，目前推荐demo级或者轻量的应用开发使用。(向前兼容4.X API 的老项目) • ESM：通过npm下载依赖到本地，接入webpack等打包工具，引入编译、压缩、TreeShaking和单元 测试等功能，享受更丰富现代的JS或 TS语法支持，适合规模更大，更复杂的应用开发场景。 核心类 Accessor （访问器） 大部分JS API中提供的类都是访问器核心类的子类。Accessor中主要有 get （访问）、set （设置）和watch （ 监听）方法，提供一种读写和监听实例属性的机制，给开发者带来了一致、简洁、高效的开发体验 。核心 原理是通过Object.defineProperty ，劫持数据的访问和设置。 访问属性方法 get ，支持安全访问嵌套属性（类似于es2020中的optional chaining）： const basemapTitle = map.get(basemap.title); 设置属性方法 set，支持多个属性值的批量设置： const newViewProperties = { center: [ -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等多种监听工具（监听逻辑 复用）。支持多种数据类型的对象属性的观察，也支持合并观察多个属性。 JS API 针对三维场景优化策略 多级缓存策略：除了服务器端CDN缓存和浏览器请求 缓存的原始三维数据外，JS API会将当前场景处理过 的CPU运算友好型3D数据，缓存在浏览器 IndexedDB中，便于CPU复用。 i3s数据请求策略：目的是有限时间内加载合适（屏幕中心先于屏幕边缘， 先于屏幕外）的数据。单纯使用并行请求，消费全部有限带宽，会导致 渲染场景不急需的数据请求占满带宽造成阻塞。 JSAPI 将i3s数据请求分为两类： 1. Index Nodes：返回服务数据的位置，包含许多子请求。 2. Geometry Data ：场景中渲染需要的数据，请求数量少，但内容非 常大。 JS API针对这两种请求场景结合加载优先策略动态进行请求参数调整。 JS API 针对三维场景优化策略 渐进式加载（LOD）策略：加载大量三维数据时，先快速展示一个预览然后加载更精细的数 据，优于长时间空白等待详细数据。JS API中的LOD系统基于屏幕分辨率。首先模拟一个较 低的分辨率的屏幕，下载在该分辨率下需显示的节点，实现图层的快速概览。然后请求更精 细的数据来优化三维场景显示。 单个图层内存使用策略：渲染三维图层时，根据i3s服务提供的模型球体边界信息，重新计算 出更贴合的模型包围体（计算结果缓存在Indexe