ArcGIS API for JavaScript Web3D開發(fā)與實踐 Esri中國用戶大會

ArcGISAPIforJavaScript

Web3D開發(fā)與實踐

技術(shù)部周正強(qiáng)DesktopWebDeviceServerOnlineContentandServicesPortalWeb3D在整個ArcGIS平臺中的定位WebScenes概述3D圖層3D符號SceneView總結(jié)和展望目錄ArcGISAPIforJavaScript3D概述ArcGISAPIforJavaScript3D概述工作原理WebGL+JavaScript配置需求良好的硬件設(shè)施和顯卡全新的瀏覽器Chrome9+、Firefox4+、Safari5.1+、Opera12alpha+

IE11+注意：手機(jī)和Pad的瀏覽器不支持3D顯示ArcGISAPIforJavaScript3D概述數(shù)據(jù)2D圖層數(shù)據(jù)全新的3D數(shù)據(jù)(SceneLayer,ArcGISElevationLayer)3D場景–更加真實Camera,光照和陰影高程和地表構(gòu)建地圖和圖層的API3D與2D相似map=newMap({

basemap:"topo"

});

view=newSceneView({

container:"viewDiv",

map:map

});ArcGISAPIforJavaScript3D概述創(chuàng)建一個3D場景ArcGISAPIforJavaScript3D圖層ArcGISAPIforJavaScript3D圖層圖層類型

通用圖層ArcGISTiledLayerWebTiledLayerFeatureLayerGraphicsLayerGroupLayerStreamLayerOpenStreetMapLayer

3D圖層ArcGISElevationLayerSceneLayerArcGISAPIforJavaScript3D圖層ArcGISTiledLayer3.xArcGISTiledMapServiceLayer加載方式

ArcGISforServer10.22之前版本發(fā)布的切片服務(wù)不支持

-解決方法：WebTiledLayer加載

varbasemaplayer=newArcGISTiledLayer({//定義一個切片圖層

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

});

map.add(basemaplayer);ArcGISAPIforJavaScript3D圖層WebTiledLayer（加載第三方服務(wù)）varwebtilelayer=newWebTiledLayer({

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

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

map.add(webtilelayer);

加載方式

加載ArcGISServer10.22以前的ArcGISTiledLayer服務(wù)

代理服務(wù)器下載地址：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高程服務(wù)切片影像服務(wù)格式:LERC(LimitedErrorRasterCompression)新的圖層類型:ArcGISElevationLayer這樣可以疊加多個高程圖層暫不支持高程數(shù)據(jù)的查詢varlayer=newArcGISElevationLayer(url);

map.add(layer);ArcGISAPIforJavaScript3D圖層Demo演示ArcGISAPIforJavaScript3D圖層I3S（Indexed3DScene）針對3D對象的一種數(shù)據(jù)服務(wù)形式

-良好的用戶體驗

-10億級別要素集

-支持LOD

-地理索引

-支持客戶端符號化渲染

-…i3sArcGISAPIforJavaScript3D圖層SceneLayer新的圖層類型:SceneLayervarlayer=newSceneLayer(url);

map.add(layer);ArcGISAPIforJavaScript3D符號ArcGISAPIforJavaScript3D符號Web3D符號現(xiàn)代簡約的規(guī)格符號概念來自Pro設(shè)計3D和2D符號的思想

面向未來，靈活和可擴(kuò)展性Existing2DSymbologyRendererSymbolsSymbols2DSymbolsNew3DSymbologyRendererSymbolsSymbols3DSymbolsSymbolLayersSymbolLayersSymbolLayersArcGISAPIforJavaScript3D圖層Web3D符號:平面&立體Web3D“flat”symbollayerWeb3D“volumetric”symbollayerIconObjectLinePathFillExtrudeArcGISAPIforJavaScript3D符號Web3D符號Symbol–SymbolLayer關(guān)系IconObjectLinePathFillExtrudePointSymbol3DLineSymbol3DPolygonSymbol3DMeshSymbol3D注：Icon-IconSymbol3DLayerArcGISAPIforJavaScript3D符號PointSymbol3D–平面&立體//CreateobjectSymbolandaddtorenderer

objectSymbol=newPointSymbol3D({

symbolLayers:[newObjectSymbol3DLayer({

width:30000,

height:60000,

resource:{

primitive:"cone"http://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高程模型設(shè)置高程信息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數(shù)據(jù)2D和3D統(tǒng)一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經(jīng)度、緯度:position高度：z上下旋轉(zhuǎn)角度:tilt觀察方向：heading

左右旋轉(zhuǎn)角度朝向北極方向為0度ArcGISAPIforJavaScript3DSceneView光照：vardate=newDate("01Jan201510:00GMT-0800");

view.environment.lighting.date=date;

view.environment.lighting.setTimeForCurrentLocation(hours,minutes);設(shè)置時間和日期ArcGISAPIforJavaScript3DSceneView光照設(shè)置陰影view.environment.lighting.shadows=true;ArcGISAPIforJavaScript3DSceneView動畫animateTo實現(xiàn)簡單的視圖動畫:Target可以是CameraViewpoint[longitude,latitude](inWGS84)Geometry或者Geometry的數(shù)組Graphic或者Graphic的數(shù)組view.animateTo(target,options);ArcGISAPIforJavaScript3DSceneViewSceneViewanimateTo實現(xiàn)漫游的功能：setInterval(viewToPosition,50));

functionviewToPosition(){

varviewPosition=view.camera.position;

varposX=webMercatorUtils.webMerca