Runtime ：高效三维开发及应用ArcGIS API for JavaScript Web3D开发与实践

ArcGISAPIforJavaScriptWeb3D开发与实践技术部周正强DesktopWebDeviceServerOnlineContentandServicesPortalWeb3D在整个ArcGIS平台中的定位WebScenes概述3D图层3D符号SceneView总结和展望目录ArcGISAPIforJavaScript3D概述ArcGISAPIforJavaScript3D概述工作原理WebGL+JavaScript配置需求良好的硬件设施和显卡全新的浏览器Chrome9+、Firefox4+、Safari5.1+、Opera12alpha+IE11+注意：手机和Pad的浏览器不支持3D显示ArcGISAPIforJavaScript3D概述数据2D图层数据全新的3D数据(SceneLayer,ArcGISElevationLayer)3D场景–更加真实Camera,光照和阴影高程和地 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 构建地图和图层的API3D与2D相似map=newMap({basemap:"topo"});view=newSceneView({container:"viewDiv",map:map});ArcGISAPIforJavaScript3D概述创建一个3D场景ArcGISAPIforJavaScript3D图层ArcGISAPIforJavaScript3D图层图层类型通用图层ArcGISTiledLayerWebTiledLayerFeatureLayerGraphicsLayerGroupLayerStreamLayerOpenStreetMapLayer3D图层ArcGISElevationLayerSceneLayerArcGISAPIforJavaScript3D图层ArcGISTiledLayer3.xArcGISTiledMapServiceLayer加载方式ArcGISforServer10.22之前版本发布的切片服务不支持-解决方法：WebTiledLayer加载varbasemaplayer=newArcGISTiledLayer({//定义一个切片图层 url:"http://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer"});map.add(basemaplayer);ArcGISAPIforJavaScript3D图层WebTiledLayer（加载第三方服务）varwebtilelayer=newWebTiledLayer({ urlTemplate:'http://${subDomain}.tile.openstreetmap.org/${level}/${col}/${row}.png', subDomains:['a','b','c']});map.add(webtilelayer);加载方式加载ArcGISServer10.22以前的ArcGISTiledLayer服务代理服务器下载地址：https://github.com/Esri/resource-proxyvarbasemaplayer=newWebTiledLayer({//定义一个切片图层urlTemplate:"http://localhost/DotNet/proxy.ashx?http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/${level}/${row}/${col}.jpg"});map.add(basemaplayer);ArcGISAPIforJavaScript3D图层ArcGISElevationLayer高程服务切片影像服务格式:LERC(LimitedErrorRasterCompression)新的图层类型:ArcGISElevationLayer这样可以叠加多个高程图层暂不支持高程数据的查询varlayer=newArcGISElevationLayer(url);map.add(layer);ArcGISAPIforJavaScript3D图层Demo演示ArcGISAPIforJavaScript3D图层I3S（Indexed3DScene）针对3D对象的一种数据服务形式-良好的用户体验-10亿级别要素集-支持LOD-地理索引-支持客户端符号化渲染-…i3sArcGISAPIforJavaScript3D图层SceneLayer新的图层类型:SceneLayervarlayer=newSceneLayer(url);map.add(layer);ArcGISAPIforJavaScript3D符号ArcGISAPIforJavaScript3D符号Web3D符号现代简约的规格符号概念来自Pro设计3D和2D符号的思想面向未来，灵活和可扩展性Existing2DSymbologyRendererNew3DSymbologyRendererArcGISAPIforJavaScript3D图层Web3D符号:平面&立体Web3D“flat”symbollayerWeb3D“volumetric”symbollayerIconObjectLinePathFillExtrudeArcGISAPIforJavaScript3D符号Web3D符号Symbol–SymbolLayer关系注：Icon-IconSymbol3DLayerIconObjectLinePathFillExtrudePointSymbol3DLineSymbol3DPolygonSymbol3DMeshSymbol3DArcGISAPIforJavaScript3D符号PointSymbol3D–平面&立体//CreateobjectSymbolandaddtorendererobjectSymbol=newPointSymbol3D({symbolLayers:[newObjectSymbol3DLayer({width:30000,height:60000,resource:{primitive:"cone"//cylinder},material:{color:"#FFD700"}})]});varobjectSymbolRenderer=newSimpleRenderer({symbol:objectSymbol});layer.renderer=objectSymbolRenderer;ArcGISAPIforJavaScript3D符号Web3D符号LineSymbol3D–平面&立体pathSymbol=newLineSymbol3D({symbolLayers:[newPathSymbol3DLayer({size:10000,material:{color:"blue"}})]});varpathSymbolRenderer=newSimpleRenderer({symbol:pathSymbol});layer.renderer=objectSymbolRenderer;ArcGISAPIforJavaScript3D图层Web3D符号PolygonExtrusionvarextrudePolygonRenderer=newSimpleRenderer({symbol:newPolygonSymbol3D({symbolLayers:[newExtrudeSymbol3DLayer({})]}),visualVariables:[{type:"sizeInfo",field:"peoplenum",minSize:5000,maxSize:500000,minDataValue:500,maxDataValue:10644},{type:"colorInfo"field:"peoplenum",minDataValue:500,maxDataValue:10644,colors:[newColor("white"),newColor("red")]}]});ArcGISAPIforJavaScript3D符号Elevation高程模型设置高程信息layer.elevationInfo={mode:"relativeToGround",offset:1000//meters};ElevationmodeSymbolelevation"onTheGround"Draped"absoluteHeight"Zvalue(or0)[+offset]"relativeToGround"Terrain+Zvalue(or0)[+offset]ArcGISAPIforJavaScript3D符号Web3D符号:Elevation模型:绝对高度ArcGISAPIforJavaScript3D图层Web3D符号:Elevation模型:地表ArcGISAPIforJavaScript3DSceneViewArcGISAPIforJavaScript3DSceneViewSceneViewLayersLayersLayers数据2D和3D统一3D场景SceneViewMapLayersLayersLayersArcGISAPIforJavaScript3DSceneViewSceneView3DView的特有属性CameraEnvironment2D/3DView的通用属性CenterScale/ZoomExtent*supportedin3Dina“besteffort”basisArcGISAPIforJavaScript3DSceneViewSceneViewCameraHeading:北极朝上时，逆时针增加角度,0..360°Tilt:0..180°（0°直降90°水平180°直线上升）Fov:0..180°newCamera({position:[-116.54,33.83,1000],heading:30,tilt:45,fov:50})ArcGISAPIforJavaScript3DSceneViewSceneViewCamera经度、纬度:position高度：z上下旋转角度:tilt观察方向：heading左右旋转角度朝向北极方向为0度ArcGISAPIforJavaScript3DSceneView光照：vardate=newDate("01Jan201510:00GMT-0800");view.environment.lighting.date=date;view.environment.lighting.setTimeForCurrentLocation(hours,minutes);设置时间和日期ArcGISAPIforJavaScript3DSceneView光照设置阴影view.environment.lighting.shadows=true;ArcGISAPIforJavaScript3DSceneView动画animateTo实现简单的视图动画:Target可以是CameraViewpoint[longitude,latitude](inWGS84)Geometry或者Geometry的数组Graphic或者Graphic的数组view.animateTo(target,options);ArcGISAPIforJavaScript3DSceneViewSceneViewanimateTo实现漫游的功能：setInterval(viewToPosition,50));functionviewToPosition(){varviewPosition=view.camera.position;varposX=webMercatorUtils.webMercatorToGeographic(viewPosition).x+0.001;-180>=posX&&(posX=179.999);varcamera=newCamera({position:[posX,0,0],tilt:0,heading:0});view.animateTo(camera);}ArcGISAPIforJavaScript3D总结和展望ArcGISAPIforJavaScript3D展望和总结总结ArcGISAPIforJavaScript4.0:一个同时面向2D和3D的API2D和3D的统一使场景内容更加丰富3D的场景的图层和符号使内容更加真实支持3D的图层类型ArcGISTiledLayerGraphicsLayerFeatureLayerArcGISElevationLayerSceneLayerBeta1底图只支持WebMercator坐标系API4.0：目前是4.0bate1正式版预计2016年年初发布后续更新：支持更多图层类型3D增加新的要素改进性能和视觉效果ArcGISAPIforJavaScript3D展望和总结展望https://developers.arcgis.com/javascript/beta/ArcGISAPIforJavaScriptWeb3D开发与实践技术部：周正强谢谢