Pada kesempatan kali ini, saya akan memperkenalkan Mapbox Vector Tile (MVT), sebuah Vector Tile dengan Ketelitian yang bagus, mampu menampilkan Data Peta dengan Ukuran yang lebih Ringan karena sifatnya yang biner.
Untuk penggunaannya, apabila data peta yang anda miliki bersifat rahasia, yah kembalikan saja dengan format png atau jpg. tetapi apabila data yang akan dipublish itu data yang open, direkomendasikan menggunakan MVT agar hasilnya lebih jernih karena data yang digunakan ialah Vector dan bukan Raster.
Untuk Konfigurasinya, teman-teman harus memiliki Geoserver dan memindahkan Vector Tile Extension ke Geoserver Extension.
Kemudian jangan lupa untuk melakukan enable pada Geoserver, contohnya seperti dibawah:
dan pada index.html, jika menggunakan Mapbox GL JS, tambahkan kode sebagai berikut. contohnya layer yang kita gunakan ialah geodb:Bangunan dan geodb:Road.
map.on('load', function () {
const geoserverUrl = `${window.location.origin}/geoserver/geodb`;
map.addSource('bangunan-source', {
'type': 'vector',
'tiles': [
`${geoserverUrl}/wms?service=WMS&version=1.1.0&request=GetMap&layers=geodb:Bangunan&srs=EPSG:3857&styles=&format=application/vnd.mapbox-vector-tile&bbox={bbox-epsg-3857}&width=256&height=256`
],
'minzoom': 5,
'maxzoom': 22
});
map.addLayer({
'id': 'bangunan-outline',
'type': 'line',
'source': 'bangunan-source',
'source-layer': 'Bangunan',
'paint': {
'line-color': '#ffff00',
'line-width': 1
}
});
map.addSource('road-source', {
'type': 'vector',
'tiles': [
`${geoserverUrl}/wms?service=WMS&version=1.1.0&request=GetMap&layers=geodb:Road&srs=EPSG:3857&styles=&format=application/vnd.mapbox-vector-tile&bbox={bbox-epsg-3857}&width=256&height=256`
],
'minzoom': 5,
'maxzoom': 22
});
map.addLayer({
'id': 'road-layer',
'type': 'line',
'source': 'road-source',
'source-layer': 'Road',
'paint': {
'line-color': '#ff0000',
'line-width': 1
}
});
});
hasilnya sebagai berikut
dengan zoom 22 nya sebagai berikut:
Ukuran tile dengan MVT memang teliti, tetapi dia tidak membawa styling bawaan seperti ArcGIS Vector Tile, maka sesuai dengan kode diatas, perlu ditentukan line maupun fill color sesuai dengan peruntukan webmap nya.
