ArcGISAPIforJavaScript

Building3DWebAppsJavierGutierrez,Bj?rnSvenssonArcGISAPIforJavaScript

Building3DWebAppsJavierGutierrez,Bj?rnSvensson/javascript/beta/AgendaIntroductionFrom3.xto4.0Layers3DVisualizationSceneViewWidgetsWhat’snextIntroductionWhatistheArcGISAPIforJavaScript?AllowsJavaScriptdeveloperstobuildapplicationsforwebbrowsersProvidesvisualmappingcomponentandwidgetsSupportformanydifferentlayertypes(datasources)AnalysisandgeoprocessingIntegrationwithArcGISplatformsecurity,sign-in,premiumservicesBasics-ArcGISAPIforJavaScriptHowtogetJSAPIAPILibraryCDN(contentdeliverynetwork)-Hostedat/4.0beta1/

OnlineoptimizerDownload/javascript/

Beta/javascript/beta/

Licensing/en/terms/faq/

3DinArcGISAPIforJavaScriptSameArcGISAPI,builtwithmap&layers,forGISanalysisandvisualizationData2Dtiles,maps,featuresNew3Ddata(SceneLayer,ElevationLayer)3Dconcepts–morerealisticCamera,LightandShadowsGroundsurfacewithElevationSceneViewerandWebScenes3DinArcGISAPIforJavaScriptHowdoesitwork?WebGL+JavaScript(ECMAScript5)RequirementsGoodhardwarew/

GraphicsCardModernWebBrowserLimitationsWebMercatoronly(beta1)LimitednumberoffeaturesArcGISAPIforJavaScript

From3.xto4.0/javascript/beta/From3.xto4.0UsingviewsWorkingwithpropertiesWorkingwithpromisesMapandlayerspecificsModuleandpackageupdatesAMDonlyDifferentsystemrequirements/javascript/beta/guide/migrating/

PrimaryinterfaceUnifiedfor2Dand3D2Dand3DspecificviewsMapView

|SceneView1.UsingviewsExtendingto3D-oneAPIforboth2Dand3DMapLayersLayersLayersFrom3.xto4.0Createabasic3Dmap

<script>varmap,view;require(["esri/Map","esri/views/SceneView","dojo/domReady!"],function(Map,SceneView){

map=newMap({basemap:"streets"});

view=newSceneView({container:"viewDiv",map:map,scale:240000000});});</script>SAMPLE2.WorkingwithProperties/javascript/beta/guide/working-with-props//blog/arcgis-js-api-4-0beta1-accessors//blog/fun-with-accessors-in-arcgis-js-4beta1/Old(3.x)New(4.0)Readperty

ormap.getProperty()pertyWriteperty=10

ormap.setProperty(10)perty=10Changeeventmap.on("extent-change",...)view.watch("extent",...)From3.xto4.03.WorkingwithpromisesApromiseisarepresentationofafuturevaluereturnedfromasynctaskCoreobjects(Map,Layer)arePromisesPromisesareinoneofthreestates:pendingresolvedrejected/javascript/beta/guide/working-with-promises/

map.on("load",function(){

//mapisinitialized});map.then(function(){

//mapisinitialized});ArcGISAPI3.xArcGISAPI4.0view.then(function(){

//viewisinitialized});From3.xto4.0DetectWebGLsupportwithview.then

view.then(function(){//Viewsuccessfullyloaded,//showviewDiv},function(){//Viewwasrejected,//showwebglunsupportedmessage//andturnofftheviewDiv});

SAMPLE4.Mapandlayerspecficchangesmap.addLayer(layer)map.add(layer)properbasemapandoperationallayersseparationFrom3.xto4.05.Moduleandpackageupdates/javascript/beta/guide/module-updates/

From3.xto4.06.AMDonlyFrom3.xto4.07.Differentsystemrequirements3Dmapping:supportedinwebbrowsersthatsupportWebGLIE11ChromeFirefoxSafariNomobileandiPadsupportfor3D.From3.xto4.0LayersBeta1–TypesoflayersLayerArcGISTiledLayer

FeatureLayer

GraphicsLayer

GroupLayer

OpenStreetMapLayer

WebTiledLayer3D-specificlayersArcGISElevationLayer

SceneLayerElevationlayersElevationservicesTiledimageserviceFormat:LERC(LimitedErrorRasterCompression)Newlayertype:ArcGISElevationLayerMultipleelevationlayerswilloverlayjustasmaplayerswouldPlanned:elevationdataqueriesvarlayer=newArcGISElevationLayer(url);

map.add(layer);LERC3DBasemaphasdefaultelevationlayers//StorethedefaultelevationlayersvarelevationLayers=map.basemap.elevationLayers.getAll();…

map.basemap.elevationLayers.clear();SAMPLESceneLayers3Dobjectsservedini3sformatSpatiallyindexedAutomaticlevelofdetailNewlayertype:SceneLayervarlayer=newSceneLayer(url);

map.add(layer);i3si3s=Indexed3DScene

Openspecification:/Esri/i3s-spec

Featurelayersvarurl="/.../05_HurricaneAndrew_1992/FeatureServer/0";

varlayer

=newFeatureLayer(url,{

mode:FeatureLayer.MODE_SNAPSHOT

});

map.add(layer);3DSymbologyWeb3DSymbologyModernandsimplespecConceptsfromJavaScriptandProsymbologyDesignwith3Dand2Dinmindfutureproof,flexibleandextensibleExisting2DSymbologyRendererSymbolsSymbols2DSymbolsNew3DSymbologyRendererSymbolLayersSymbolLayersSymbolLayersWeb3DSymbology:flatvs.volumetricWeb3D“flat”symbollayerWeb3D“volumetric”symbollayerIconObjectLinePathFillExtrudeWeb3DSymbologySymbol–SymbolLayerrelationshipsIconObjectLinePathFillExtrudePointSymbol3D

LineSymbol3D

PolygonSymbol3D

MeshSymbol3D

PointSymbol3D–flatvs.volumetric//CreateobjectSymbolandaddtorenderervar

objectSymbol=newPointSymbol3D({

symbolLayers:[newObjectSymbol3DLayer({

width:70000,

height:100000,

resource:{

primitive:"cone"

},

material:{

color:"#FFD700"

}

})]});objectSymbolRenderer=newSimpleRenderer({symbol:objectSymbol});layer.renderer=objectSymbolRenderer;SAMPLEWeb3DSymbologyPointSymbol3D+ObjectSymbol3DLayervarsymbolLayer=newObjectSymbol3DLayer({

resource:{

primitive:"cylinder"

},

material:{

color:[255,64,64]

},

width:80000,//inmeters

height:500000//inmeters

});

varsymbol=newPointSymbol3D(symbolLayer);

varrenderer=newSimpleRenderer(symbol);

layer.renderer=renderer;Web3DSymbologyUniqueValueRenderervarrenderer=newUniqueValueRenderer(null,"CategoryLegend");

varsymbolLayer=newObjectSymbol3DLayer({

material:{color:[197,0,255]},

resource:{primitive:"cylinder"},

width:110000

});

renderer.addValue("Category5Hurricane",newPointSymbol3D(symbolLayer));//addothervalueslayer.set("renderer",renderer);VisualVariablesrenderer.setSizeInfo({

field:"WIND_SPEED",

minSize:3,

maxSize:20,

minDataValue:5,

maxDataValue:50

});

renderer.setColorInfo({

field:"M086_07",

minDataValue:0,

maxDataValue:100,

colors:[

newColor([255,255,255]),

newColor([127,127,0])

]

});renderer.set("visualVariables",[

{

type:"sizeInfo",//new

axis:"all",//new

field:"WIND_SPEED",

minSize:3,

maxSize:20,

minDataValue:5,

maxDataValue:50

},{

type:"colorInfo",//new

field:"M086_07",

minDataValue:0,

maxDataValue:100,

colors:[

newColor([255,255,255]),

newColor([127,127,0])

]

}

]);ArcGISAPI3.12ArcGISAPI4.0Web3DSymbologyrenderer.set("visualVariables",[

{

"type":"sizeInfo",

"field":"WIND_KTS",

"minDataValue":20,

"maxDataValue":150,

"minSize":60000,

"maxSize":450000,

"axis":"height"

},

{

"type":"sizeInfo",

"field":"PRESSURE",

"minDataValue":920,

"maxDataValue":1020,

"minSize":40000,

"maxSize":150000,

"axis":"widthAndDepth"

}

]);Web3DSymbologyrenderer.set("visualVariables",[

{

"type":"colorInfo",

"field":"WIND_KTS",

"minDataValue":20,

"maxDataValue":150,

"colors":[

[64,255,64],

[255,64,64]

]

}

]);Web3DSymbologyPolygonExtrusionextrudePolygonRenderer=newSimpleRenderer({

symbol:newPolygonSymbol3D({symbolLayers:[

newExtrudeSymbol3DLayer({

size:1000000,

material:{

color:[128,128,255]

}

})

]}),

visualVariables:[{

type:"sizeInfo",

field:"POP07_SQMI",

minSize:40000,

…SAMPLEElevationalignmentElevationInfoElevationmodesSettingtheelevationbehaviorElevationmodeSymbolelevation"onTheGround"Draped"absoluteHeight"Zvalue(or0)[+offset]"relativeToGround"Terrain+Zvalue(or0)[+offset]layer.elevationInfo={

mode:"relativeToGround",

offset:1000//meters

};Web3DSymbology:ElevationMode:AbsoluteheightWeb3DSymbology:ElevationMode:OnTheGroundSceneViewSceneViewLayersLayersLayersPrimaryinterfaceUnifiedfor2Dand3D3DspecificviewSceneViewMapLayersLayersLayersSceneViewCorecomponentof3DAPIRendering,Navigation,GroundSpecific3DViewpropertiesCameraEnvironmentCommon2D/3DViewpropertiesCenter*Scale/Zoom*Extent*Rotation**supportedin3Dina“besteffort”basisSceneViewCameraNewclassHeading:clockwise,0..360°Tilt:0..180°0°straightdown90°horizontal180°straightupnewCamera({

position:newPoint({

x:-116.54,//longitude

y:33.83,//latitude

z:1000,//altitudeinmeters

spatialReference:newSpatialReference(4326)}),

heading:30,//indegrees

tilt:45//indegrees

})SceneViewModifyingthecamera//view.camera.heading=0;doesn‘twork//needtomodifyandre-setthecameravarmyCamera=view.camera;myCamera.heading=0;view.camera=myCamera;CameraSceneViewanimateToSimpleviewanimationswithanimateTo:TargetcanbeCamera[longitude,latitude](inWGS84)AnyGeometryobject,oranarrayofGeometryobjectsGraphic,arrayofGraphicview.animateTo(target,options);SceneViewEasyNavigationwithanimateTovarheading=…;vartilt=…;view.animateTo({heading:heading});view.animateTo({tilt:tilt});SAMPLESceneView:SunlightSettime/dateEnableshadowsvardate=newDate("01Jan201510:00GMT-0800");

view.environment.lighting.date=date;

view.environment.lighting.setTimeForCurrentLocation(hours,minutes);view.environment.lighting.shadows=true;SceneViewEnvironment:lightandshadows//SettheenvironmentinSceneViewview.environment={lighting:{

directShadows:true,

date:newDate("SunMar15201509:00:00GMT+0100")

}};SAMPLEWidgetsBeta1–Widg