Bentuk dan garis

Pilih platform: Android iOS

Produk atau fitur ini ada dalam Pratinjau (pra-GA). Produk dan fitur pra-GA mungkin memiliki dukungan terbatas, dan perubahan pada produk serta fitur pra-GA mungkin tidak kompatibel dengan versi pra-GA lainnya. Penawaran Pra-GA tercakup dalam Persyaratan Khusus Layanan Google Maps Platform. Untuk mengetahui informasi selengkapnya, lihat deskripsi tahap peluncuran.

Anda dapat menambahkan berbagai bentuk ke peta. Bentuk adalah objek pada peta, yang terikat dengan sistem koordinat LatLng. Peta 3D Fotorealistik di Maps JavaScript API mendukung penambahan garis dan poligon ke peta.

Polyline

Untuk menggambar garis pada peta Anda, gunakan polyline. Class Polyline3DElement menentukan overlay linear segmen garis terhubung di peta. Objek Polyline terdiri dari array lokasi LatLng, dan membuat serangkaian segmen garis yang menghubungkan lokasi tersebut secara berurutan.

Menambahkan polyline

Konstruktor Polyline menggunakan sekumpulan Polyline3DElementOptions yang menentukan koordinat LatLng garis dan sekumpulan gaya untuk menyesuaikan perilaku visual polyline.

Objek polyline digambar sebagai serangkaian segmen lurus pada peta. Anda dapat menentukan warna, lebar, opasitas, tinggi, dan opsi gaya geometris khusus untuk goresan garis dalam Polyline3DElementOptions saat membuat garis, atau Anda dapat mengubah properti tersebut setelah pembuatan. Polyline mendukung gaya goresan berikut:

• outerColor: Warna HTML heksadesimal dengan format "#FFFFFF".
• outerWidth: Nilai numerik antara 0.0 dan 1.0, yang ditafsirkan sebagai persentase strokeWidth.
• strokeColor: Warna HTML heksadesimal dengan format "#FFFFFF".
• strokeWidth: Lebar garis dalam piksel.
• geodesic: apakah tepi poligon mengikuti kelengkungan bumi, atau digambar sebagai garis lurus.
• altitudeMode: Cara komponen ketinggian dalam koordinat ditafsirkan
• drawsOccludedSegments: Boolean yang menunjukkan apakah bagian poligon yang terhalang oleh objek (seperti bangunan) harus digambar.
• extruded: Boolean yang menunjukkan apakah polyline harus terhubung ke tanah.

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

Polyline interaktif

Contoh berikut mengubah warna goresan polyline setelah mendaftarkan peristiwa klik.

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

Poligon

Poligon mewakili area yang dikurung oleh jalur tertutup (atau loop), yang ditentukan dengan serangkaian koordinat. Objek Polygon serupa dengan objek Polyline yang di dalamnya berisi rangkaian koordinat secara berurutan. Poligon digambar dengan goresan dan isian. Anda dapat menentukan warna dan lebar khusus untuk tepi poligon (goresan) dan warna serta opasitas khusus untuk bidang tertutup (isian). Warna harus ditunjukkan dalam format HTML heksadesimal. Nama warna tidak didukung.

Objek Polygon dapat mendeskripsikan bentuk yang kompleks, termasuk:

• Beberapa bidang tak berbatasan yang ditentukan dengan satu poligon.
• Bidang dengan lubang di dalamnya.
• Perpotongan dari satu atau beberapa bidang.

Untuk mendefinisikan bentuk rumit, gunakan poligon dengan beberapa jalur.

Menambahkan poligon

Karena bidang poligon dapat mencakup beberapa jalur terpisah, properti jalur objek Polygon menentukan susunan array, yang masing-masing berjenis MVCArray. Setiap array menentukan urutan terpisah dari koordinat LatLng yang diurutkan.

Untuk poligon dasar yang hanya terdiri dari satu jalur, Anda dapat membuat Polygon menggunakan satu array koordinat LatLng. Peta 3D Fotorealistik di Maps JavaScript API akan mengonversi array menjadi susunan array setelah pembuatannya jika array tersebut disimpan dalam properti outerCoordinates.

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

Poligon interaktif

Contoh berikut mengubah warna goresan poligon setelah mendaftarkan peristiwa klik.

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