1、使用ArcGIS API for JavaScript开发3D Web应用3D Web 基础知识3D 数据与视图3D 可视化3D 微件3D 新特性内容大纲3D Web 基础基于WebGL重新设计的 ArcGIS API for JavaScript 4.x 提供了原生的Web 3D能力 PC：IE 11+，Chrome，Firefox，Safari等现代浏览器【建议配置】4GB以上系统内存，1GB以上显存的独立显卡 移动端：以下设备经过了严格的测试，对于三维有较好的支持 iOS-iPhone 8，iPhone XS，iPad Pro（Safari）Android-三星S8，三星S9，三星Tab

2、 S3（Chrome）地图应用是典型的计算密集型应用程序，更好的CPU&GPU，更大的内存对于应用的性能具有显著的提升客户端硬件需求3D Web App能同时展现2D&3D数据3D数据呈现2D：点线面3D：激光雷达倾斜摄影BIM影像IoTMesh.3D Web应用仍然是以Web服务为核心的体系架构；从而与ArcGIS平台的其他产品之间具有技术与体验的一致性。3D ViewingModeWGS84 或者 Web Mercator曲面视图支持地下模式任意的投影坐标系平面模式支持地下模式 Camera heading tilt fov（55）3D Web 基础知识Ground定义三维场景中的地表由E

3、levationLayers构成提供地下模式的能力3D Web 基础知识ElevationLayer加载服务端高程服务的数据Elevation servicestiled image serviceLERC format(Limited Error Raster Compression)多个高程服务图层可以互相叠加（遵循普通图层的规则）Esri默认提供了2个内置的well-known高程服务world-elevation【三维默认使用】world-topobathymetry高程图层支持自定义3D Web 基础知识高程图层夸张处理（100倍放大）高程图层支持自定义未处理处理后https:/ 二

4、维 or 三维-只需一步二维视图 MapView三维视图 SceneView3D 数据与视图3D API 总体架构SceneView是3D Web应用程序中的地图视图容器，负责3D场景中的数据呈现以及用户行为交互。默认情况下，SceneView以global模式显示 global模式下SceneView采用ECEF坐标系，显示为完全对称的球形，其中球的半径为6378137，单位为米 当前 Multipoint 类型仍然不支持在SceneView中显示SceneViewSceneView-3D 地图容器Cameraesri/Camera控制3D应用程序中的视图参数，其中：position：表示当

5、前视图的中心（以x，y，z表示）heading：表示当前视图与正北方向的顺时针夹角，取值范围0-360 tilt：表示当前视图的垂直方向夹角，其中0表示视角垂直地面；90表示视角平行地面。取值范围0-180通过修改SceneView对象的camera属性，可以立即改变当前3D的视图。Camera通过修改camera属性来改变3D视图是直接切换到指定的视图范围的，然而在3D Web应用中，esri提供了另一种更好的方式来进行视图导航。goTo函数提供了一种简单一致的API来实现平滑的导航动画特效。goTo(target,options?)goTo函数支持多种不同的数据类型作为target，包括：

6、Number：表示经纬度数值的数组Geometry/GeometryGraphic/GraphicViewpointCamera targt,center,scale,zoom,position,heading,tilt 3D 导航goTo函数默认启用了平滑的视图动画特效，同时支持通过自定义设置来实现更为精细和逼真的动画效果。animate：是否启用动画，默认设置为true speedFactor：动画速度，默认为1，即不加速 duration：以毫秒为单位的动画时间；设置此参数将忽略speedFactor的值 maxDuration：以毫秒为单位的最大动画时间；默认情况下的值根据speedF

7、actor计算得出 easing：缓动函数；可以指定为内置的缓动函数名称，或者设置为自己的function实现；默认情况下，1000ms以内的动画采用out-expo特效，超过1000ms的动画采用in-out-coast-quadratic特效。goTo 动画选项3D 飞行动画利用goTo函数提供的能力，我们可以实现很多3D应用中典型的飞行动画效果。小贴士：对于起点与终点距离较远的两点之间，进行goTo飞行动画时，SceneView会将场景的heading和tilt值重置为默认值。但我们可以通过显式的指定这2个属性的值来锁定场景的视角。constraints属性为SceneView提供了额外

8、的选项，可以改变视图的一些特性，包括：altitude：支持设置SceneView的最大和最小海拔高度；默认的最大海拔高度为地球半径的4倍 clipDistance：可以设置WebGL在绘制场景时的取景区间，分为near和far2个值 tilt：可以设置SceneView允许用户交互的最大视角SceneView Constraintspadding-为SceneView设置预留的空间，便于在Web页面开发中放置header和siderenvironment-为SceneView设置环境相关的属性 light-设置三维环境光 background-设置三维场景的背景，图片或rgb颜色 atmos

9、phere-支持low/high两种环境仿真，设置低质量仿真可以提高性能 starsEnabled-是否显示模拟的星云其他SceneView特性图层类型图层类型特性特性esri/layers/FeatureLayer矢量esri/layers/CSVLayer矢量esri/layers/StreamLayer矢量esri/layers/MapImageLayer栅格化，动态esri/layers/ImageryLayer栅格化，动态esri/layers/WMSLayer栅格化，动态esri/layers/OpenStreetMapLayer栅格化，缓存esri/layers/TileLaye

10、r栅格化，缓存esri/layers/WebTileLayer栅格化，缓存esri/layers/WMTSLayer栅格化，缓存esri/layers/VectorTileLayer矢量，缓存图层-Layers与2D MapView类似，三维的SceneView也是由多种不同的Layer组合而成；不同的是，SceneView中能同时加载2D的图层类型和一些3D特有的图层类型。目前，仍然有部分2D图层无法被加载到三维的视图中，包括 KMLLayer MapNotesLayer GeoRSSLayer BaseDynamicLayer图层-LayersSceneView支持以下3D特有的图层类型图

11、层-3D Layers图层类型图层类型特性特性esri/layers/ElevationLayer栅格化，缓存esri/layers/SceneLayer（point）矢量esri/layers/SceneLayer（3d object）矢量esri/layers/BuildingSceneLayer矢量esri/layers/IntegratedMeshLayer矢量esri/layers/PointCloudLayer矢量SceneLayer是Esri特别为Web端三维显示而设计的一种服务类型，其针对Web技术体系的特点以及Web GIS 三维场景显示的需要在数据传输，数据压缩，前端渲染以

12、及浏览器缓存等等方面做了很多优化SceneLayer基于Esri主导的 I3S 标准设计SceneLayer在前端JSAPI中包含了多种不同的数据类型 3D Objects(Multipatch)/Points BuildSceneLayer IntegratedMeshLayer PointCloudLayerSceneLayer在SceneView中，加载一个Layer到地图中与在2D MapView中并无二致。例如，通过以下代码初始化一个SceneLayer并加载到地图中。图层-加载Layer3D Layer-SceneLayer(3D Object)对于矢量化的图层，一般包含一个特有的

13、属性elevationInfo，用来定义图层相对于场景的高程。该属性可以为图层设置4中不同的高程模式：1.on-the-ground：默认线和面要素采用贴地表模式，使用ObjectSymbol3DLayers渲染的点要素也默认为贴地表模式2.relative-to-ground：相对地表高度，采用IconSymbol3DLayers渲染的点要素默认采用该模式3.absolute-height：绝对高程。当任意要素的Geometry属性hasZ设置为true时，默认采用该模式4.relative-to-scene：要素相对于建筑物，3D Object或者倾斜摄影图层放置；在该模式下，元素的z值被

14、忽略图层-elevationInfoWebScene是一种贯穿整个ArcGIS平台体系的3D地图数据类型，能在ArcGIS桌面和Web端之间自由的分享。创建：ArcGIS Pro ArcGIS Online/Enterprise SceneViewer JSAPI使用 ArcGIS apps Web AppBuilder,Story Map,.JSAPI它不仅定义了3D地图的内容（图层），还包括了图层的样式，视图环境，以及三维视图中的幻灯片，甚至Popup的行为WebScene是基于JSON数据格式存储在Portal中WebScene是可以持久化存储的MapWebSceneWebScene 类

15、定义WebScene-Load,Edit&Save3D 可视化Renderers&Symbols 所有renderer类型同时适用于 2D&3D 2D Symbols simple-marker picture-marker simple-line simple-fill 3D Symbols在3D SceneView中以2D Symbol渲染时，JSAPI内部会将2D Symbol转换为3D对象。因此，会导致出现精度缺失，与2D模式下不完全一致。不建议在3D场景中使用2D Symbol。3D 数据可视化3D Renderers3D SymbolsWebStyleSymbolWebStyleS

16、ymbol是Esri提供的一种用于三维城市逼真显示的点要素Symbol，在JSAPI内部它总是会默认转换为PointSymbol3D来加载和渲染最新版本的JSAPI 4.11 中包含了已经包含的Web样式多达368种。通过styleName或者styleUrl来引用 目前，WebStyleSymbol类型暂时无法用来加载第三方的模型样式，但我们可以通过fetchSymbol接口适度定制各个内置样式的外观WebStyleSymbol最新版本的 JSAPI 4.11 中新增了对glTF格式模型数据的支持，通过引用已经发布好的三维模型数据(.gltf/.glb)，我们可以在SceneView中加载任

17、意的外部模型来进行渲染。glTF(GL TransmissionFormat)，即图形语言交换格式，它是一种3D内容的格式标准，由Khronos Group管理（Khronos Group还管理着OpenGL系列、OpenCL等重要的行业标准）；它的优势在于glTF的设计是面向实时渲染的，即尽量提供客户端API可以直接使用的数据格式，从而避免二次转换。因此glTF格式对于WebGL非常友好。它的目标是成为3D领域的JPEG目前，支持导出glTF格式的应用和SDK已经十分丰富，3D领域的主流应用几乎全线支持：Blender 3DS Max Unity Sketchup.WebStyleSymbo

18、l 扩展使用glTF数据模型MeshSymbol3D从4.7版本开始，JSAPI引入了3D的边缘渲染特性，让建筑物等三维模型的渲染变得更加逼真。支持的图层包括：FillSymbol3DLayer in MeshSymbol3D ExtrudeSymbol3DLayer in PolygonSymbol3D 包括2种渲染样式：SolidEdges，SketchEdges3DEdge Render在3D应用中，我们同样可以借助于renderer类型提供的visual variable能力来进一步定制图层元素的样式。目前，所有的4中Visual Variable类型都支持在3D模式下直接使用。Col

19、orSizeOpacityRotate 使用受限Visual variables3D 微件JSAPI默认提供了用于3D测距和测面积的微件，其中测距微件同时支持针对场景模型的高程测量；两者都内置了多种不同数据单位的转换Measurement在最新版本的JSAPI中，SketchViewModel类型经过了重新设计，以增加对三维SceneView中的绘制支持。Sketch3D在过去这个季度的发布中，JSAPI中最为让人印象深刻的就要数BIM数据格式的支持。为了让用户更好的在Web端浏览BIM模型以及其他三维数据模型，Esri新增了Slice微件，让Web端剖切分析变得触手可及。Slice3D 新特

20、性SceneView现在可以根据客户端浏览器内置的devicePixelRatio属性来决定是否启用高清晰度显示（HiDPI）。如果我们想在客户端使用高清渲染，需要将SceneView对象的qualityProfile属性设置为highSceneView on Retina DisplaySceneView中的hitTest函数现在可以支持返回贴地表模式下的线和面图层元素hitTest函数新增了include和exclude属性，用来设置哪些图层允许检查hitTest函数返回的结果现在提供更多的属性值，例如相机与鼠标点击处的距离hitTest改进SceneView对象现在提供了一个新的函数 S

21、ceneView.takeScreenshot()用于对当前三维场景截屏，对于截取之后的图像同时支持保存为一个独立的图片文件SceneView截屏随着WebGL技术和客户端浏览器性能的不断完善，三维场景中逐步开放了海量要素实时渲染的能力；截止目前，最新的4.11对点、线、面三种要素类型都不再限制最大的要素渲染数量最新的10.7版本ArcGIS Enterprise以及ArcGIS Online中的SceneView同样取消了过去的限制三维性能新的JSAPI提供了一套全新的客户端要素过滤机制filter，不同于过去的definitionExpression，为filter对象设置过滤器不会触发图层的query操作，同时也不会影响图层后续的数据请求条件，这些都是在客户端完成的。新的过滤器允许通过attributes，time，geometry，distance等多种条件设置要素过滤；在3D场景中，我们甚至可以借助于空间函数来实现更复杂的过滤要素过滤SceneView现在支持通过WASD来控制场景的视角SceneView现在支持针对场景图层中的单个要素启用或禁用阴影效果SceneView现在支持SimpleMarkerSymbol和IconSymbol3DLayer使用triangle形状其他改进