Creating a Smart 3D City Web App. Pascal Müller, Johannes Schmid

Transcription

1 Creating a Smart 3D City Web App Pascal Müller, Johannes Schmid

2 How to build a web app for urban planning ArcGIS Pro City Engine ArcGIS Portal ArcGIS JS API

3

4 Motivation Urban Planning Available Data: 3D datasets are common and available, but not of all of them are presented in a way that urban planners can use them for decision making Esri Testing: evaluate the workflow of how to build a web app with only Esri tools, find inconsistencies and potential improvements Paradigm shift: questions and problems for urban planning and law of property (ownership, building laws) are increasingly heading towards the third dimension Lack of interactive (web) tools: e.g., to help solving problems like the economical pressure on mixed use areas or to increase public participation in the planning process Requirements: discover not yet implemented functionalities within these tools, such as new widgets for the JS API or improved export options in City Engine Promotion: to have demo web apps that show how the JS API can be used to build web apps with real data

5 Workflow Data Processing Data Publishing UI / UX Input Data MS Access/SQL City Engine/Python ArcGIS Pro ArcGIS Pro ArcGIS Portal ArcGIS Server ArcGIS JS API

6 Input Data Zurich Vancouver Dubai Extent: city 3D building model: LOD2 + building height Usage: floor number, unit area, unit usage Terrain: DTM (tif) Building law: areas for restricted ground floor usage (PDF) Extent: parts of the city Unit footprints on ground level: extracted out of building plans room types: as attributes included in the footprints + floor number Floor and relative height: as attributes included in the footprints Extent: site Unit footprints: extracted out of building plans room types / usage: as attributes included in the footprints + floor number

7 Data Processing: c-through (Zurich) Cleaning-up Enriching data Add # floors Cleanup shapes Align ground floors to terrain Combine shapes by attribute Cut bottom Split upper floors Extrude lower floors Add # splits per floor Split floors in units Add usage + area

8 Original building Attributes building height # lower floors # upper floors

9 cleanup shapes align ground floor combine shapes

10 cut bottom

11 split upper floors extrude lower floors Attributes split.index = floorid # splits per floor

12 split floors to units Attributes split.index = unitid usage area

13 Data Publishing: WebScene ArcGIS Pro Scene Layer + Feature Layer Portal: WebScene with Scene Layer + Terrain

14 APIs ArcGIS JS API layers, renderers, symbols, query amcharts pie chart, serial chart, multiple serials chart nouislider calcite fonts, layout

15 c-through

16 c-through The duplicate layer trick var activelayer = new SceneLayer({ url: url var backgroundlayer = new SceneLayer({ url: url activelayer.visible = true; backgroundlayer.visible = false; scene.addmany([activelayer, backgroundlayer]); Without selection, only activelayer is shown With selection - activelayer is filtered to selected buildings - backgroundlayer is filtered to the inverse

17 c-through Visualization tool controls activelayer renderer - SimpleRenderer initially - UniqueValueRenderer to visualize by usage (SDK sample) - SimpleRenderer with color visual variable to visualize by area: activelayer.renderer = new SimpleRenderer({ symbol: new MeshSymbol3D({ symbollayers: [ new FillSymbol3DLayer({}) ] }), visualvariables: [{ type: "color", field: "AREA", stops: [ { value: valuemin, color: "#FBE789" }, { value: valuemax, color: "#1B90A7" } ] }]

18 Filtering Scene Layer Filtering: new feature in 4.3 var layer = new SceneLayer({ url: "...", definitionexpression: "usage = 'Residential' AND totalheight < 5" layer.definitionexpression = "usage = 'Residential' AND totalheight > 15"; activelayer.definitionexpression = "buildingid IN (25617, 4682)"; backgroundlayer.definitionexpression = "buildingid NOT IN (25617, 4682)";

19 Filtering Filtering is used in c-through for - Selection - Filter selection by floor, usage, area Other ideas - Masking buildings from basemap scene layer - Scenario comparison

20 Querying New feature in 4.3 Methods - queryfeatures() - queryfeaturecount() - queryobjectids() - queryextent() Available both on SceneLayer and SceneLayerView

21 Intermezzo: Layer and LayerView Map SceneView View 1 Layer 1:1 LayerView 1:1 MapView View 2 LayerView

22 Intermezzo: Layer and LayerView Map SceneView View 1 Layer 1:1 LayerView view.whenlayerview(layer).then(function(layerview) { // now you can use layerview

23 Querying Methods: queryfeatures, queryfeaturecount, queryobjectids, queryextent Available both on SceneLayer and SceneLayerView When to use which? SceneLayer Query applied to all features Supports all query types Requires server round trip Requires sever capabilities OK when published from ArcGIS Pro SceneLayerView Query applied to currently visible features Limited query type support (see doc) Returns (almost) immediately Always works

24 Querying Methods: queryfeatures, queryfeaturecount, queryobjectids, queryextent Available both on SceneLayer and SceneLayerView When to use which? - SceneLayer when the whole data set should be queried - SceneLayerView when the features are in view anyway (e.g. after click) Check if SceneLayer supports querying - getfieldusageinfo()

25 Querying Use case: find features that match some criteria var query = new Query({ outfields: ["*"], where: "usage = 'Office'" layer.queryfeatures(query).then(function(result) { result.features.foreach(function(feature) { // process feature }).otherwise(function(error) { console.log(error);

26 Querying Use case: get all attributes for a feature var query = new Query({ outfields: ["*"], objectids: [1290] layer.queryfeatures(query).then(function(result) { var attributes = result.features[0].attributes; //...

27 Querying view.hittest(screenpoint).then(function(hit) { // if user has clicked on a feature... if (hit.results.length > 0) { //...query for attributes using the object ID var clickedfeature = hit.results[0].graphic; var objectid = clickedfeature.attributes[layer.objectidfield]; var query = new Query({ outfields: ["*"], objectids: [objectid] return layer.queryfeatures(query) } }).then(function(result) { if (result) { var attributes = result.features[0].attributes; console.log(attributes); } Use case: get all attributes when user clicks a feature

28 Querying Use case: find distinct values for a field - For example, to show a drop-down list for filtering var query = new Query({ returndistinctvalues: true, outfields: ["usage"], where: "1=1" layer.queryfeatures(query).then(function(result) { var distinctvalues = result.features.map(f => f.attributes["usage"]); // process distinctvalues

29 Querying Use case: query extent of one or multiple buildings - Returned extent contains all objects - Good to frame certain features in view - Layer.queryExtent() returns 2D extent, LayerView.queryExtent() returns 3D extent view.whenlayerview(layer).then(function(layerview) { var query = new Query({ objectids: [143, 534, 761] return layerview.queryextent(query); }).then(function(result) { var extent = result.extent; // process extent

30 Querying Use case: query footprint of building - The geometry returned by queryfeatures is a polygon of the footprint var query = new Query({ returngeometry: true, objectids: [1290] layer.queryfeatures(query).then(function(result) { var footprintpolygon = result.features[0].geometry; // process footprintpolygon

31