Vektör Harita Özellikleri

Örnek Görüntüle

Maps JavaScript API, haritanın iki farklı uygulamasını sunar: raster ve vektör. Rastır harita, haritayı, Google Haritalar Platformu tarafından sunucu tarafında oluşturulup web uygulamanıza sunulan piksel tabanlı raster resim karolarından oluşan bir ızgara olarak yükler. Vektör harita, 2D ve 3D grafikleri oluşturmak için tarayıcının kullanıcının cihazındaki GPU'ya erişmesine olanak tanıyan bir web teknolojisi olan WebGL kullanılarak istemci tarafında yükleme sırasında çizilen vektör tabanlı karolardan oluşur.

Vektör haritası, kullanıcılarınızın aşina olduğu Google Haritalar'dır. Varsayılan raster karo haritasına kıyasla birçok avantajı vardır. En önemlisi, vektör tabanlı görüntülerin keskinliği ve yakın yakınlaştırma düzeylerinde 3D binaların eklenmesidir. Vektör haritası şu özellikleri destekler:

• Programatik eğim ve yön kontrolü
• Gelişmiş kamera kontrolü
• Daha yumuşak yakınlaştırma için kesirli yakınlaştırma

• 3D içerikler ve animasyonlar

• div öğesi ve JavaScript kullanılarak yüklenen haritalar için varsayılan oluşturma türü google.maps.RenderingType.RASTER'tür.

• gmp-map öğesi kullanılarak yüklenen haritalar için varsayılan oluşturma türü google.maps.RenderingType.VECTOR'dur. Bu türde eğim ve yön kontrolü etkindir.

Vektör Haritalar'ı kullanmaya başlama

Eğilme ve döndürme

Haritayı başlatırken heading ve tilt özelliklerini ekleyerek ve harita üzerinde setTilt ve setHeading yöntemlerini çağırarak vektor haritasında eğimi ve dönüşümü (yön) ayarlayabilirsiniz. Aşağıdaki örnekte, haritaya eğimi ve yönü 20 derecelik artışlarla programlı olarak ayarlama işlemini gösteren bazı düğmeler eklenmiştir.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: {
        lat: 37.7893719,
        lng: -122.3942,
      },
      zoom: 16,
      heading: 320,
      tilt: 47.5,
      mapId: "90f87356969d889c",
    }
  );

  const buttons: [string, string, number, google.maps.ControlPosition][] = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode: string, amount: number) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt()! + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading()! + amount);
        break;
      default:
        break;
    }
  };
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7893719,
      lng: -122.3942,
    },
    zoom: 16,
    heading: 320,
    tilt: 47.5,
    mapId: "90f87356969d889c",
  });
  const buttons = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode, amount) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt() + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading() + amount);
        break;
      default:
        break;
    }
  };
}

window.initMap = initMap;
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.ui-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.ui-button:hover {
  background: rgb(235, 235, 235);
}
style.css

<html>
  <head>
    <title>Tilt and Rotation</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Fare ve klavye hareketlerini kullanma

Eğilme ve döndürme (yön) kullanıcı etkileşimleri etkinleştirildiyse (programlı olarak veya Google Cloud Console'da) kullanıcılar eğilme ve döndürme ayarlarını fare ve klavye kullanarak yapabilir:

• Fareyle, Üst Karakter tuşunu basılı tutun, ardından fareyi tıklayıp yukarı ve aşağı sürükleyerek eğimi, sağa ve sola sürükleyerek de yönünü ayarlayın.
• Klavyeyi kullanarak, Üst Karakter tuşunu basılı tutun, ardından eğimi ayarlamak için yukarı ve aşağı ok tuşlarını, yönünü ayarlamak için de sağ ve sol ok tuşlarını kullanın.

Eğme açısını ve yönünü programatik olarak ayarlama

Bir vektör haritasındaki eğimi ve yönünü programatik olarak ayarlamak için setTilt() ve setHeading() yöntemlerini kullanın. Yön, kameranın kuzeyden başlayarak saat yönündeki derecelerde baktığı yöndür. Bu nedenle map.setHeading(90), haritayı doğu yukarı bakacak şekilde döndürür. Eğim açısı zirve noktasından ölçülür. Bu nedenle map.setTilt(0) doğrudan aşağı bakarken map.setTilt(45) eğik bir görünüm sağlar.

• Haritanın eğim açısını ayarlamak için setTilt() işlevini çağırın. Mevcut eğim değerini almak için getTilt() değerini kullanın.
• Haritanın başlığını ayarlamak için setHeading()'ü arayın. Mevcut başlık değerini almak için getHeading() değerini kullanın.

Eğimi ve yönü koruyarak haritanın merkezini değiştirmek için map.setCenter() veya map.panBy() tuşlarını kullanın.

Kullanılabilen açı aralığının mevcut yakınlaştırma düzeyine göre değiştiğini unutmayın. Bu aralık dışındaki değerler, şu anda izin verilen aralığa ayarlanır.

Başlığı, eğimi, merkezi ve yakınlaştırmayı programatik olarak değiştirmek için moveCamera yöntemini de kullanabilirsiniz. Daha fazla bilgi edinin.

Diğer yöntemler üzerindeki etkisi

Haritaya eğilme veya döndürme uygulandığında diğer Maps JavaScript API yöntemlerinin davranışı etkilenir:

• map.getBounds() her zaman görünen bölgeyi içeren en küçük sınır kutusuyla döndürür; eğim uygulandığında döndürülen sınırlar, haritanın görüntü alanının görünen bölgesinden daha büyük bir bölgeyi temsil edebilir.
• map.fitBounds(), sınırları yerleştirmeden önce eğimi ve yönünü sıfıra sıfırlar.
• map.panToBounds(), sınırları kaydırmadan önce eğimi ve yönünü sıfıra sıfırlar.
• map.setTilt() herhangi bir değeri kabul eder ancak maksimum eğimi mevcut harita yakınlaştırma düzeyine göre kısıtlar.
• map.setHeading() herhangi bir değeri kabul eder ve [0, 360] aralığına sığacak şekilde değiştirir.

Kamerayı kontrol etme

Kamera özelliklerinin herhangi bir kombinasyonunu aynı anda güncellemek için map.moveCamera() işlevini kullanın. map.moveCamera(), güncellenecek tüm kamera özelliklerini içeren tek bir parametreyi kabul eder. Aşağıdaki örnekte, center, zoom, heading ve tilt değerlerini aynı anda ayarlamak için map.moveCamera() çağrısı gösterilmektedir:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

Aşağıda gösterildiği gibi, animasyon döngüsü ile map.moveCamera()'ü çağırarak kamera özelliklerini canlandırabilirsiniz:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

Kamera konumu

Harita görünümü, düz bir düzleme bakan bir kamera olarak modellenmiştir. Kameranın konumu (ve dolayısıyla haritanın oluşturulması) aşağıdaki özelliklerle belirtilir: hedef (enlem/boylam konumu), yön, eğilme ve yakınlaştırma.

Hedef (konum)

Kamera hedefi, haritanın merkezinin enlem ve boylam koordinatları olarak belirtilen konumudur.

Yön (yönlendirme)

Kamera yönü, haritanın üst kenarına karşılık gelen, gerçek kuzeyden derece cinsinden ölçülen pusula yönünü belirtir. Haritanın ortasından üst kenarına dikey bir çizgi çizerseniz yön, gerçek kuzeye göre kameranın yönüne (derece cinsinden ölçülür) karşılık gelir.

0 yön açısı, haritanın üst kısmının gerçek kuzeyi gösterdiği anlamına gelir. 90 olan yön değeri, haritanın üst kısmının tam doğuya (pusulada 90 derece) baktığı anlamına gelir. 180 değeri, haritanın üst kısmının tam güneyi gösterdiği anlamına gelir.

Maps API, haritanın yönünü değiştirmenize olanak tanır. Örneğin, araba kullanan bir kişi genellikle yol haritasını seyahat ettiği yöne göre çevirir. Harita ve pusula kullanan yürüyüşçüler ise haritayı genellikle dikey bir çizginin kuzeye bakacak şekilde yönlendirir.

Eğim (görüntüleme açısı)

Eğim, kameranın doğrudan haritanın merkez konumunun üzerindeki bir yay üzerindeki konumunu tanımlar. Bu konum, nadir (kameranın tam altına bakan yön) referans alınarak derece cinsinden ölçülür. 0 değeri, kameranın aşağıya baktığına karşılık gelir. 0'dan büyük değerler, belirtilen derece sayısı kadar ufuğa doğru eğimli bir kameraya karşılık gelir. Görüntüleme açısını değiştirdiğinizde harita perspektifli olarak gösterilir. Uzaktaki özellikler daha küçük, yakındaki özellikler ise daha büyük görünür. Aşağıdaki görseller bunu göstermektedir.

Aşağıdaki resimlerde görüntüleme açısı 0 derecedir. İlk resimde bunun şematik bir gösterimi yer alır. 1. konum kamera konumu, 2. konum ise mevcut harita konumudur. Elde edilen harita aşağıda gösterilir.

Aşağıdaki resimlerde görüntüleme açısı 45 derecedir. Kameranın, 3 konumuna gitmek için tam olarak baş hizasında (0 derece) ve zemin (90 derece) arasındaki bir yayın yarısına kadar hareket ettiğini görebilirsiniz. Kamera hâlâ haritanın merkez noktasını gösteriyor ancak 4 konumundaki çizgiyle gösterilen alan artık görünür durumda.

Bu ekran görüntüsünde gösterilen harita, orijinal haritadakiyle aynı noktaya odaklanmış durumdadır ancak haritanın üst kısmında daha fazla özellik gösterilmektedir. Açı 45 derecenin üzerine çıktığında kamera ile harita konumu arasındaki özellikler orantılı olarak daha büyük, harita konumunun dışındaki özellikler ise orantılı olarak daha küçük görünür ve üç boyutlu bir efekt elde edilir.

Tarih aralığını

Kameranın yakınlaştırma düzeyi, haritanın ölçeğini belirler. Daha yüksek yakınlaştırma seviyelerinde ekranda daha fazla ayrıntı, daha düşük yakınlaştırma seviyelerinde ise dünyanın daha büyük bir kısmı görülebilir.

Yakınlaştırma düzeyi tam sayı olmak zorunda değildir. Haritanın izin verdiği yakınlaştırma seviyesi aralığı, hedef, harita türü ve ekran boyutu gibi çeşitli faktörlere bağlıdır. Aralık dışındaki tüm sayılar, en yakın geçerli değere dönüştürülür. Bu değer, minimum yakınlaştırma düzeyi veya maksimum yakınlaştırma düzeyi olabilir. Aşağıdaki listede, her bir yakınlaştırma düzeyinde görmeyi bekleyebileceğiniz yaklaşık ayrıntı düzeyi gösterilmektedir:

• 1: Dünya
• 5: Kara/kıta
• 10: Şehir
• 15: Sokaklar
• 20: Binalar

Kesirli Yakınlaştırma

Vektör haritalar, kesirli yakınlaştırmayı destekler. Bu sayede tam sayılar yerine kesirli değerler kullanarak yakınlaştırabilirsiniz. Hem raster hem de vektör haritalar kesirli yakınlaştırmayı destekler. Kesirli yakınlaştırma, vektör haritalar için varsayılan olarak açık, raster haritalar için varsayılan olarak kapalıdır. Kesirli yakınlaştırmayı açmak ve kapatmak için isFractionalZoomEnabled harita seçeneğini kullanın.

Aşağıdaki örnekte, harita başlatılırken kesirli yakınlaştırmanın etkinleştirilmesi gösterilmektedir:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  isFractionalZoomEnabled: true
});

Ayrıca, isFractionalZoomEnabled harita seçeneğini burada gösterildiği gibi ayarlayarak kesirli yakınlaştırmayı açıp kapatabilirsiniz:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

Kesirli yakınlaştırmanın açık olup olmadığını algılayacak bir dinleyici ayarlayabilirsiniz. Bu, isFractionalZoomEnabled değerini true veya false olarak açıkça ayarlamadıysanız en yararlı yöntemdir. Aşağıdaki örnek kodda, kesirli yakınlaştırmanın etkin olup olmadığı kontrol edilir:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});