ArcGIS API for JavaScript Web3D开发与实践 Esri中国用户大会

ArcGISAPIforJavaScript

Web3D开发与实践

技术部周正强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图层图层类型

通用图层ArcGISTiledLayerWebTiledLayerFeatureLayerGraphicsLayerGroupLayerStreamLayerOpenStreetMapLayer

3D图层ArcGISElevationLayerSceneLayerArcGISAPIforJavaScript3D图层ArcGISTiledLayer3.xArcGISTiledMapServiceLayer加载方式

ArcGISforServer10.22之前版本发布的切片服务不支持

-解决方法：WebTiledLayer加载

varbasemaplayer=newArcGISTiledLayer({//定义一个切片图层

url:"/arcgis/rest/services/World_Topo_Map/MapServer"

});

map.add(basemaplayer);ArcGISAPIforJavaScript3D图层WebTiledLayer（加载第三方服务）varwebtilelayer=newWebTiledLayer({

urlTemplate:'http://${subDomain}./${level}/${col}/${row}.png',

subDomains:['a','b','c']});

map.add(webtilelayer);

加载方式

加载ArcGISServer10.22以前的ArcGISTiledLayer服务

代理服务器下载地址：https:///Esri/resource-proxyvarbasemaplayer=newWebTiledLayer({//定义一个切片图层

urlTemplate:"http://localhost/DotNet/proxy.ashx?/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符号的思想

面向未来，灵活和可扩展性Existing2DSymbologyRendererSymbolsSymbols2DSymbolsNew3DSymbologyRendererSymbolsSymbols3DSymbolsSymbolLayersSymbolLayersSymbolLayersArcGISAPIforJavaScript3D图层Web3D符号:平面&立体Web3D“flat”symbollayerWeb3D“volumetric”symbollayerIconObjectLinePathFillExtrudeArcGISAPIforJavaScript3D符号Web3D符号Symbol–SymbolLayer关系IconObjectLinePathFillExtrudePointSymbol3DLineSymbol3DPolygonSymbol3DMeshSymbol3D注：Icon-IconSymbol3DLayerArcGISAPIforJavaScript3D符号PointSymbol3D–平面&立体//CreateobjectSymbolandaddtorenderer

objectSymbol=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高程模型设置高程信息ElevationmodeSymbolelevation"onTheGround"Draped"absoluteHeight"Zvalue(or0)[+offset]"relativeToGround"Terrain+Zvalue(or0)[+offset]layer.elevationInfo={

mode:"relativeToGround",

offset:1000//meters

};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.webMerca