Cesium.js ile WMS ve WMTS
Herkese Merhaba 🌐
Bu yazımda 3B veri görselleştirme aracı olan, açık kaynak kodlu javascript kütüphanesi cesium.js kullanarak OGC tarafından yayınlanan WMS ve WMTS veri servis protokolleri ile coğrafi verilerinizi 3B bir harita üzerinde nasıl görüntüleyebileceğinizden bahsedeceğim.
Cesium.js LIDAR verileri, uydu görüntüleri gibi bir çok vektör ve raster veriyi destekler. Ben bu çalışmada OSM’den aldığım ülkemizde bulunan sulak alanlar verisini, sunucu tarafında ise tüm OGC standartlarını destekleyen GeoServer kullandım.
1. WMS
OGC Web Map Service , coğrafi verileri, http protokolü kullanarak sunucudan istemciye iletmek için kullanılan bir standarttır. Veri istemciye raster formatda, öznitelik değerleriyle birlikte iletilir ve resim formatında (JPEG, PNG ,GIF vs.) yayınlanır. Bir sonraki bölümde anlatacağım WMTS in aksine sunucuyla sürekli bağlantıda olduğu için genellikle sık sık güncellenen veri kümelerinin haritalarını sunmak için kullanılır.
Katman görüntülemenin yanında farklı WMS sağlayıcıları için farklılık gösterse de GeoServer clip , buffer vb. işlemleri destekler ve sunucudan GetCapabilities, GetMap, GetFeatureInfo ile farklı standartlarda veri alınabilir. Bu çalışma için bir GetCapabilities isteği oluşturarak ihtiyacımız olan parametrelere erişiyoruz.
Burada style (water_s) GeoServer üzerinde kendi tanımladığımız .sld dosyamızdır. Bunun haricinde cesium.js default olarak WGS 84 ile görüntülenir fakat farklı CRS’leri de destekler bu nedenle eğer verileriniz farklı bir CRS de ise öncesinde haritanızı verileriniz ile ortak bir koordinat sisteminde olacak şekilde tanımlamanız gerekecektir.
//WMS
var wmsImageryProvider = new Cesium.WebMapServiceImageryProvider({
url : 'http://localhost:8084/geoserver/osm/wms',
layers : 'osm_water',
parameters : {
transparent : 'true',
format : 'image/png',
crs : 'EPSG:4326',
styles : 'water_s'
}
});
viewer.imageryLayers.addImageryProvider(wmsImageryProvider); Altlık harita için bir viewer oluşturduktan sonra yukarıdaki kod parçacığı ile verilerimizi görüntüleyebiliriz.
2-WMTS
Web Map Tile Service (WMTS) standardını, WMS’ in tile servisi için optimize edilmiş hali olarak düşünebiliriz. Görüntüleme hızı ve verimliliğini arttırmak amacıyla haritanın tamamı önceden tanımlanmış içerik, kapsam ve çözünürlüğe sahip tile adı verilen küçük görsellere bölünür. Bunun için ilk olarak bütün halindeki harita tek bir tile olarak tanımlanır ve zoom level = 0 adı verilir. Bundan sonraki her zoom seviyesi için tile sayısını 4 kat artırır . Oluşturulan her bir tile 256x256 piksel boyutunda karelerden oluşur ve sol üst köşeden başlayarak “zoom”, “x” ve “y” olacak şekilde koordinatlandırılır.
Örneğin zoom level =2 olan bir harita
Bu birim-bütün ilişkisi ile oluşturulan görseller önbelleğe alınarak sadece kullanıcının görüntülediği yer ve ölçekteki harita istemci tarafından işlenir ve hızlıca görüntülenir.
Diğer WEB tile servisler
Bu bölümde değinmek isteğim ve önemli gördüğüm bir nokta daha var. Diğer popüler tile servisler ile karşılaştırıldğında sadece WMTS görüntüleri raster formatta depolar ve sunar. Mapbox Vector Tiles (MVT) ve OpenStreetMap (OSM) Tile Service ise harita verilerini vektör formatında depolar ve sunar bu da harita oluştururken ve şekillendirirken daha fazla esneklik ve daha yüksek performansı beraberinde getirir. Google Maps Tile Service ise harita verilerini vektör formatında depolar ancak veriler istemci tarafından talep edildiğinde anda dönüştürülerek raster olarak sunulur.
Cesium.js ile yapacağımız uygulama için servisin sunumunda da kullanılması zorunlu olan GetCapabilities isteği ile verimize ait gerekli parametrelerimizi alıyoruz.
//WMTS
var imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
url: 'http://localhost:8084/geoserver/gwc/service/wmts',
layer: 'osm:osm_water_wmts',
style: 'raster',
format: 'image/png',
tileMatrixSetID: 'EPSG:4326',
tileMatrixLabels:['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7'] ,
tilingScheme: new Cesium.GeographicTilingScheme(),
maximumLevel: 7
});
viewer.imageryLayers.addImageryProvider(imageryProvider);
var lowerCorner = [25.93214225769043, 35.828147888183594];
var upperCorner = [44.97602844238281, 42.02083206176758];
var extent = Cesium.Rectangle.fromDegrees(lowerCorner[0], lowerCorner[1], upperCorner[0], upperCorner[1]);
viewer.camera.flyTo({
destination : extent
});Burada ‘tileMatrixLabel’ sırasıyla zoom seviyelerini belirtir . 'flyTo' fonksiyonu ise görüntü yüklendiğinde kameranın verinin bbox ı üzerinde konumlandırılmasını sağlar.
Yukarıda parça parça verdiğim kodların tamamına ve kullandığım kütüphanelere buradan ulaşabilirsiniz.
Okuduğunuz için teşekkür ederim, keyifle kalın.🌞
