ArcGIS API for JavaScript ile Web Uygulamaları – 1
2D Harita
JavaScript API kullanarak web uygulamaları oluşturmaya “2D Harita” (“MapView”) ile başlıyoruz.
Haritalama uygulamaları ile 2 ve 3 boyutlu düzlemde coğrafi verilerin gösterimini yapabilirsiniz. Bunun için ilk olarak bir altlık (“basemap”) içeren bir “Map” sınıfını oluşturarak başlanır. Altlık olarak ArcGIS Online’da sunulan veya özel stiller ile kendinizin oluşturduğunu kullanabilirsiniz. Eğer haritanıza veri eklemek isterseniz, noktalar, poligonlar ve metinleri grafik olarak ekleyebilirsiniz veya büyük veri kümeleri için “feature layer” kullanarak veri ekleyebilirsiniz. “Map” sınıfından oluşturduğunuz yeni örneğinin tanımlamasını yaptıktan sonra “MapView” kullanarak 2 boyutlu veya “SceneView” sınıfını kullanarak 3 boyutlu gösterimini sağlayabilirsiniz.
Örneğimizde 2D bir web haritasını oluşturup Ankara şehrini merkezinde gösteriminin yapılmasını gerçekleştireceğiz.
Adımlar
1- Bilgisayarınızda yüklü herhangi bir metin editörü veya online “CodePen” gibi servisler kullanarak boş bir HTML dosyası oluşturuyoruz.
2- Aşağıda belirtilen HTML kodunu metin olarak HTML dosyasına kopyalıyoruz.
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS JavaScript API Örnekleri: Harita Uygulaması</title> <style> html, body, #haritaBlogum { padding: 0; margin: 0; height: 100%; width: 100%; } </style> </head> <body> <div id="haritaBlogum"></div> </body></html> |
HTML koduna bakıldığında “body” bloğu içerisinde sadece bir “div” bileşeni kullanılmış ve kimlik olarak “haritaBlogum” atanmış. Amacımız bu bloğu harita gösterimi için kullanmak. “style” bloğunda ise bileşene ait özel stil tanımlamalarını görebilirsiniz.
3- Harita bileşenine ait kütüphanelerinin tanımlamasını yapmak için aşağıdaki kodu “head” kod bloğu içerisine kopyalayın.
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css"><script src="https://js.arcgis.com/4.12/"></script> |
Birinci satır, web sayfasında kullanılarak elementlerin stillerinin tutulduğu dosyanın tanımını, ikinci satır ise web sayfasında kullanılacak ArcGIS JavaScript API’nin 4.12 versiyonunun kullanılacağının tanımı yapılır.
4- Dojo kullanılarak nesnelerimizi “script” bloğunda tanımlamalarını yapmak için aşağıdaki kodu “head” bloğu içerisine kopyalayın.
<script> require([ "esri/Map", "esri/views/MapView" ], function(Map, MapView) { var map = new Map({ basemap: "topo-vector" }); var view = new MapView({ container: "haritaBlogu", map: map, center: [32.8442835,39.9323346], // boylam, enlem zoom: 11 }); });</script> |
“require” Dojo elementi ile ilk olarak kullanılacak tanımlamalar (“esri/Map” ve “esri/WebMap”) ve takma adları (“Map” ve “MapView”) belirleniyor. Takma adların sırası, tanımlamaların sırası ile benzer olmalı. Sonrasında ise nesnelerimizi oluşturup, özelliklerini belirtiyoruz. Burada dikkat edilmesi gereken nokta önce “Map” nesnesi sonra da “MapView” oluşturulması ama “MapView” nesnesinin bir “Map” nesnesine ihtiyaç duyması.
“Map” nesnesinin özelliklerindeki “basemap” özelliği, harita altlığında gösterimi yapılacak altlığın tipini belirtmemiz. Tüm altlık tiplerini linkten ulaşabilirsiniz.
“MapView” nesnesi özelliklerinde de harita kontrolü için ayrılan bloğun tanımlaması (“container”), kullanılacak harita nesnesi (“map”), gösterimin merkez değeri (“center”) ve gösterimin yakınlık değer (“zoom”) özellikleri belirlenmiştir. “MapView” kullanarak haritamızın 2D olduğunu, 3D harita gösterimi yapmak isteseydik “SceneView” nesnesi kullanmalıydık.
HTML kodun son hali aşağıdaki gibi olmalı
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS JavaScript API Örnekleri: Harita Uygulaması</title> <style> html, body, #haritaBlogu { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.12/"></script> <script> require([ "esri/Map", "esri/views/MapView" ], function(Map, MapView) { var map = new Map({ basemap: "topo-vector" }); var view = new MapView({ container: "haritaBlogu", map: map, center: [32.8442835,39.9323346], // boylam, enlem zoom: 11 }); }); </script> </head> <body> <div id="haritaBlogu"></div> </body></html> |
HTML kodunu içeren dosyayı herhangi bir internet tarayıcı ile açtığınızda Ankara’yı ortasında görüntüleyen bir harita göreceksiniz.
ArcGIS JavaScript API ile yazılmış diğer örnekleri incelemek için linke tıklayınız.