This talk was given by Yeonhwa Jeong at the FOSS4G 2019 Bucharest. She introduced how to display sea surface wind data, e.g. ASCAT, WindSAT, SCATSAT of 12.5km or 25km resolution, using Mapbox vector tile specification.

1. VectorTile for SeaWind
Gaia3d.co
Yeonhwa Jeong

2. • Background
• What is the Vector Tile?
• Process
• SeaWind Data spec.
• Develop Environment desc.
• Problems and Solutions
• Live Demo

3. Background
• wind data is 4 dimensional. (x, y, speed, direction)
One factor represented by raster.
Both of the data represented at once
by coloring the vectors.

4. Problems
The result of interpolation covered over land.
The rotated wind symbols seemed to be crashed.

5. What is the Vector Tile?
https://www.maptiler.com/blog/2019/02/what-are-vector-
tiles-and-why-you-should-care.html
https://tilezen.readthedocs.io/en/latest/
https://www.researchgate.net/publication/264244246_Toward_Web_Mapping_with_Vector_Data
Dividing and storing vector data into tiles

6. Vector Tile Specification
• File Format(Encoding Format)
: mvt, application/vnd.mapbox-vector-tile
• Projection and Bounds
: knows the bounds and projection before decoding.
: Web Mercator, the Google tile scheme.
: For examples, https://example.com/17/65535/43602.mvt
(Z : 17, X : 65535, Y : 43602)
https://github.com/mapbox/vector-tile-spec/tree/master/2.1
Google Protocol Buffers
https://www.maptiler.com/google-maps-coordinates-tile-bounds-projection/

7. ASCAT-B
Data spec. resolution : 12.5km, Regular Data
Fields: Latitude, Longitude, Date, Time, Speed, Direction
https://manati.star.nesdis.noaa.gov/datasets/ASCATBData.php

8. WindSAT
Data spec. resolution : 13km, Irregular Data
Fields: Latitude, Longitude, Time, Speed, Direction
https://manati.star.nesdis.noaa.gov/datasets/WindSATData.php

9. SCATSAT
Data spec. resolution : 25km, Irregular Data
Fields: Latitude, Longitude, Date, Time, Speed, Direction
http://projects.knmi.nl/scatterometer/scasa_25_prod/scasa_app.cgi

10. Develop Environment
• Java v1.8
• Spring v4.3.18.RELEASE
• Maven
• Geotools v.17.0
• mapbox-vector-tile-java v2.0.0
• OpenLayers v4.1.0
https://github.com/mapbox/awesome-vector-tiles/

11. Requirements
• Merge 12hour data
and time labeling.
• Latitude and longitude
to custom projection.
(Geostationary,
Lambert conformal co
nic etc.)

12. Merge Datas
Total Count ASCAT-B WINDSAT SCATSAT
12h 500,082 827,336 419,328
1d 3,125,373 2,916,511 783,385
Draw 500,000 features!

13. Workflow
Read Data
Transform
Coordinate
Calculate
Tile Bound
Create MVT
Write MVT File
Display MVT
Styling Wind Barb
Find Points
Buffered*
Skip Data by
Zoom*

14. Problems and Solutions
Too Many Feature points, Browser Died.
Skip data by scale.
Each tile is encoded from (0, 0) to (4096, 4096)

15. Wind barbs size : 64px
Wind data resolution : 12.5km
12.5km
zoom Real Distance Interval (double) Interval (int)
0 4096km (64px * 64km) 327.68 (4096km / 12.5km) 327
1 2048km (64px * 32km) 163.84 (2048km / 12.5km) 163
2 1024km (64px * 16km) 81.92 (1024km / 12.5km) 81
3 512km (64px * 8km) 40.96 (512km / 12.5km) 40
4 256km (64px * 4km) 20.48 (256km / 12.5km) 20
5 128km (64px * 2km) 10.24 (128km / 12.5km) 10
6 64km (64px * 1km) 5.12 (64km / 12.5km) 5
7 32km (64px * 0.5km) 2.56 (32km / 12.5km) 2
8 16km (64px * 0.25km) 1.28 (16km / 12.5km) 1
comparison of mvt tile size

16. Problems and Solutions
Label data was skipped.
So separate data and label-data, The label data is not skipped.

17. Problems and Solutions
Points on Tile Boundaries are Cut Off.
You need to give a buffer.
https://stackoverflow.com/questions/34719478/vector-labels-get-
cutted-since-new-ol-version-3-12-1-and-vectortile-layer

18. Problems and Solutions
Buffered vector tile sample code.
https://github.com/wdtinc/mapbox-vector-tile-java

19. Problems and Solutions
Calculate buffer extent.
Rewrite the code for me with refer to the globalmaptiles.py code.
This project TMS origin
[0,0] in left-top.
This project use
custom projection
GEOS, LCC etc.

20. getResolution
resolution
zoom level
metersToPixels
tile coordinates
meter x, y, z
pixelsToMeters
meter coordinates
pixel x, y, z
getTileBound
bound of tile
tile x, y, z
getBufferedTileBound
bound of buffered tile
tile x, y, z
TileGrid Functions

21. How to get points?
1. For-loop zooms
2. For-loop skipped points
3. Find tile index, this tile is center.
4. For loop 3 * 3 tiles,
check this point is contains in buffered tile.
8, 0, 0 8, 1, 0 8, 2, 0
8, 0, 1 8, 1, 1 8, 2, 1
8, 0, 2 8, 1, 2 8, 2, 2

22. Display and Styling
Use openlayers vector tile layer
tilePixelRatio = extent / tileSize (4096 / 256), MvtLayerParams.class
new ol.layer.VectorTile({
renderMode: 'image',
style: stnStyle['seawind'],
source : new ol.source.VectorTile({
url: APISERVER_URL+'/urlapi/spatialvector/{z}/{x}/{y}.do?',
format: new ol.format.MVT(),
projection: 'EPSG:810002',
tileGrid: new ol.tilegrid.TileGrid({
extent: ol.proj.get('EPSG:810002').getExtent(),
resolutions: [64000, 32000, 16000, 8000, 4000, 2000, 1000, 500, 250]
}),
tilePixelRatio: 16
})
})

23. Live Demo
http://localhost:8180

24. Thank you
yhjeong@gaia3d.com