arcgis api for javascript analyzing vector tile performance...performance :: looking at both ends of...
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/1.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/2.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/3.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/4.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/5.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/6.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/7.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/8.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/9.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/10.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/11.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/12.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/13.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/14.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/15.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/16.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/17.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/18.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/19.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/20.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/21.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/22.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/23.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/24.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/25.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/26.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/27.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/28.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/29.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/30.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/31.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/32.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/33.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/34.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/35.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/36.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/37.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/38.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/39.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/40.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/41.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/42.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/43.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022013021/5f27f18833b07e151a410e6c/html5/thumbnails/44.jpg)