Şubat 28, 2020
cesiumjs-logo

CesiumJS – Temel 3 Boyutlu Harita Gösterimi

Şuana kadar sürekli iki boyutlu haritalardan bahsettik ama haritacılıkta üç boyut olmak zorunda, yeryüzünü iki boyutlu temsil etmenin yolunu bulduk fakat dünyamız üç boyutlu. Bu yazıda üç boyutlu haritaları nasıl kullanabileceğimize bakacağız. Openlayers ve Leaflet‘e benzer amaçlarla üretilmiş CesiumJS kütüphanesi web tabanlı üç boyutlu harita uygulamaları geliştirmemize imkan sağlıyor.

2011 yılında geliştirimeye başlanan bu Javascript kütüphanesi 2012 yılında ilk kez release edilerek geliştiricilerin kullanımına açık-kaynak olarak sunulmuş durumda. Dünya çapında oldukça yaygın kullanıma sahip olması ile birlikte gelmişmiş bir topluluk desteği de mevcut. Biz de şimdi ilk üç boyutlu harita uygulamamızı geliştireceğiz.

CesiumJS – Örnek Gösterim

Uygulamayı geliştirmeye başlamadan önce kayıt olup bir Access_Token almamız gerekiyor. Bu sayfadan bir hesap oluşturarak Access_Token’ınımızı elde ediyoruz. Ardından aşağıdaki kodu boş bir html dosyasına alarak üzerinde düzenlemeler yapacağız.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.64/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.64/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumKonteynir" style="width: 800px; height:600px"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'access_token buraya yazılacak';
    var viewer = new Cesium.Viewer('cesiumKonteynir');
  </script>
</body>
</html>

Kod içinde belirttiğim yere Access Token’ımızı yazarak dosyamızı doğrudan tarayıcı ile açıp haritayı görüntüleyebilirsiniz. Kod içinde öncelikle cesiumjs için gerekli javascript ve css dosyalarını import ettik. Ardından Openlayers/Leaflet’de olduğu gibi bir DIV ekleyerek haritanın görüntüleneceği kısmı tanımlamış olduk. Access Token’nı da yazdıkta sonra Cesium.Viewer fonksiyonuna DIV’imizin id sini vererek varsayılan ayarlarda 3 boyutlu haritamızı görüntülemiş olduk.

İlerleyen yazılarımızda bu örneği baz alarak, 3 boyutlu yüzey ve nesne görüntüleme, animasyonlar vb. konuları ele alıp eğitim içerikli uygulamalar yapmaya devam edeceğiz. CesiumJS in kütüphane dosyalarına buradan ulaşabilir ve yapılmış örneklere de buradan ulaşabilirsiniz.

Ömür Bilgili

Kıdemli Bilgisayar Mühendisi - GIS Geliştirici

View all posts by Ömür Bilgili →

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir