ArcGISAPIforJavaScriptWeb3D开发与实践

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,光照和阴影–高程和地表•构建地图和图层的API3D与2D相似map=newMap({basemap:topo});view=newSceneView({container:viewDiv,map:map});ArcGISAPIforJavaScript3D概述创建一个3D场景ArcGISAPIforJavaScript3D图层ArcGISAPIforJavaScript3D图层图层类型通用图层•ArcGISTiledLayer•WebTiledLayer•FeatureLayer•GraphicsLayer•GroupLayer•StreamLayer•OpenStreetMapLayer3D图层•ArcGISElevationLayer•SceneLayerArcGISAPIforJavaScript3D图层ArcGISTiledLayer•3.xArcGISTiledMapServiceLayer•加载方式•ArcGISforServer10.22之前版本发布的切片服务不支持-解决方法：WebTiledLayer加载varbasemaplayer=newArcGISTiledLayer({//定义一个切片图层url:});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服务代理服务器下载地址：=newWebTiledLayer({//定义一个切片图层urlTemplate:://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-地理索引-支持客户端符号化渲染-…ArcGISAPIforJavaScript3D图层SceneLayer新的图层类型:SceneLayervarlayer=newSceneLayer(url);map.add(layer);ArcGISAPIforJavaScript3D符号ArcGISAPIforJavaScript3D符号Web3D符号•现代简约的规格•符号概念来自Pro•设计3D和2D符号的思想面向未来，灵活和可扩展性Existing2DSymbologyRendererSymbolsSymbols2DSymbolsNew3DSymbologyRendererSymbolsSymbols3DSymbolsSymbolLayersSymbolLayersSymbolLayersArcGISAPIforJavaScript3D图层Web3D符号:平面&立体Web3D“flat”symbollayerWeb3D“volumetric”symbollayerIconObjectLinePathFillExtrudeArcGISAPIforJavaScript3D符号Web3D符号•Symbol–SymbolLayer关系IconObjectLinePathFillExtrudePointSymbol3DLineSymbol3DPolygonSymbol3DMeshSymbol3D注：Icon-IconSymbol3DLayerArcGISAPIforJavaScript3D符号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:colorInfofield:peoplenum,minDataValue:500,maxDataValue:10644,colors:[newColor(white),newColor(red)]}]});ArcGISAPIforJavaScript3D符号Elevation•高程模型•设置高程信息ElevationmodeSymbolelevationonTheGroundDrapedabsoluteHeightZvalue(or0)[+offset]relativeToGroundTerrain+Zvalue(or0)[+offset]layer.elevationInfo={mode:relativeToGround,offset:1000//meters};ArcGISAPIforJavaScript3D符号Web3D符号:Elevation•模型:绝对高度ArcGISAPIforJavaScript3D图层Web3D符号:Elevation•模型:地表ArcGISAPIforJavaScript3DSceneViewArcGISAPIforJavaScript3DSceneViewSceneViewLayersLayersLayers数据2D和3D统一3D场景SceneViewMapLayersLayersLayersArcGISAPIforJavaScript3DSceneViewSceneView•3DView的特有属性–Camera–Environment•2D/3DView的通用属性–Center–Scale/Zoom–Extent*supportedin3Dina“besteffort”basisArcGISAPIforJavaScript3DSceneViewSceneViewCamera–Heading:北极朝上时，逆时针增加角度,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可以是–Camera–Viewpoint–[longitude,latitude](inWGS84)–Geometry或者Geometry的数组–Graphic或者Graphic的数组view.animateTo(target,options);ArcGISAPIforJavaScript3DSceneViewSceneViewanimateTo实现漫游的功能：setInterval(viewToPosition,50));functionviewToPosition(){varviewPosition=view.camera.