Lapisan Data

Pilih platform: Android iOS JavaScript

Lapisan data Google Maps menyediakan penampung untuk data geospasial arbitrer. Anda bisa menggunakan Lapisan data untuk menyimpan data kustom, atau untuk menampilkan data GeoJSON di peta Google.

Ringkasan

Tonton video DevBytes ini untuk mempelajari Lapisan Data lebih lanjut.

Dengan Maps JavaScript API, Anda dapat menandai sebuah peta dengan berbagai overlay, seperti penanda, polyline, poligon, dll. Setiap anotasi ini menggabungkan informasi gaya visual dengan data lokasi. Class google.maps.Data adalah penampung untuk data geospasial arbitrer. Daripada menambahkan overlay, Anda bisa menggunakan Lapisan data untuk menambahkan data geografis arbitrer ke peta. Jika data itu berisi informasi geometri, seperti titik, garis atau poligon, API akan merendernya secara default sebagai penanda, polyline, dan poligon. Anda bisa menata gaya fitur ini seperti yang dilakukan terhadap overlay normal, atau menerapkan aturan penataan gaya berdasarkan properti lain yang dimuat dalam set data.

Class google.maps.Data memungkinkan Anda untuk:

  • Menggambar poligon di peta Anda.
  • Menambahkan data GeoJSON ke peta Anda.
    GeoJSON adalah standar untuk data geospasial di internet. Class Data mengikuti struktur GeoJSON dalam penggambaran data dan memudahkan untuk menampilkan data GeoJSON. Gunakan metode loadGeoJson() untuk dengan mudah mengimpor data GeoJSON dan menampilkan titik, line-string, dan poligon.
  • Gunakan google.maps.Data untuk membuat model data arbitrer.
    Sebagian besar entitas dunia nyata memiliki properti lain yang terkait dengan entitas tersebut. Misalnya, toko mempunyai jam buka, jalan mempunyai kecepatan lalu lintas, dan setiap rombongan Girl Guide memiliki lokasi penjualan kue. Dengan google.maps.Data, Anda dapat membuat model properti ini, dan menata data Anda sebagaimana mestinya.
  • Pilih cara data Anda direpresentasikan, dan Anda melakukan perubahan kapan saja.
    Lapisan data dapat digunakan untuk membuat keputusan tentang visualisasi dan interaksi data Anda. Misalnya, saat melihat peta minimarket, Anda bisa memilih untuk menampilkan toko yang menjual tiket angkutan umum saja.

Menggambar poligon

Class Data.Polygon menangani pelilitan poligon untuk Anda. Anda bisa meneruskan sebuah array yang berisi satu atau beberapa cincin linier, yang didefinisikan sebagai koordinat lintang/bujur. Cincin linier pertama mendefinisikan batas luar poligon. Jika Anda meneruskan lebih dari satu cincin linier, maka cincin linier kedua dan seterusnya akan digunakan untuk mendefinisikan jalur dalam (lubang) di poligon.

Contoh berikut akan membuat poligon persegi panjang dengan dua lubang di dalamnya:

TypeScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: -33.872, lng: 151.252 },
    }
  );

  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];

  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];

  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

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

JavaScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: -33.872, lng: 151.252 },
  });
  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];
  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

window.initMap = initMap;
index.js

Memuat GeoJSON

GeoJSON adalah standar umum untuk membagikan data geospasial di internet. Karena ringan dan bisa dibaca orang, GeoJSON cocok untuk berbagi dan berkolaborasi. Dengan Lapisan data, Anda bisa menambahkan data GeoJSON ke peta Google hanya dengan satu baris kode.

map.data.loadGeoJson('google.json');

Setiap peta memiliki objek map.data, yang berfungsi sebagai lapisan data untuk data geospasial arbitrer, termasuk GeoJSON. Anda dapat memuat dan menampilkan file GeoJSON dengan memanggil metode loadGeoJSON() dari objek data. Contoh di bawah ini menampilkan cara menambahkan peta dan memuat data GeoJSON eksternal.

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json"
  );
}

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

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });
  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json",
  );
}

window.initMap = initMap;
index.js
Lihat contoh

Mencoba Contoh

Contoh GeoJSON

Sebagian besar contoh di halaman ini menggunakan file GeoJSON umum. File ini mendefinisikan enam karakter dalam 'Google' sebagai poligon di atas Australia. Silakan menyalin atau memodifikasi file ini saat Anda menguji Lapisan data.

Catatan: Untuk memuat file json dari domain lain, domain tersebut harus telah mengaktifkan Cross-Origin Resource Sharing (CORS).

Teks lengkap file tersebut bisa dilihat di bawah ini dengan memperbesar panah kecil di sebelah kata google.json.

google.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

Menata Data GeoJSON

Gunakan metode Data.setStyle() untuk menetapkan cara menampilkan data Anda. Metode setStyle() menggunakan literal objek StyleOptions, atau fungsi yang menghitung gaya untuk setiap fitur.

Aturan gaya sederhana

Cara paling sederhana untuk menata fitur adalah dengan meneruskan literal objek StyleOptions ke setStyle(). Cara ini akan menetapkan gaya tunggal untuk setiap fitur dalam koleksi Anda. Perhatikan, setiap jenis fitur hanya dapat merender subset opsi yang tersedia. Ini berarti penggabungan gaya untuk berbagai jenis fitur dapat dilakukan dalam satu literal objek. Misalnya, cuplikan di bawah menetapkan icon kustom yang hanya memengaruhi geometri titik, dan fillColor yang hanya memengaruhi poligon.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

Informasi selengkapnya mengenai kombinasi gaya/fitur yang valid dapat ditemukan di Opsi Gaya.

Di bawah ini adalah contoh setelan goresan dan warna isian untuk beberapa fitur dengan menggunakan literal objek StyleOptions. Perhatikan, setiap poligon diberi gaya yang sama.

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

Aturan gaya deklaratif

Jika Anda ingin memperbarui gaya sejumlah besar overlay, seperti penanda atau polyline, biasanya Anda harus melakukan iterasi di setiap overlay pada peta dan menetapkan gayanya satu per satu. Dengan Lapisan data, Anda bisa menetapkan aturan secara deklaratif dan aturan akan diterapkan ke seluruh set data. Jika data atau aturan diperbarui, gaya secara otomatis akan diterapkan ke setiap fitur. Anda bisa menggunakan properti fitur untuk menyesuaikan gayanya.

Misalnya, kode di bawah ini menetapkan warna setiap karakter di google.json dengan memeriksa posisinya dalam himpunan karakter ASCII. Dalam kasus ini, kita telah mengenkode posisi karakter bersama data kita.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

Menghapus gaya

Jika Anda ingin menghapus gaya yang diterapkan, teruskan literal objek kosong ke metode setStyles().

// Remove custom styles.
map.data.setStyle({});

Cara ini akan menghapus setiap gaya kustom yang sudah Anda tetapkan, dan fitur akan dirender menggunakan gaya default. Jika Anda tidak ingin lagi merender fitur, tetapkan properti visible dari StyleOptions ke false.

// Hide the Data layer.
map.data.setStyle({visible: false});

Mengganti gaya default

Aturan gaya visual biasanya diterapkan pada setiap fitur di Lapisan data. Namun, ada kalanya Anda ingin menerapkan aturan gaya khusus pada fitur tertentu. Misalnya, sebagai cara untuk menyorot fitur saat diklik.

Untuk menerapkan aturan gaya khusus, gunakan metode overrideStyle(). Setiap properti yang Anda ubah dengan metode overrideStyle() akan diterapkan sebagai tambahan untuk gaya global yang sudah ditetapkan di setStyle(). Misalnya, kode di bawah ini akan mengubah warna isian poligon saat diklik, tetapi tidak akan menetapkan gaya lainnya.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

Panggil metode revertStyle() untuk menghapus semua penggantian gaya.

Opsi gaya

Opsi yang tersedia untuk menata gaya visual setiap fitur bergantung pada jenis fitur. Misalnya, fillColor hanya akan merender pada geometri poligon, sedangkan icon hanya akan muncul pada geometri titik. Informasi selengkapnya tersedia dalam dokumentasi referensi untuk StyleOptions.

Tersedia di semua geometri

  • clickable: Jika true, fitur akan menerima peristiwa mouse dan sentuh
  • visible: Jika true, fitur akan terlihat.
  • zIndex: Semua fitur ditampilkan di peta menurut urutan zIndex, dengan nilai yang lebih tinggi akan ditampilkan di depan fitur yang nilainya lebih rendah. Penanda selalu ditampilkan di depan line-string dan poligon.

Tersedia di geometri titik

  • cursor: Kursor mouse yang akan ditampilkan saat kursor diarahkan.
  • icon: Ikon yang akan ditampilkan untuk geometri titik.
  • shape: Mendefinisikan peta gambar yang digunakan untuk deteksi hit.
  • title: Teks pengarahan kursor.

Tersedia di geometri garis

  • strokeColor: Warna goresan. Semua warna CSS3 didukung, kecuali untuk tambahan warna yang dinamai.
  • strokeOpacity: Opasitas goresan antara 0,0 dan 1,0.
  • strokeWeight: Lebar goresan dalam piksel.

Tersedia di geometri poligon

  • fillColor: Warna isian. Semua warna CSS3 didukung, kecuali untuk tambahan warna yang dinamai.
  • fillOpacity: Opasitas isian antara 0.0 dan 1.0.
  • strokeColor: Warna goresan. Semua warna CSS3 didukung, kecuali untuk tambahan warna yang dinamai.
  • strokeOpacity: Opasitas goresan antara 0,0 dan 1,0.
  • strokeWeight: Lebar goresan dalam piksel.

Menambahkan Pengendali Peristiwa

Fitur merespons peristiwa, seperti mouseup atau mousedown. Anda bisa menambahkan pemroses peristiwa agar pengguna dapat berinteraksi dengan data di peta. Dalam contoh di bawah ini, kita menambahkan peristiwa pengarahan mouse, yang menampilkan informasi tentang fitur di bawah kursor mouse.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

Peristiwa lapisan data

Peristiwa berikut umum untuk semua fitur, apa pun jenis geometrinya:

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

Informasi selengkapnya tentang peristiwa ini dapat ditemukan dalam dokumentasi referensi untuk class google.maps.data.

Mengubah Penampilan Secara Dinamis

Anda dapat menetapkan gaya Lapisan data dengan meneruskan fungsi yang menghitung gaya setiap fitur ke metode google.maps.data.setStyle(). Fungsi ini akan dipanggil setiap kali properti fitur diperbarui.

Pada contoh di bawah, kami menambahkan pemroses peristiwa untuk peristiwa click yang memperbarui properti isColorful fitur. Gaya fitur diperbarui untuk menerapkan perubahan segera setelah properti ditetapkan.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {!google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});