Hello@JamesLMilner

Beyond Visualisation in 3D Web GIS

James Milner

Department of Civil, Environmental and Geomatic Engineering, University College London, London, UK WC1E 6BT

Supervisors: Kelvin Wong and Claire Ellul

@JamesLMilner

@JamesLMilner

How the project came about• UCL GIS MSc trip down to OS

• Initially performance testing for WebGL across devices (zzzz…)

• This was too similar to a previous project

• 3D Web GIS!

• May 29th - Meeting with David Capstick and Guy Heathcote

@JamesLMilner

Project aims To develop a plugin free 3D web GIS that implements:

o Selection

o Attribute retrieval

o Layer colouring

o 3D editing

o 3D buffering

o Distance and surface area measurement

“To assess the suitability of WebGL and Three.js with a spatial database backend as a platform for 3D web GIS.”

“To undertake a user study assess the merits and drawback of the developed system.”

@JamesLMilner

Protoyping

@JamesLMilner

Data• Ordnance Survey 3D Data

• Had the choice between

Sheffield and Newcastle

• Esri Geodatabase

Feature NameFeature Geometry

TypeNumber of Features

Shapefile Size (kilobytes)

HeightedITNRoadNode Point 1470 64

HeightedITNRoadLink Line 2086 762

Vegetation MultiPatch 139 10,476

HeightedOSMM_TopoLine Line 8998 2,008

HeightedOSMM_TopoArea Polygon 21469 22,506

Walls MultiPatch 300 2,830

Roofs MultiPatch 300 1,968

SimpleBuildingHeights Polygon 5080 2,547

Bridges MultiPatch 3 132

Iconic_Buildings MultiPatch 4 1,784

@JamesLMilner

Database Setup• PostgreSQL / PostGIS

• Upload using FME Data Workbench

• Add auto-incrementing Big Serial for IDs

@JamesLMilner

The Web GIS Client• Nicknamed ‘Lacuna’ – ‘an unfilled space; a gap’

• Based off the UI’s of ArcGIS and QGIS to retain familiarity

• Responsive panes to handle different device sizes and resizing

@JamesLMilner

Iterate, iterate, iterate

@JamesLMilner

Layers• Name

• Colour

• Zoom To

• Retrieve all attributes (Iffy!)

@JamesLMilner

Toolbar

• Button Images

• jQuery drop down menu

• Don’t ask about the rabbit

@JamesLMilner

Convenience Functions

• Camera Options

• Pointer Helper

• Canvas Colour

• Axis Options

• Wireframe Toggle

@JamesLMilner

Distance and Surface Area

𝑑=√ (𝑥2−𝑥1 )2+( 𝑦2− 𝑦1 )2+ (𝑧2−𝑧 1 )2

@JamesLMilner

3D Buffers• Spherical, Cylinder, Box

• Opacity

• Parameters (height, width etc)

@JamesLMilner

Single Selection• Pulls appropriate

• Convert screen coordinates into Cartesian

• Unprojected to 3D coordinate space

• Raycasting

• Hover and tap A

@JamesLMilner

Multi Selection• Multi Select (Marquee)

• Unprojection of coordinates

• Hold A and drag

@JamesLMilner

Attribute Retrieval• Attributes Retrieved through a button

• jQuery AJAX call

• Orders and puts into a nice table

• Highlighting in table and scene

@JamesLMilner

Object Editing• Delete

• Copy

• Translate

• Scale

• Rotate

@JamesLMilner

Vertex Editing

@JamesLMilner

User Study• 10 participants assess various aspects of the GIS system

• Major issues were with load times

• System feedback is important

• Everything should be intuitive: make it obvious

@JamesLMilner

Issues• 3D Triangulation

• FME writes to WKT XYZ M

• PostGIS 3D support is hit and miss

• Interoperability is ‘hacky’

@JamesLMilner

Further Development• 3D Thematic Mapping ( Easy )

• Topological Model ( Hard )

• Texturing ( Medium )

• More spatial analysis tools (Varying)

@JamesLMilner

If I did it again• Geometry simplification (speed vs fidelity)

• A more robust approach to development

• Bootstrap might have aided responsive design

@JamesLMilner

Future plans for the project• Code is on GitHub… but it is a complete mess (sorry!)

• I’d really like to refactor it

• Three.js has had some interesting developments

• Have a persistent live demo on my site

• Dissertation PDF, Poster, GISRUK Draft Paper available

@JamesLMilner

What I am doing now…I currently work for Esri UK as a Developer Evangelist

I am aiming to a paper published in the GISRUK 2015 Conference Proceedings for the project

I run a website: loxodrome.co.uk

I have a storymap: loxodrome.co.uk/storymap

@JamesLMilner

Thanks

@JamesLMilner

Questions?