Şekiller ve çizgiler

Platform seçin: Android iOS

Haritanıza çeşitli şekiller ekleyebilirsiniz. Şekil, haritada bir LatLng koordinat sistemine bağlı bir nesnedir. Maps JavaScript API'deki fotogerçekçi 3D Haritalar, haritaya çizgi ve poligon eklemeyi destekler.

Çoklu çizgiler

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

Çoklu çizgi ekleme

Polyline kurucusu, çizginin LatLng koordinatlarını belirten bir Polyline3DElementOptions grubu ve çoklu çizginin görsel davranışını ayarlamak için bir stil grubu alır.

Poli çizgi nesneleri haritada bir dizi düz segment olarak çizilir. Çizginizi oluştururken Polyline3DElementOptions içinde çizginin ucu 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. Poli çizgi, aşağıdaki çizgi 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 ve strokeWidth'ın yüzdesi olarak yorumlanır.
  • strokeColor: "#FFFFFF" biçiminde onaltılık bir HTML rengi.
  • strokeWidth: Satırın piksel cinsinden genişliği.
  • geodesic: Poligonun kenarlarının dünyanı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: Poligonun, nesneler (ör. binalar) tarafından gizlenen bölümlerinin çizilip çizilmeyeceğini belirten bir boole değeridir.
  • extruded: Poli çizginin zemine bağlanıp bağlanmayacağını belirten bir boole değeridir.
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 örnekte, bir tıklama etkinliği kaydedildikten sonra çoklu çizginin çizgi rengi değiştirilmektedir.

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 yol (veya döngü) ile çevrili bir alanı temsil eder. Polygon nesneleri, sıralı bir sıradaki bir dizi koordinattan oluşmaları nedeniyle Polyline nesnelerine benzer. Poligonlar, çizgi ve dolgu ile çizilir. Poligonun kenarı (fırça) için özel renkler ve genişlikler, kapalı alan (dolgu) için de özel renkler ve opaklıklar tanımlayabilirsiniz. Renkler on altılı HTML biçiminde belirtilmelidir. Renk adları desteklenmez.

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

  • Tek bir poligonla tanımlanan, birbirine bitişik olmayan birden fazla alan.
  • Delik bulunan alanlar
  • Bir veya daha fazla alanın kesişim noktaları.

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

Poligon ekle

Poligonal bir alan birkaç ayrı yol içerebileceğinden, Polygon nesnesinin paths özelliği, her biri MVCArray türündeki bir dizi dizi belirtir. Her dizi, sıralı LatLng koordinatlarından oluşan ayrı bir sıra tanımlar.

Yalnızca bir yoldan oluşan temel poligonlar için tek bir LatLng koordinat dizisi kullanarak bir Polygon oluşturabilirsiniz. Maps JavaScript API'deki fotogerçekçi 3D Haritalar, diziyi outerCoordinates mülkünde depolarken 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 örnekte, bir tıklama etkinliği kaydedildikten sonra poligonun çizgi rengi değiştirilmektedir.

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();