1. Başlamadan önce
Bu codelab'in amacı, Maps JavaScript'te fotogerçekçi 3D haritaları kullanarak ilk 3D haritanızı nasıl oluşturacağınızı anlamanıza yardımcı olmaktır. Maps JavaScript API'nin doğru bileşenlerini yükleme, ilk 3D haritanızı görüntüleme ve üzerinde özellikler çizme hakkında temel bilgileri öğreneceksiniz.
Oluşturacağınız uygulama.
Bu codelab'de, aşağıdakileri yapan bir 3D web uygulaması oluşturacaksınız:
- Maps JavaScript API'yi dinamik olarak yükler.
- Toronto'daki CN Kulesi'nin ortasına yerleştirilmiş bir 3D harita gösterilir.
- Bir konumun çevresinde bir sınır gösterir.
- 3D Harita'daki önemli yerleri kapatır.
- Sınırı, konumu kapsayacak şekilde uzatır.
Neler öğreneceksiniz?
- Google Haritalar Platformu'nu kullanmaya başlama.
- Dinamik Kitaplık İçe Aktarma özelliğini kullanarak Maps JavaScript API'yi JavaScript kodundan dinamik olarak yükleme.
- Map3DElement sınıfını kullanarak bir 3D harita yükleyin.
- Haritada çizim yapmak için poligonları ve dışa doğru çıkıntıları kullanma
2. Ön koşullar
Bu Codelab'i tamamlamak için buradaki öğelerle ilgili bilgi sahibi olmanız gerekir. Google Haritalar Platformu ile çalışma konusunda bilginiz varsa Codelab'e atlayabilirsiniz.
Zorunlu Google Haritalar Platformu Ürünleri
Bu Codelab'de aşağıdaki Google Haritalar Platformu ürünlerini kullanacaksınız:
- Maps JavaScript API
Evet, sayfanıza 3D Haritalar eklemek için tek ihtiyacınız bu. Çok basit bir işlem.
Bu Codelab için diğer koşullar
Bu codelab'i tamamlamak için aşağıdaki hesaplara, hizmetlere ve araçlara ihtiyacınız vardır:
- Faturalandırma özelliği etkinleştirilmiş bir Google Cloud hesabı
- Maps JavaScript API'nin etkin olduğu bir Google Haritalar Platformu API anahtarı
- JavaScript, HTML ve CSS hakkında temel düzeyde bilgi
- Görüntülemek üzere bir dosyayı kaydedip düzenlemek için tercih ettiğiniz bir metin düzenleyici veya IDE
- Dosyayı çalışırken görüntülemek için bir web tarayıcısı
3. Hazırlanın
Google Haritalar Platformu'nu ayarlama
Google Cloud Platform hesabınız ve faturalandırmanın etkin olduğu bir projeniz yoksa faturalandırma hesabı ve proje oluşturmak için lütfen Google Haritalar Platformu'nu kullanmaya başlama kılavuzuna bakın.
- Cloud Console'da proje açılır menüsünü tıklayın ve bu kod laboratuvarını kullanmak istediğiniz projeyi seçin.
- Google Cloud Marketplace'te bu kod laboratuvarının çalışması için gereken Google Haritalar Platformu API'lerini ve SDK'larını etkinleştirin. Bunun için bu videodaki veya bu dokümanlardaki adımları uygulayın.
- Cloud Console'un Kimlik Bilgileri sayfasında bir API anahtarı oluşturun. Bu videodaki veya bu dokümanlardaki adımları uygulayabilirsiniz. Google Haritalar Platformu'na yapılan tüm istekler için API anahtarı gerekir.
4. Maps JavaScript API'yi yükleme
Kurulum bölümündeki tüm adımları uyguladıktan sonra ilk 3D haritanızı oluşturmaya başlayabilirsiniz.
Hayal edebileceğiniz en basit web sayfasını oluşturun.
Öncelikle tüm kodlarımızı barındıracak çok basit bir web sayfası oluşturacağız. Bu işlemi istediğiniz düzenleyicide veya platformda yapabilirsiniz.
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
Kodu ekleyin ve dosyayı 3dmap.html gibi bir adla erişilebilir bir konuma kaydedin. Ardından, sayfanın mevcut durumunu görüntülemek ve hata olup olmadığını görmek için dosyayı bir web tarayıcısında açın.
2D Haritalar gibi 3D Haritalar'ın da temeli Maps JavaScript API'dir. Bu nedenle, önce bunu yüklemeniz gerekir.
Bunu yapmanın birkaç yolu vardır. Bu yöntemler, dokümanların Maps JavaScript API'yi yükleme bölümünde açıklanmıştır.
Bu gösterimde, yalnızca yüklemeniz gereken öğeleri kontrol etmenize olanak tanıyarak indirme boyutunda ve başlatma sürelerinde tasarruf sağlayan daha modern Dinamik Kitaplık İçe Aktarma yöntemini kullanacağız.
Dinamik yükleyiciyi ekleme
Dinamik yükleyiciyi kullanmak için web sayfanıza aşağıdaki komut dosyası etiketini eklediğinizden ve uygun yere kendi API KEY'inizi (2. adımda aldığınız) eklediğinizden emin olun. Bu komut dosyası etiketini temel web sayfasının body bölümleri arasına yerleştirin.
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
Ürün lansmanının bu aşamasında, 3D Haritalar'a erişmek için API'nin alfa sürümünü kullandığımızı unutmayın. Bu sürüm, ürünlerin en deneysel özelliklerini içerir ve erken erişim kodunu geliştirilirken test etmenize olanak tanır. Böylece, kullanıma sunulduğunda bu özellikleri kullanmaya hazır olabilirsiniz.
Artık dinamik yükleyiciyi içeren temel bir web sayfanız var (Sayfayı açarsanız görünüm boş olur ancak hata olmaz). 3D haritayı eklemeye hazırız.
Kodunuz bir nedenle çalışmıyorsa 6. adıma gidip hatayı görmek için kodunuzu nihai sonuçla karşılaştırabilirsiniz.
Sayfanın neden çalışmadığını öğrenmek için tarayıcınızdaki hata konsoluna göz atarak hatayı giderin. Hata sayfasında, farklı tarayıcılarda bu işlemin nasıl yapılacağıyla ilgili talimatlar verilmektedir. Ayrıca çeşitli hata mesajları açıklanmakta ve API'nin çalışmamasının bazı yaygın nedenleri belirtilmektedir. Bu, herhangi bir uygulamada neyin yanlış olabileceğini öğrenmek için geliştirme boyunca kullanabileceğiniz iyi bir kaynaktır.
5. Harita görüntüleme
Artık sayfaya ilk 3D haritamızı eklemeye hazırız.
3D haritalar, 3D Harita örnekleri oluşturup bunlarla çalışmamıza olanak tanıyan google.maps.maps3d.Map3DElement sınıfı kullanılarak oluşturulur. Bu codelab'de, HTML etiketi yerine doğrudan 3D Harita nesnesi ile çalışacağız.
Başlatma işlevini oluşturun ve kitaplığı yükleyin
Öncelikle öğeyi sayfaya yükleyen bir işlev oluşturacağız. Koda bakın. Öncelikle, kodun geri kalanına devam etmeden önce öğenin tamamının yüklenmesini sağlamamıza olanak tanıyan zaman uyumsuz bir işlev oluşturuyoruz. Ardından, sayfa yüklenirken init işlevini çalıştırırız.
Bu kodu, sayfanın body bölümündeki yükleme komut dosyasından sonra ekleyin.
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
}
init();
</script>
Devam etmeden önce kitaplığın yüklendiğinden emin olmak için await ifadesini kullandığımızı unutmayın.
3D harita öğesini oluşturun ve konumu belirtin
Ardından, harita görünümünü görmek istediğimiz konumu belirtmemiz gerekir. 3D Haritalar'da görünümü ayarlamak için kullanabileceğiniz çeşitli parametreler vardır. Bunlar, sahnede neye baktığınızı tanımlayan sanal kamera parametrelerini ifade eder.
CN Tower'ın buna benzer bir görünümünü oluşturalım.
Öncelikle, bakmak istediğimiz koordinatları belirtmemiz gerekir. Bunlar iki farklı görünümden oluşur
- Yüksekliği de dahil olmak üzere bakmak istediğimiz nokta.
- Noktayı bakan sanal kameranın mesafesi ve yönü.
Aşağıdaki resme bakarak bu ayarların işleyiş şekli hakkında fikir edinebilirsiniz.
Öğenin merkezi, baktığınız noktadır. Aralık, nesneye olan mesafenizdir. Eğim ise resmi görüntülediğiniz açıdır. Dilerseniz nesnenin yönünü ve yuvarlanmasını da ayarlayabilirsiniz ancak burada bunu kullanmıyoruz.
Şimdi sayfaya 3D haritayı oluşturacağız. Kitaplık içe aktarıldıktan sonra aşağıdaki kodu sayfanın init bölümüne ekleyin.
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.HYBRID,
});
document.body.append(map3DElement);
Önce öğeyi oluşturup uygun konum parametrelerini ayarlar, ardından bileşeni sayfaya ekleriz (istersek mevcut bir div'e atayabiliriz).
Kodunuz aşağıdaki örnekteki gibi görünmelidir:
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.HYBRID
});
document.body.append(map3DElement);
}
init();
</script>
</body>
</html>
Artık dosyayı kaydedip sayfanın çalıştığını görmek için tarayıcıda açabiliriz. Kamera, resimde gösterildiği gibi kuleye doğru bakıyor olmalıdır. Devam etmeden önce biraz oynayın ve kuleye bir kutu ekleyin.
6. Özellik ekleme ve dışa çıkarma
3D haritamız hazır olduğuna göre, kullanıcılara ilgi çekici bir öğeyi vurgulayalım. Bu durumda, CN kulesinin etrafında bir kutu oluşturmak için bir poligon ve ekstrüzyon işlevini kullanacağız. Böylece, aşağıdaki görünüme benzer bir görünüm elde edebiliriz.
Gereksiz öğeleri gizleme
İlk fark edeceğiniz şey, önemli yerleri devre dışı bırakmış olmamızdır. Bu haritada odağın kulenin kendisi olmasını istediğimizden diğer görsel öğeleri kaldırmamız gerekiyor.
Bunu yapmak için etiketleri gizleyecek şekilde kodu değiştirmemiz gerekir. Noktaları gizlemek için haritanın mod satırını SATELLITE olarak güncelleyin.
mode: MapMode.SATELLITE,
Bu özelliği ayarladığınızda haritadaki etiketler devre dışı bırakılır. Bu etiketler arasında ilgi çekici yerler, yollar ve sınır çizgileri bulunur. Bu sayede konumun "temiz" bir görünümü oluşturulur.
Poligon ekleme ve stil uygulama
Sonraki adım, poligonu sayfaya eklemektir. Bu işlem iki adımda gerçekleştirilebilir. Öncelikle gerekli bilgileri içeren işlevleri yüklememiz, ardından poligonla ilgili stil ayrıntılarını (ör. rengi veya diğer özelliklerin arkasında gösterilip gösterilmeyeceği) belirtmemiz gerekir.
Öncelikle aşağıdaki kod satırını kullanarak sayfaya gerekli sınıfları ekleriz.
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
Bu işlem, görünüme poligon nesnesi eklemek için gereken Polygon3DElement ve AltitudeMode sınıflarını sayfaya yükler.
Poligonlar, diğer özelliklerin veya binaların arkasında gösterilip gösterilmeyeceğini kontrol etmek için kalem kalınlığı, renk (ada veya onaltılık değere göre), sınırın opaklığı ve dolgu ayarlarından görünümü kontrol edebilecek çeşitli farklı ayarlara sahip olabilir. Örneğin : örtülmüş segmentler çizme. Daha fazla ayrıntı için Polygon3DElement sınıfının dokümanlarını inceleyin.
Ayarlamamız gereken diğer özellik, poligonun ekstrüde edilmiş şekilde çizilmesidir. Yani, belirlenen yükseklikte bir poligon çizip ardından poligonu yere kadar uzatmak gerekir. Bu işlem, poligona bir kutu gibi yükseklik verir (yukarıdaki resimde görebilirsiniz). Bu işlem için poligonda yükseklik modunu da ayarlamamız gerekir. Bu nedenle yukarıdaki AltitudeMode sabitlerini yüklememiz gerekiyordu. Bir poligonu ekstrüde etmek için poligon köşelerindeki yüksekliklerden doğru konumu elde etmek amacıyla bu özelliğin ABSOLUTE veya RELATIVE_TO_GROUND olarak ayarlanması gerekir.
Kod, bu özellikleri içeren ve daha sonra gösterildiği gibi Polygon3DElement nesnesini oluşturmak için kullanılabilecek bir değişmez nesne oluşturur:
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
Poligon nesnesini oluşturduk. Şimdi coğrafi koordinatlarını da ayarlamamız gerekiyor. Çokgenler, nasıl temsil edildiklerine bağlı olarak hem iç hem de dış koordinatlara sahip olabilir. innerCoordinates, çokgen içindeki kesiklerin şeklini verir ve outerCoordinates, çokgenin dış sınırını tanımlar. Bu bir çizgi değil, poligon olduğundan, tam bir şekil oluşturmak için koordinatların aynı noktada başlaması ve bitmesi gerekir.
Koordinatları bir LatLng veya LatLngAltitude nesnesi veya değişmez değer dizisi kullanarak belirtebilirsiniz. Bunu temel poligonumuzda görebiliriz.
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 },
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 }
];
Poligonun stilini ve koordinatlarını ayarladığımıza göre sayfaya eklemeye hazırız. Poligonlar, Harita Öğesinin alt öğeleridir ve sayfadaki mevcut bir harita nesnesine eklenmesi gerekir. Aşağıdaki kodu sayfaya ekleyin.
map3DElement.append(towerPolygon);
Bu işlem tamamlandıktan sonra, burada gösterildiği gibi aşağıdaki tam uygulamaya sahip oluruz (ancak kendi API anahtarınız olacaktır). Sayfayı çalıştırıp sonucu görmeye hazırız.
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.SATELLITE,
});
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
fillOpacity: 0.2,
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 },
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 }
];
map3DElement.append(towerPolygon);
document.body.append(map3DElement);
}
init();
</script>
</body>
</html>
Kod doğruysa aşağıdaki 3D haritayı ve poligonu içeren bir sayfa görürsünüz.
Maps JavaScript API'yi yükleme, 3D harita oluşturma ve dışa doğru uzatılmış bir poligon ekleme dahil olmak üzere Google Haritalar Platformu'nu kullanarak ilk 3D haritanızı başarıyla oluşturdunuz.
7. Sırada ne var?
Bu kod laboratuvarında, Maps JavaScript API ile neler yapabileceğinizle ilgili temel bilgileri ele aldınız. Ardından, haritaya aşağıdaki özelliklerden bazılarını eklemeyi deneyin:
- İlgi çekici noktaları açma/kapatma düğmesi ekleyin.
- Farklı yerlere gidip gelen bir rotayı gösteren çizgiler ekleyin.
- Kullanıcının görünümü nereye taşıyabileceğini kontrol etmek için bazı sınır kısıtlamaları belirleyin.
- Maps JavaScript API için Yerler veya Yol Tarifleri gibi ek hizmetleri etkinleştiren ek kitaplıklara göz atın.
Web'de Google Haritalar Platformu ve 3D ile çalışmanın diğer yollarını öğrenmek için aşağıdaki bağlantılara göz atın: