《李魏-使用GeoScene Api for Javascript 构建强大高性能的三维应用.pptx》由会员分享,可在线阅读,更多相关《李魏-使用GeoScene Api for Javascript 构建强大高性能的三维应用.pptx(31页珍藏版)》请在三个皮匠报告上搜索。
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设计模式,用于管理资源的加载,同一
7、份资源的多次加载,超时,重试,服务响应缓慢情况下取消加载资源的场景。loadable 提供监听对象初始化状态,如下代码所示,级联依赖加载的场景。JS API异步基于JS API的web三维应用 基础元素LayersMapSceneViewCamera数据层展示层三维数据生产消费流程城市建模引擎软件GeoScene Pro 桌面端桌面端无人机数据处理软件GeoScene云平台云平台移动端三维web应用PC端三维web应用新JS API MVVM架构下,数据层和视图层是完全分离的:Map作为一个数据层的容器,负责数据管理,更详细一点管理所有的图层。被管理的图层实例可以被分为三大类:Basermap
8、 底图Ground 负责显示地形和高程信息layers 具体业务图层TIPS1:其中 Basemap和Ground这两种图层实例的初始化,JS API提供了Well-Known ID配置方法。TIPS2:当Basemap中切片的分辨率和当前view的缩放对应不好,导致底图显示模糊时,可以使用tileInfo自定义lods,加载合适分辨率的切片。TIPS3:Map中的图层和配置可以在应用运行时通过代码组织。也可以使用提前在geoscene portal 中组织好的Web Map 和 Web Scene,传入id即可。Maps View主要作用是渲染图层、图层弹窗和微件,处理用户交互。在三维应用中
9、,使用基于浏览器 WebGL技术的SceneView,来渲染 3D 视图。SceneView 支持两种的查看模式(支持不同的坐标系统)。global模式将地球渲染为球体,只支持WebMercator(3857),WGS84(4326),CGCS2000等有限的坐标系local模式将要素渲染在平面上,允许在局部或裁剪区域展示要素。支持WebMercator(3857)和任意投影坐标系Tips:在两种查看模式下,开发者都可以将 Ground.navigationConstraint.type 设置为 none 来允许摄像机低于地面。在开发需要展示地下管道的应用时非常有效。localglobalVi
10、ewsview支持的事件可以分为以下几种:鼠标事件:click,double-click,drag,hold,immediate-click,immediate-double-click,pointer-down,mouse-wheel,pointer-leave,pointer-move,pointer-up键盘事件:key-down,key-upview变化事件:focus,blur,layerview-create,layerview-create-error,layerview-destroy,resizeViews Events三维场景中鼠标事件的回调中配合使用SceneView.h
11、itTest方法,可以获取当前场景中被选中的对象。如下图所示,hittest会从观察点和目标连接一条线,将中间所有交叉的对象以数组的形式返回。点击事件回调中配合使用view.toMap获取场景内坐标。Layers 和 data图层是可在map中使用的数据集合,JS API支持多种类型的图层(多种类型的数据源)构建一个三维应用可以使用的数据:二维数据要素数据 Features(动态数据会自动投射到当前坐标系)Maps切片数据 Tiles高程数据 Elevation三维数据 (符合开源的i3s标准 OGC Indexed 3D Scene Layer)。sceneLayerbuildingLaye
12、rIntegratedMeshLayerPointCloudLayer适合手工精细建模数据,如3ds Max生产出来的数据无人机倾斜摄影数据激光雷达获取的点云数据BIM数据支持renderer支持popup支持querying不支持标签支持renderer支持popup支持querying不支持标签支持renderer不支持popup不支持querying不支持标签支持部分(不)展示支持压平不支持renderer不支持popup不支持querying不支持标签Camera 与 view.goTo最简三维应用二三维联动 使用2D数据实现三维效果根据建筑底面(polygon features)和真
13、实高度挤出(Extrude)白模,其中多边形数据来自于feature layer根据树的点位(point features)放置WebStyleSymbol并根据图层中的真实数据设置Symbol的宽高,和颜色,其中点位数据来自于feature layer使用2D数据实现三维效果3d标签(label-3d)与标注线结合使用标注山峰高度,标签数据来自于feature layer更改要素图层的高程信息(elevationInfo 属性)以进行 3D 可视化,自定义 3D 场景中要素的高程。Renderer 定义了图层将如何将会如何绘制,下面为开发常用的几种renderSimpleRenderer:使
14、用同一个Symbol渲染图层中的所有要素。UniqueValueRenderer:根据一个或多个相等的属性值对图层中的要素进行符号化,被匹配到的要素会有不同颜色、填充样式或图像。ClassBreaksRenderer:根据指定内容为数值的属性的值,是否处在一定范围来定义图层中要素的符号化结果图层渲染器Renderer图层查询和展示功能区域建筑年代用途统计:绘制geomety缓冲区,使用缓冲区对场景中的建筑图层进行查询。查询得到的一个要素数组,在要素attribute字段中可以得到右侧统计图表中需要的统计数据。此处的统计结果可以自定义使用三方图表库进行渲染。Tips:查询操作可以是JSAPI基于
15、WebAssembly技术的客户端查询。查询操作分为属性查询和框选查询两种。道路红线碰撞检测:绘制道路红线缓冲区,使用红线缓冲区对场景中的建筑图层进行查询。查询得到要素数组,根据要素id数组设置图层的renderer为UniqueValueRenderer。微件可以快速给场景添加功能的UI,JS API提供了很多开箱即用的微件。例如使用微件在web端进行三维分析:开箱即用的微件开箱即用的微件开箱即用的微件天气微件微件的UI与其状态和核心逻辑是分开的。微件的状态数据和方法在其 viewModel 属性中进行定义和处理。由于viewModel 类都从 Accessor扩展而来,因此viewMode
16、l 上的所有属性都是响应式的,可以订阅值是否被修改。这种UI和核心逻辑的分离的设计,允许开发人员快速复用微件中的核心逻辑,使用任意前端框架渲染属性数据并动态更新。Tips:使用css变量 支持实时修改主题颜色Tips:在所有的微件中,绘制微件的核SketchViewModel使用较为频繁。开箱即用的微件widgetViewModelWeb Components基于SketchViewModel三维路径绘制 道路管道墙壁通风管道浏览器端三维绘制能力webgl扩展渲染能力 externalRenderersexternalRenderers提供了一个底层接口来访问 SceneView 的 WebGL 上下文,因此可以实现与场景交互方式一致的,自定义可视化效果。现有图层无法满足渲染需求,或者特殊的动画效果,同时对WebGL比较熟悉