arcgis api for javascript analyzing vector tile performance...performance :: looking at both ends of...

44
Hannes Fleischer ArcGIS API for JavaScript Analyzing Vector Tile Performance

Upload: others

Post on 07-Jul-2020

35 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Hannes Fleischer

ArcGIS API for JavaScript Analyzing Vector Tile Performance

Page 2: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Agenda

• Basics :: tile types

• Performance :: looking at both ends of the spectrum

• Analysis :: measuring and visualizing data quality- Vector Tile Decoder- Visualization- Demo

• Data Quality :: reduce vertices and features- Tool suggestions- Demo

Page 3: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Basics :: tile types

• Raster Tiles- Tiled portions of map- Style permanently applied to data- Fixed tiling scheme - Tile size determined by

- File format- Compression- Data quality- Style quality

• Vector Tiles- Tiled portions of data- Style separated from data- Adaptive or fixed tiling scheme- Tile size determined by

- Data quality

Page 4: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Basics :: tile types

-

-

-

-

-

-

-

-

-

-

-

- Tile size determined by- Data quality

Page 5: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Performance :: fast and crisp

• Vector Tiles smaller than 100kB and/or 10000 vertices- load fast (<50ms)- render fast- higher detail LOD’s become available fast enough to replace low detail LOD’s

Page 6: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Performance :: on the heavy side

• Vector Tiles larger than 1000kB and/or 100000 vertices- may load slow, (> 250ms)- may have noticeable rendering time- higher detail LODs may take long to show, thus exposing low detail LOD content

Page 7: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Analysis :: measuring and visualizing data quality

• Vector Tile reader- Tile anatomy- Service structure- Tile decoder

• Data Visualization- Tile payload charting

• Map Visualization- Feature highlights- Vertex density

Page 8: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Analysis :: vector tile coordinates

• Vector Tile Grid- Fixed numbers zero to grid extent- Mapped to geo space by tiling scheme

• Tile size is 512px, default grid size is 4096

• Default grid resolutions- Lod 09 / 1:577790: 19.11m- Lod 06 / 1:361112: 1.19m- …

2 / 2

6 / -1

5 / 7

-12 / 4

0 / 0

15 / 15

Page 9: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Analysis :: vector tile index

• Tiles are split until vertex countis below maximum vertex count

• Tiles at certain LODs may containa high number of vertices

• The last tile in its stack has a largergrid size so overzooming doesnot expose artifacts

Page 10: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Analysis :: vector tile service structure

├─── esriinfo metadata└─── p12

├─── resources│ ├─── fonts more pbfs, "sdf" encoded glyphs│ ├─── info directory info│ ├─── sprites multi resolution sprites│ └─── styles rendering directives├─── tile tiles, bundled or exploded├─── tilemap index└─── root.json service info

Page 11: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Analysis :: vector tile decoder

3 lod_10"!Îø¨•€€ ÿÿÿÿ€€ _minzoom(€€x

Page 12: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

1: 2: 33: 4: 5: l6: o7: d8: _9: 110: 011: 12: 13: 14: 15: "16: 17: !18: Î19: ø20: 21: ¨22: •23: 24: €25: €

Analysis :: vector tile decoder

Page 13: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

1: 000110102: 001100113: 000010104: 000001105: 011011006: 011011117: 011001008: 010111119: 0011000110: 0011000011: 0001001012: 0001100113: 0001100014: 0000000115: 0010001016: 0001010117: 0010000118: 1100111019: 1111100020: 0000001021: 1010100022: 1001010123: 0001000124: 1000000025: 10000000

Analysis :: vector tile decoder

Page 14: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

1: 00011010 ───> 3 2: 00110011 3: 00001010 4: 00000110 5: 01101100 6: 01101111 7: 01100100 8: 01011111 9: 00110001 10: 00110000 11: 00010010 12: 00011001 13: 00011000 14: 00000001 15: 00100010 16: 00010101 17: 00100001 18: 11001110 19: 11111000 20: 00000010 21: 10101000 22: 10010101 23: 00010001 24: 10000000 25: 10000000

Analysis :: vector tile decoder

Page 15: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

1: 00011010 ───> 3/2 2: 00110011 3: 00001010 4: 00000110 5: 01101100 6: 01101111 7: 01100100 8: 01011111 9: 00110001 10: 00110000 11: 00010010 12: 00011001 13: 00011000 14: 00000001 15: 00100010 16: 00010101 17: 00100001 18: 11001110 19: 11111000 20: 00000010 21: 10101000 22: 10010101 23: 00010001 24: 10000000 25: 10000000

Analysis :: vector tile decoder

Page 16: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

1: 00011010 ───> 3/2 ───> layer <─── repeated Layer layers = 3; 2: 00110011 3: 00001010 4: 00000110 5: 01101100 6: 01101111 7: 01100100 8: 01011111 9: 00110001 10: 00110000 11: 00010010 12: 00011001 13: 00011000 14: 00000001 15: 00100010 16: 00010101 17: 00100001 18: 11001110 19: 11111000 20: 00000010 21: 10101000 22: 10010101 23: 00010001 24: 10000000 25: 10000000

Analysis :: vector tile decoder

Page 17: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

1: 00011010 ───> 3/2 ─┬─> layer <─── repeated Layer layers = 3;2: 00110011 ───> 51 └─> length ───────┐3: 00001010 │ 4: 00000110 │5: 01101100 │6: 01101111 │7: 01100100 │8: 01011111 │9: 00110001 │10: 00110000 │ 11: 00010010 │12: 00011001 │13: 00011000 │14: 00000001 │15: 00100010 │16: 00010101 │17: 00100001 │18: 11001110 │ 19: 11111000 │ 20: 00000010 │ 21: 10101000 │ 22: 10010101 │ 23: 00010001 │24: 10000000 │25: 10000000 │

Analysis :: vector tile decoder

Page 18: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

1: 00011010 ───> 3/2 ─┬─> layer <─── repeated Layer layers = 3; 2: 00110011 ───> 51 └─> length ───────┐3: 00001010 ───> 1/2 ─┬─> name │ <─── required string name = 1; 4: 00000110 ───> 6 └─> length ───┐ │5: 01101100 │ │6: 01101111 │ │7: 01100100 │ │8: 01011111 │ │9: 00110001 │ │10: 00110000 <───────────────────────────┘ │ 11: 00010010 │12: 00011001 │13: 00011000 │14: 00000001 │15: 00100010 │16: 00010101 │17: 00100001 │18: 11001110 │ 19: 11111000 │ 20: 00000010 │ 21: 10101000 │ 22: 10010101 │ 23: 00010001 │24: 10000000 │25: 10000000 │

Analysis :: vector tile decoder

Page 19: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

1: 00011010 ───> 3/2 ─┬─> layer <─── repeated Layer layers = 3; 2: 00110011 ───> 51 └─> length ───────┐3: 00001010 ───> 1/2 ─┬─> name │ <─── required string name = 1;4: 00000110 ───> 6 └─> length ───┐ │5: 01101100 ───> l │ │6: 01101111 ───> o │ │7: 01100100 ───> d │ │8: 01011111 ───> _ │ │9: 00110001 ───> 1 │ │10: 00110000 ───> 0 <──────────────┘ │ 11: 00010010 │12: 00011001 │13: 00011000 │14: 00000001 │15: 00100010 │16: 00010101 │17: 00100001 │18: 11001110 │ 19: 11111000 │ 20: 00000010 │ 21: 10101000 │ 22: 10010101 │ 23: 00010001 │24: 10000000 │25: 10000000 │

Analysis :: vector tile decoder

Page 20: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

1: 00011010 ───> 3/2 ─┬─> layer <─── repeated Layer layers = 3; 2: 00110011 ───> 51 └─> length ───────┐3: 00001010 ───> 1/2 ─┬─> name │ <─── required string name = 1;4: 00000110 ───> 6 └─> length ───┐ │5: 01101100 ───> l │ │6: 01101111 ───> o │ │7: 01100100 ───> d │ │8: 01011111 ───> _ │ │9: 00110001 ───> 1 │ │10: 00110000 ───> 0 <──────────────┘ │ 11: 00010010 ───> 2/2 ─┬─> feature │ <─── repeated Feature features = 2;12: 00011001 ───> 25 └─> length ─────┐ │13: 00011000 │ │14: 00000001 │ │15: 00100010 │ │16: 00010101 │ │17: 00100001 │ │18: 11001110 │ │ 19: 11111000 │ │ 20: 00000010 │ │ 21: 10101000 │ │ 22: 10010101 │ │ 23: 00010001 │ │24: 10000000 │ │25: 10000000 │ │

│ │

Analysis :: vector tile decoder

Page 21: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

1: 00011010 ───> 3/2 ─┬─> layer <─── repeated Layer layers = 3; 2: 00110011 ───> 51 └─> length ───────┐3: 00001010 ───> 1/2 ─┬─> name │ <─── required string name = 1; 4: 00000110 ───> 6 └─> length ───┐ │5: 01101100 ───> l │ │6: 01101111 ───> o │ │7: 01100100 ───> d │ │8: 01011111 ───> _ │ │9: 00110001 ───> 1 │ │10: 00110000 ───> 0 <──────────────┘ │ 11: 00010010 ───> 2/2 ─┬─> feature │ <─── repeated Feature features = 2;12: 00011001 ───> 25 └─> length ─────┐ │13: 00011000 │ │14: 00000001 │ │15: 00100010 │ │16: 00010101 │ │17: 00100001 │ │18: 11001110 │ │ 19: 11111000 │ │ 20: 00000010 │ │ 21: 10101000 │ │ 22: 10010101 │ │ 23: 00010001 │ │24: 10000000 │ │25: 10000000 │ │

│ │

Analysis :: vector tile decoder

Page 22: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

10: 00110000 ───> 0 <──────────────┘ │ 11: 00010010 ───> 2/2 ─┬─> feature │ <─── repeated Feature features = 2;12: 00011001 ───> 25 └─> length ─────┐ │13: 00011000 │ │14: 00000001 │ │15: 00100010 │ │16: 00010101 │ │17: 00100001 │ │18: 11001110 │ │ 19: 11111000 │ │ 20: 00000010 │ │ 21: 10101000 │ │ 22: 10010101 │ │ 23: 00010001 │ │24: 10000000 │ │25: 10000000 │ │26: 00010000 │ │27: 00000000 │ │28: 11111111 │ │29: 11111111 │ │30: 00001111 │ │31: 11111111 │ │32: 11111111 │ │33: 00001111 │ │34: 10000000 │ │35: 10000000 │ │36: 00010000 │ │37: 00000000 <─────────────────────────────┘ │38: 00011010 │39: 00001000 │40: 01011111 │41: 01101101 │

Analysis :: vector tile decoder

Page 23: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

4: 00000110 ───> 6 └─> length ───┐ │5: 01101100 ───> l │ │6: 01101111 ───> o │ │7: 01100100 ───> d │ │8: 01011111 ───> _ │ │9: 00110001 ───> 1 │ │10: 00110000 ───> 0 <──────────────┘ │ 11: 00010010 ───> 2/2 ─┬─> feature │ <─── repeated Feature features = 2;12: 00011001 ───> 25 └─> length ─────┐ │13: 00011000 ───> 3/0 ─┬─> geom type │ │ <─── optional GeomType type = 3 [default = UNKNOWN]14: 00000001 ───> 1 └─> point │ │15: 00100010 │ │16: 00010101 │ │17: 00100001 │ │18: 11001110 │ │ 19: 11111000 │ │ 20: 00000010 │ │ 21: 10101000 │ │ 22: 10010101 │ │ 23: 00010001 │ │24: 10000000 │ │25: 10000000 │ │26: 00010000 │ │27: 00000000 │ │28: 11111111 │ │29: 11111111 │ │30: 00001111 │ │31: 11111111 │ │32: 11111111 │ │33: 00001111 │ │34: 10000000 │ │35: 10000000 │ │

│ │

Analysis :: vector tile decoder

Page 24: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

4: 00000110 ───> 6 └─> length ───┐ │5: 01101100 ───> l │ │6: 01101111 ───> o │ │7: 01100100 ───> d │ │8: 01011111 ───> _ │ │9: 00110001 ───> 1 │ │10: 00110000 ───> 0 <──────────────┘ │ 11: 00010010 ───> 2/2 ─┬─> feature │ <─── repeated Feature features = 2;12: 00011001 ───> 25 └─> length ─────┐ │13: 00011000 ───> 3/0 ─┬─> geom type │ │ <─── optional GeomType type = 3 [default = UNKNOWN];14: 00000001 ───> 1 └─> point │ │15: 00100010 ───> 4/2 ─┬─> geometry │ │ <─── repeated uint32 geometry = 4 [packed = true];16: 00010101 ───> 21 └─> length ───┐ │ │17: 00100001 │ │ │18: 11001110 │ │ │ 19: 11111000 │ │ │ 20: 00000010 │ │ │ 21: 10101000 │ │ │ 22: 10010101 │ │ │ 23: 00010001 │ │ │24: 10000000 │ │ │25: 10000000 │ │ │26: 00010000 │ │ │27: 00000000 │ │ │28: 11111111 │ │ │29: 11111111 │ │ │30: 00001111 │ │ │31: 11111111 │ │ │32: 11111111 │ │ │33: 00001111 │ │ │34: 10000000 │ │ │35: 10000000 │ │ │

│ │ │

Analysis :: vector tile decoder

Page 25: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

4: 00000110 ───> 6 └─> length ───┐ │5: 01101100 ───> l │ │6: 01101111 ───> o │ │7: 01100100 ───> d │ │8: 01011111 ───> _ │ │9: 00110001 ───> 1 │ │10: 00110000 ───> 0 <──────────────┘ │ 11: 00010010 ───> 2/2 ─┬─> feature │ <─── repeated Feature features = 2;12: 00011001 ───> 25 └─> length ─────┐ │13: 00011000 ───> 3/0 ─┬─> geom type │ │ <─── optional GeomType type = 3 [default = UNKNOWN]14: 00000001 ───> 1 └─> point │ │15: 00100010 ───> 4/2 ─┬─> geometry │ │ <─── repeated uint32 geometry = 4 [packed = true];16: 00010101 ───> 21 └─> length ───┐ │ │17: 00100001 ───> 4/1 ───> 4x moveto │ │ │18: 11001110 │ │ │ 19: 11111000 │ │ │ 20: 00000010 │ │ │ 21: 10101000 │ │ │ 22: 10010101 │ │ │ 23: 00010001 │ │ │24: 10000000 │ │ │25: 10000000 │ │ │26: 00010000 │ │ │27: 00000000 │ │ │28: 11111111 │ │ │29: 11111111 │ │ │30: 00001111 │ │ │31: 11111111 │ │ │32: 11111111 │ │ │33: 00001111 │ │ │34: 10000000 │ │ │35: 10000000 │ │ │

│ │ │

Analysis :: vector tile decoder

Page 26: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

10: 00110000 ───> 0 <──────────────┘ │ 11: 00010010 ───> 2/2 ─┬─> feature │ <─── repeated Feature features = 2;12: 00011001 ───> 25 └─> length ─────┐ │13: 00011000 ───> 3/0 ─┬─> geom type │ │ <─── optional GeomType type = 3 [default = UNKNOWN]14: 00000001 ───> 1 └─> point │ │15: 00100010 ───> 4/2 ─┬─> geometry │ │ <─── repeated uint32 geometry = 4 [packed = true];16: 00010101 ───> 21 └─> length ───┐ │ │17: 00100001 ───> 4/1 ───> 4x moveto │ │ │18: 11001110 │ │ │ 19: 11111000 │ │ │ 20: 00000010 │ │ │ 21: 10101000 │ │ │ 22: 10010101 │ │ │ 23: 00010001 │ │ │24: 10000000 │ │ │25: 10000000 │ │ │26: 00010000 │ │ │27: 00000000 │ │ │28: 11111111 │ │ │29: 11111111 │ │ │30: 00001111 │ │ │31: 11111111 │ │ │32: 11111111 │ │ │33: 00001111 │ │ │34: 10000000 │ │ │35: 10000000 │ │ │36: 00010000 │ │ │37: 00000000 <───────────────────────────┴─┘ │38: 00011010 │39: 00001000 │40: 01011111 │41: 01101101 │

Analysis :: vector tile decoder

Page 27: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

10: 00110000 ───> 0 <──────────────┘ │ 11: 00010010 ───> 2/2 ─┬─> feature │ <─── repeated Feature features = 2;12: 00011001 ───> 25 └─> length ─────┐ │13: 00011000 ───> 3/0 ─┬─> geom type │ │ <─── optional GeomType type = 3 [default = UNKNOWN]14: 00000001 ───> 1 └─> point │ │15: 00100010 ───> 4/2 ─┬─> geometry │ │ <─── repeated uint32 geometry = 4 [packed = true];16: 00010101 ───> 21 └─> length ───┐ │ │17: 00100001 ───> 4/1 ───> 4x moveto │ │ │18: 11001110 ─┐ │ │ │ 19: 11111000 │ │ │ │ 20: 00000010 └─> 24103 ───> x │ │ │ 21: 10101000 │ │ │ 22: 10010101 │ │ │ 23: 00010001 │ │ │24: 10000000 │ │ │25: 10000000 │ │ │26: 00010000 │ │ │27: 00000000 │ │ │28: 11111111 │ │ │29: 11111111 │ │ │30: 00001111 │ │ │31: 11111111 │ │ │32: 11111111 │ │ │33: 00001111 │ │ │34: 10000000 │ │ │35: 10000000 │ │ │36: 00010000 │ │ │37: 00000000 <───────────────────────────┴─┘ │38: 00011010 │39: 00001000 │40: 01011111 │41: 01101101 │

Analysis :: vector tile decoder

Page 28: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

10: 00110000 ───> 0 <──────────────┘ │ 11: 00010010 ───> 2/2 ─┬─> feature │ <─── repeated Feature features = 2;12: 00011001 ───> 25 └─> length ─────┐ │13: 00011000 ───> 3/0 ─┬─> geom type │ │ <─── optional GeomType type = 3 [default = UNKNOWN]14: 00000001 ───> 1 └─> point │ │15: 00100010 ───> 4/2 ─┬─> geometry │ │ <─── repeated uint32 geometry = 4 [packed = true];16: 00010101 ───> 21 └─> length ───┐ │ │17: 00100001 ───> 4/1 ───> 4x moveto │ │ │18: 11001110 ─┐ │ │ │ 19: 11111000 │ │ │ │ 20: 00000010 └─> 24103 ───> x │ │ │ 21: 10101000 ─┐ │ │ │ 22: 10010101 │ │ │ │ 23: 00010001 └─> 140628 ───> y │ │ │24: 10000000 ─┐ │ │ │25: 10000000 │ │ │ │26: 00010000 └─> 131072 ───> x │ │ │27: 00000000 ───> 0 ───> y │ │ │28: 11111111 ─┐ │ │ │29: 11111111 │ │ │ │30: 00001111 └─> -131072 ───> x │ │ │31: 11111111 ─┐ │ │ │32: 11111111 │ │ │ │33: 00001111 └─> -131072 ───> y │ │ │34: 10000000 ─┐ │ │ │35: 10000000 │ │ │ │36: 00010000 └─> 131072 ───> x │ │ │37: 00000000 ───> 0 ───> y <───────┴─┘ │38: 00011010 │39: 00001000 │40: 01011111 │41: 01101101 │

Analysis :: vector tile decoder

Page 29: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

26: 00010000 └─> 131072 ───> x │ │ │27: 00000000 ───> 0 ───> y │ │ │28: 11111111 ─┐ │ │ │29: 11111111 │ │ │ │30: 00001111 └─> -131072 ───> x │ │ │31: 11111111 ─┐ │ │ │32: 11111111 │ │ │ │33: 00001111 └─> -131072 ───> y │ │ │34: 10000000 ─┐ │ │ │35: 10000000 │ │ │ │36: 00010000 └─> 131072 ───> x │ │ │37: 00000000 ───> 0 ───> y <───────┴─┘ │38: 00011010 ───> 3/2 ─┬─> keys │ <─── repeated string keys = 3;39: 00001000 ───> 8 └─> length ───┐ │40: 01011111 │ │41: 01101101 │ │42: 01101001 │ │43: 01101110 │ │44: 01111010 │ │45: 01101111 │ │46: 01101111 │ │47: 01101101 <───────────────────────────┘ │48: 00101000 │49: 10000000 │ 50: 10000000 │ 51: 00010000 │ 52: 01111000 │ 53: 00000010 <───────────────────────────────┘

Analysis :: vector tile decoder

Page 30: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

26: 00010000 └─> 131072 ───> x │ │ │27: 00000000 ───> 0 ───> y │ │ │28: 11111111 ─┐ │ │ │29: 11111111 │ │ │ │30: 00001111 └─> -131072 ───> x │ │ │31: 11111111 ─┐ │ │ │32: 11111111 │ │ │ │33: 00001111 └─> -131072 ───> y │ │ │34: 10000000 ─┐ │ │ │35: 10000000 │ │ │ │36: 00010000 └─> 131072 ───> x │ │ │37: 00000000 ───> 0 ───> y <───────┴─┘ │38: 00011010 ───> 3/2 ─┬─> keys │ <─── repeated string keys = 3;39: 00001000 ───> 8 └─> length ───┐ │40: 01011111 ───> _ │ │41: 01101101 ───> m │ │42: 01101001 ───> i │ │43: 01101110 ───> n │ │44: 01111010 ───> z │ │45: 01101111 ───> o │ │46: 01101111 ───> o │ │47: 01101101 ───> m <──────────────┘ │48: 00101000 │49: 10000000 │ 50: 10000000 │ 51: 00010000 │ 52: 01111000 │ 53: 00000010 <───────────────────────────────┘

Analysis :: vector tile decoder

Page 31: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

26: 00010000 └─> 131072 ───> x │ │ │27: 00000000 ───> 0 ───> y │ │ │28: 11111111 ─┐ │ │ │29: 11111111 │ │ │ │30: 00001111 └─> -131072 ───> x │ │ │31: 11111111 ─┐ │ │ │32: 11111111 │ │ │ │33: 00001111 └─> -131072 ───> y │ │ │34: 10000000 ─┐ │ │ │35: 10000000 │ │ │ │36: 00010000 └─> 131072 ───> x │ │ │37: 00000000 ───> 0 ───> y <───────┴─┘ │38: 00011010 ───> 3/2 ─┬─> keys │ <─── repeated string keys = 3;39: 00001000 ───> 8 └─> length ───┐ │40: 01011111 ───> _ │ │41: 01101101 ───> m │ │42: 01101001 ───> i │ │43: 01101110 ───> n │ │44: 01111010 ───> z │ │45: 01101111 ───> o │ │46: 01101111 ───> o │ │47: 01101101 ───> m <──────────────┘ │48: 00101000 ───> 5/1 ───> extent │ <─── optional uint32 extent = 5 [default = 4096];49: 10000000 ─┐ │ 50: 10000000 │ │ 51: 00010000 └─> 262144 │ 52: 01111000 │ 53: 00000010 <───────────────────────────────┘

Analysis :: vector tile decoder

Page 32: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

26: 00010000 └─> 131072 ───> x │ │ │27: 00000000 ───> 0 ───> y │ │ │28: 11111111 ─┐ │ │ │29: 11111111 │ │ │ │30: 00001111 └─> -131072 ───> x │ │ │31: 11111111 ─┐ │ │ │32: 11111111 │ │ │ │33: 00001111 └─> -131072 ───> y │ │ │34: 10000000 ─┐ │ │ │35: 10000000 │ │ │ │36: 00010000 └─> 131072 ───> x │ │ │37: 00000000 ───> 0 ───> y <───────┴─┘ │38: 00011010 ───> 3/2 ─┬─> keys │ <─── repeated string keys = 3;39: 00001000 ───> 8 └─> length ───┐ │40: 01011111 ───> _ │ │41: 01101101 ───> m │ │42: 01101001 ───> i │ │43: 01101110 ───> n │ │44: 01111010 ───> z │ │45: 01101111 ───> o │ │46: 01101111 ───> o │ │47: 01101101 ───> m <──────────────┘ │48: 00101000 ───> 5/1 ───> extent │ <─── optional uint32 extent = 5 [default = 4096];49: 10000000 ─┐ │ 50: 10000000 │ │ 51: 00010000 └─> 262144 │ 52: 01111000 ───> 15/1 ───> version │ <─── required uint32 version = 15 [default = 1]53: 00000010 ───> 2 <──────────────────┘

Analysis :: vector tile decoder

Page 33: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Analysis :: vector tile decoder (thank god I learned to code)

let vtileMsg: IDefinedMsg <VTile, VTileBuilder> = Types.define('vectortile', () => new VTileBuilder());vtileMsg.define('key___layer', 0x3, ID____LAYER, (b: VTileBuilder, v: Layer) => b.addLayer(v));

let layerMsg: IDefinedMsg<Layer, LayerBuilder> = Types.define('layer', () => new LayerBuilder());layerMsg.define('key____name', 0x1, ID___STRING, (b: LayerBuilder, v: string) => b.setName(v));layerMsg.define('key_feature', 0x2, ID__FEATURE, (b: LayerBuilder, v: Feature) => b.addFeature(v));layerMsg.define('key_____key', 0x3, ID___STRING, (b: LayerBuilder, v: string) => b.addKey(v));layerMsg.define('key___value', 0x4, ID____VALUE, (b: LayerBuilder, v: IVectorTileValue) => b.addValue(v));layerMsg.define('key__extent', 0x5, ID_VARINT32, (b: LayerBuilder, v: number) => b.setExtent(v));layerMsg.define('key_version', 0xF, ID_VARINT32, (b: LayerBuilder, v: number) => b.setVersion(v));

let featrMsg: IDefinedMsg <Feature, FeatureBuilder> = Types.define('feature', () => new FeatureBuilder());featrMsg.define('key____tags', 0x2, ID_PAKINT32, (b: FeatureBuilder, v: number[]) => b.setTags(v));featrMsg.define('key____type', 0x3, ID_____TYPE, (b: FeatureBuilder, v: any) => b.setGeomType(v));featrMsg.define('key___count', 0x4, ID____COUNT, (b: FeatureBuilder, v: number) => b.setCoordCount(v));

Page 34: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Demo

Page 35: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Data Quality :: eliminate polygon part

• Eliminate Parts that are too small to show- Be aware of pixel size- Optionally remove holes only

arcpy.EliminatePolygonPart_management(in_features,out_feature_class,{condition},{part_area},{part_area_percent},{part_option}

)

Page 36: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Data Quality :: simplify polygon

• Reduce polygon vertices- Be aware of pixel size

arcpy.SimplifyPolygon_cartography(in_features,out_feature_class,algorithm,tolerance,{minimum_area},{error_option},{collapsed_point_option},{in_barriers}

)

Page 37: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Data Quality :: intersect

• Self – intersect features- Be aware of pixel size- Places vertices along edges- Improves Vector Tile generalization

arcpy.Intersect_analysis(in_features,out_feature_class,{join_attributes},{cluster_tolerance},{output_type}

)

Page 38: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Data Quality :: repair geometry

• Sanitizes input

arcpy.RepairGeometry_management(in_features,{delete_null},{validation_method}

)

Page 39: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Data Quality :: dissolve

• Dissolve by unique renderer field set- Can significantly reduce attributive payload- Apply after geometry operations

arcpy.Dissolve_management(in_features,out_feature_class,{dissolve_field},{statistics_fields},{multi_part}, {unsplit_lines}

)

Page 40: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Data Quality

Page 41: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Demo

Page 42: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Analyzing Vector Tile Performance :: resources

• https://github.com/hfleischer/vector-tile-analysis

• https://docs.mapbox.com/vector-tiles/specification/

• https://developers.arcgis.com/javascript/

• https://pro.arcgis.com/de/pro-app/help/mapping/map-authoring/author-a-map-for-vector-tile-creation.htm

• https://woportal.mysynergis.com/BasemapAT/synserver?project=BasemapAT&client=flex

Page 43: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing

Complete answersand select “Submit”

Scroll down to find the feedback section

Select the session you attended

Download the Esri Events app and find your event

Please Take Our Survey on the App

Page 44: ArcGIS API for JavaScript Analyzing Vector Tile Performance...Performance :: looking at both ends of the spectrum ... a high number of vertices ... ArcGIS API for JavaScript Analyzing