Şekiller ve çizgiler

Platform seçin: Android iOS

Haritanıza çeşitli şekiller ekleyebilirsiniz. Şekil, harita üzerinde bulunan ve LatLng koordinat sistemine bağlı bir nesnedir. Maps JavaScript API'deki Photorealistic 3D Maps, haritaya çizgi ve poligon eklenmesini destekler.

Çoklu çizgiler

Haritanıza çizgi çizmek için çoklu çizgi kullanın. Polyline3DElement sınıfı, haritada bağlı çizgi segmentlerinin doğrusal bir yer paylaşımını tanımlar. Polyline nesnesi, LatLng konumlar dizisinden oluşur ve bu konumları sıralı bir şekilde birbirine bağlayan bir dizi çizgi parçası oluşturur.

Çoklu çizgi ekleme

Polyline oluşturucusu, çizginin LatLng koordinatlarını belirten bir Polyline3DElementOptions kümesi ve çoklu çizginin görsel davranışını ayarlamak için bir stil kümesi alır.

Çoklu çizgi nesneleri, haritada bir dizi düz segment olarak çizilir. Çizginizi oluştururken Polyline3DElementOptions içinde çizginin fırçası için özel renkler, genişlikler, opaklıklar, yükseklikler ve geometrik stil seçenekleri belirtebilir veya bu özellikleri oluşturma işleminden sonra değiştirebilirsiniz. Çoklu çizgi aşağıdaki kontur stillerini destekler:

  • outerColor: "#FFFFFF" biçiminde onaltılık bir HTML rengi.
  • outerWidth: 0.0 ile 1.0 arasında bir sayısal değerdir. Bu değer, strokeWidth'ün yüzdesi olarak yorumlanır.
  • strokeColor: "#FFFFFF" biçiminde onaltılık bir HTML rengi.
  • strokeWidth: Çizginin piksel cinsinden genişliği.
  • geodesic: Çokgenin kenarlarının yeryüzünün eğriliğini takip edip etmeyeceği veya düz çizgiler olarak çizilip çizilmeyeceği.
  • altitudeMode: Koordinatlardaki rakım bileşenlerinin nasıl yorumlandığı
  • drawsOccludedSegments: Çokgenin nesneler (ör. binalar) tarafından kapatılan kısımlarının çizilip çizilmeyeceğini belirten bir boole değeri.
  • extruded: Çoklu çizginin yere bağlanıp bağlanmayacağını gösteren bir Boole değeri.
async function init() {
    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

    const map = new Map3DElement({
      center: { lat: 37.772675996068915, lng: -122.3978382542777, altitude: 2500 },
      tilt: 45,
      heading: 5.9743656,
      mode: MapMode.HYBRID,
    });

    const { Polyline3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polylineOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 10,
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
    }
    const polyline = new google.maps.maps3d.Polyline3DElement(polylineOptions)

    polyline.coordinates = [
      {lat: 37.80515638571346, lng: -122.4032569467164},
      {lat: 37.80337073509504, lng: -122.4012878349353},
      {lat: 37.79925208843463, lng: -122.3976697250461},
      {lat: 37.7989102378512, lng: -122.3983408725656},
      {lat: 37.79887832784348, lng: -122.3987094864192},
      {lat: 37.79786443410338, lng: -122.4066878788802},
      {lat: 37.79549248916587, lng: -122.4032992702785},
      {lat: 37.78861484290265, lng: -122.4019489189814},
      {lat: 37.78618687561075, lng: -122.398969592545},
      {lat: 37.7892310309145, lng: -122.3951458683092},
      {lat: 37.7916358762409, lng: -122.3981969390652}
    ];

    map.append(polyline)
    document.body.append(map);
}
init();

Etkileşimli çoklu çizgiler

Aşağıdaki örnek, bir tıklama etkinliği kaydedildikten sonra çoklu çizginin kontur rengini değiştirir.

async function init() {
  const colors = ["red", "blue", "green", "yellow"];

  const { Map3DElement, MapMode, Polyline3DInteractiveElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 0, lng: -180, altitude: 15000000},
    mode: MapMode.HYBRID,
  });

  document.body.append(map);

  const polyline = new Polyline3DInteractiveElement({
    coordinates: [
      { lat: 37.772, lng: -122.214 },
      { lat: 21.291, lng: -157.821 },
      { lat: -18.142, lng: 178.431 },
      { lat: -27.467, lng: 153.027 }
    ],
    strokeColor: 'red',
    strokeWidth: 10,
  });

  polyline.addEventListener('gmp-click', (event) => {
    polyline.strokeColor = colors[~~(Math.random() * colors.length)];
  });

  map.append(polyline);
}

init();

Poligonlar

Poligon, bir dizi koordinatla tanımlanan kapalı bir yolla (veya döngü) çevrili bir alanı temsil eder. Polygon nesneleri, sıralı bir dizideki bir dizi koordinattan oluştuğu için Polyline nesnelerine benzer. Poligonlar, kontur ve dolgu ile çizilir. Çokgenin kenarı (kontur) için özel renkler ve genişlikler, kapalı alan (dolgu) için ise özel renkler ve opaklıklar tanımlayabilirsiniz. Renkler onaltılık HTML biçiminde belirtilmelidir. Renk adları desteklenmez.

Polygon nesneleri, aşağıdakiler de dahil olmak üzere karmaşık şekilleri tanımlayabilir:

  • Tek bir poligonla tanımlanmış, birbirine bitişik olmayan birden fazla alan.
  • Delikli alanlar
  • Bir veya daha fazla alanın kesişimleri.

Karmaşık bir şekil tanımlamak için birden fazla yolu olan bir poligon kullanırsınız.

Poligon ekle

Çokgen bir alan birkaç ayrı yol içerebileceğinden Polygon object's paths özelliği, her biri MVCArray türünde olan bir dizi diziyi belirtir. Her dizi, sıralı LatLng koordinatlarından oluşan ayrı bir diziyi tanımlar.

Yalnızca tek bir yoldan oluşan temel poligonlar için Polygon, tek bir LatLng koordinat dizisi kullanarak oluşturabilirsiniz. Maps JavaScript API'deki Photorealistic 3D Maps, outerCoordinates özelliği içinde depolanırken oluşturma sırasında diziyi dizi dizisine dönüştürür.

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",
        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 }
    ];

    map3DElement.append(towerPolygon);
    document.body.append(map3DElement);
}
init();

Etkileşimli poligonlar

Aşağıdaki örnek, bir tıklama etkinliği kaydedildikten sonra poligonun kontur rengini değiştirir.

async function init() {
  const colors = ["red", "blue", "green", "yellow"];
  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 { Polygon3DInteractiveElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

  const polygonOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 4,
      fillColor: "#0000FF80",
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
  }

  const towerPolygon = new google.maps.maps3d.Polygon3DInteractiveElement(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 }
  ];

    towerPolygon.addEventListener('gmp-click', (event) => {
      towerPolygon.strokeColor = colors[~~(Math.random() * colors.length)];
    });

  map3DElement.append(towerPolygon);

  document.body.append(map3DElement);
}

init();