Menata gaya poligon batas

Pilih platform: iOS JavaScript

Ringkasan

Untuk menata gaya isian dan goresan untuk poligon batas, gunakan FeatureStyleOptions untuk menentukan atribut gaya, dan tetapkan properti style di lapisan fitur ke google.maps.FeatureStyleFunction, yang berisi logika gaya visual.

Peta contoh berikut menunjukkan cara menandai poligon batas untuk satu wilayah.

Terapkan gaya ke fitur batas dengan menetapkan properti style ke google.maps.FeatureStyleFunction, yang dapat berisi logika gaya visual. Fungsi gaya dijalankan pada setiap fitur di lapisan fitur yang terdampak, dan diterapkan pada saat Anda menetapkan properti gaya. Untuk memperbaruinya, Anda harus kembali menetapkan properti gaya.

Untuk menata gaya semua fitur secara seragam dalam satu lapisan fitur, tetapkan properti style ke google.maps.FeatureStyleOptions. Pada kasus ini, Anda tidak perlu membuat fungsi gaya fitur, karena logika tidak diperlukan.

Fungsi gaya harus selalu menampilkan hasil yang konsisten saat diterapkan pada fitur. Misalnya, jika Anda ingin mewarnai sekumpulan fitur secara acak, bagian acak tersebut tidak boleh terjadi di fungsi gaya fitur karena akan menyebabkan hasil yang tidak diinginkan.

Karena fungsi ini berjalan di setiap fitur dalam lapisan, pengoptimalan harus dilakukan. Agar tidak memengaruhi waktu rendering:

  • Hanya aktifkan lapisan yang Anda perlukan.
  • Tetapkan style ke null saat lapisan tidak lagi digunakan.

Untuk menata gaya poligon di lapisan fitur lokalitas, lakukan langkah-langkah berikut:

  1. Jika Anda belum melakukannya, ikuti langkah-langkah di bagian Memulai untuk membuat gaya peta dan ID peta baru. Pastikan untuk mengaktifkan lapisan fitur Lokalitas.

  2. Dapatkan referensi ke lapisan fitur lokalitas saat peta melakukan inisialisasi.

    featureLayer = map.getFeatureLayer("LOCALITY");

  3. Buat definisi gaya dari jenis google.maps.FeatureStyleFunction.

  4. Tetapkan properti style di lapisan fitur ke FeatureStyleFunction. Contoh berikut menunjukkan cara penentuan fungsi untuk menerapkan gaya hanya ke google.maps.Feature dengan ID tempat yang cocok:

    TypeScript

    // Define a style with purple fill and border.
//@ts-ignore
const featureStyleOptions: google.maps.FeatureStyleOptions = {
  strokeColor: '#810FCB',
  strokeOpacity: 1.0,
  strokeWeight: 3.0,
  fillColor: '#810FCB',
  fillOpacity: 0.5
};

// Apply the style to a single boundary.
//@ts-ignore
featureLayer.style = (options: { feature: { placeId: string; }; }) => {
  if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
    return featureStyleOptions;
  }
};
    index.ts

    JavaScript

    // Define a style with purple fill and border.
//@ts-ignore
const featureStyleOptions = {
  strokeColor: "#810FCB",
  strokeOpacity: 1.0,
  strokeWeight: 3.0,
  fillColor: "#810FCB",
  fillOpacity: 0.5,
};

// Apply the style to a single boundary.
//@ts-ignore
featureLayer.style = (options) => {
  if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") {
    // Hana, HI
    return featureStyleOptions;
  }
};
    index.js

Jika ID tempat yang ditentukan tidak ditemukan, atau tidak cocok dengan jenis fitur yang dipilih, gaya tidak akan diterapkan. Misalnya, jika Anda mencoba menetapkan gaya di lapisan POSTAL_CODE yang cocok dengan ID tempat untuk "New York City", maka gaya tidak akan diterapkan.

Menghapus gaya visual dari lapisan

Untuk menghapus gaya visual dari lapisan, tetapkan style ke null:

featureLayer.style = null;

Mencari ID tempat untuk menarget fitur

Untuk mendapatkan ID tempat untuk wilayah:

Cakupan bervariasi menurut wilayah. Lihat cakupan batas Google untuk mengetahui detailnya.

Nama geografis tersedia dari banyak sumber, seperti USGS Board on Geographic Names, dan US Gazetteer Files.

Kode contoh lengkap

TypeScript

let map: google.maps.Map;
//@ts-ignore
let featureLayer;

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  map = new Map(document.getElementById('map') as HTMLElement, {
    center: { lat: 20.773, lng: -156.01 }, // Hana, HI
    zoom: 12,
    // In the cloud console, configure this Map ID with a style that enables the
    // "Locality" feature layer.
    mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>,
  });

  //@ts-ignore
  featureLayer = map.getFeatureLayer('LOCALITY');

  // Define a style with purple fill and border.
  //@ts-ignore
  const featureStyleOptions: google.maps.FeatureStyleOptions = {
    strokeColor: '#810FCB',
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: '#810FCB',
    fillOpacity: 0.5
  };

  // Apply the style to a single boundary.
  //@ts-ignore
  featureLayer.style = (options: { feature: { placeId: string; }; }) => {
    if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
      return featureStyleOptions;
    }
  };

}

initMap();
index.ts

JavaScript

let map;
//@ts-ignore
let featureLayer;

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");

  map = new Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 }, // Hana, HI
    zoom: 12,
    // In the cloud console, configure this Map ID with a style that enables the
    // "Locality" feature layer.
    mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>,
  });
  //@ts-ignore
  featureLayer = map.getFeatureLayer("LOCALITY");

  // Define a style with purple fill and border.
  //@ts-ignore
  const featureStyleOptions = {
    strokeColor: "#810FCB",
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: "#810FCB",
    fillOpacity: 0.5,
  };

  // Apply the style to a single boundary.
  //@ts-ignore
  featureLayer.style = (options) => {
    if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") {
      // Hana, HI
      return featureStyleOptions;
    }
  };
}

initMap();
index.js

CSS

/* 
 * 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;
}

style.css

HTML

<html>
  <head>
    <title>Boundaries Simple</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

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

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a. could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

Mencoba Contoh