leveragi ng vector t ile layers - esri · newnew vectortilelayervectortilelayer(({{ ... 2019 esri...
TRANSCRIPT
Leveraging Vector Tile Layersin Web Apps
Patrick Arlt | René Rubalcava
slides: https://git.io/fjrz4
1 / 21
Agenda
What are Vector Tiles?Bene�tsGotchasCool stuff
2 / 21
What are Vector Tiles?Geographic data > Pre cooked tilesTiles are just binary data ( )Styles de�ned in separate JSON �leDrawn on the client using WebGL
PBF
3 / 21
What is a style?
version - style speci�cation version. always set to 8sprite - sprite images and data, used for patterns and icons
glyphs - font source for the tiles
sources - data sources for tiles, can be multiple sources
layers - de�ne how layers of the tiles will rendered
Example Style JSON
4 / 21
Bene�ts
In�nite resolution
Smooth zoomingEasy to customizeLow disk space (world = ~20 Gb)Fast cook times (world = ~8 hours)IndexableOverzoom
5 / 21
GotchasAttribute data for styling onlyLimited interactionFeatureLayer is faster in some cases
6 / 21
Cool stuffWatercolour basemapVector Tile Style Editor
7 / 21
Vector Tile Style Editor
Customize the style of your own or Esri's vector tiles styles8 / 21
Loading Styles// Load by style url// Load by style url newnew VectorTileLayerVectorTileLayer(({{ url url:: 'https://www.arcgis.com/sharing/rest/content/items/.../resources/styles/root.json''https://www.arcgis.com/sharing/rest/content/items/.../resources/styles/root.json' }}))
// Load tile service// Load tile service // uses default style of service// uses default style of service newnew VectorTileLayerVectorTileLayer(({{ url url:: 'https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer''https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer' }}))
// Load by portalItem// Load by portalItem newnew VectorTileLayerVectorTileLayer(({{ portalItem portalItem:: {{ id id:: 'itemid''itemid' }} }}))
9 / 21
Load Styles// Load with style JSON// Load with style JSON newnew VectorTileLayerVectorTileLayer(({{ style style:: {{ version version:: 88,,
sources sources:: {{ esri esri:: {{ type type:: "vector""vector",, url url:: "https://VectorTileServiceURL""https://VectorTileServiceURL" }} }},, layers layers:: [[......]] }} }}))
10 / 21
Styles and InteractivityDe�ne style by JSONCan interact with Vector Style layersNo attribute data other than what's needed to renderGeometries can be split on tiles
constconst vtLayer vtLayer == newnew VectorTileLayerVectorTileLayer(({{ style style:: {{ layers layers:: [[......]] glyphs glyphs:: ...... sprite sprite:: ...... sources sources:: {{ ...... }} version version:: 88 }} }}));;
11 / 21
Interactivity
viewview..onon(("pointer‑move""pointer‑move",, eventevent =>=> {{ view view..hitTesthitTest((eventevent))..thenthen(((({{ results results }})) =>=> {{ // returns graphics with attribute data// returns graphics with attribute data // on the layer in the style that you// on the layer in the style that you // are interacting with// are interacting with }}));; }}));;
12 / 21
Interactivity
13 / 21
Paint Propertiesviewview..onon(("pointer‑move""pointer‑move",, eventevent =>=> {{ view view..hitTesthitTest((eventevent))..thenthen(((({{ results results }})) =>=> {{ constconst styles styles == results results..filterfilter((......))..mapmap((......));; styles styles..forEachforEach((xx =>=> {{
constconst paint paint == vtLayer vtLayer..getPaintPropertiesgetPaintProperties((xx..layerNamelayerName));; ifif ((paintpaint[["fill‑color""fill‑color"]])) {{ // change paint fill color// change paint fill color paint paint[["fill‑color""fill‑color"]] == chroma chroma..randomrandom(())..hexhex(());; vtLayer vtLayer..setPaintPropertiessetPaintProperties((xx..layerNamelayerName,, paint paint)) }} }}));; }}));; }}))
14 / 21
Paint Properties
15 / 21
Style App to custom basemapsCSS Style guideCustom themes
.my‑theme .esri‑widget,.my‑theme .esri‑widget,
......
.my‑theme .esri‑widget a.my‑theme .esri‑widget a {{ background‑colorbackground‑color:: #c69 #c69;; colorcolor:: #fff #fff;; }}
<<bodybody classclass==""my‑thememy‑theme"">> </</bodybody>>
16 / 21
17 / 21
Where can I get more info?
18 / 21
19 / 21
20 / 21
21 / 21