Sınır poligonuna stil uygulama

Platform seçin: Android iOS JavaScript

Genel Bakış

Bir sınır poligonunun doldurma ve çizgi stilini belirlemek için stil özelliklerini tanımlamak üzere FeatureStyleOptions özelliğini kullanın ve bir özellik katmanındaki style mülkünü, stil mantığını içeren bir google.maps.FeatureStyleFunction olarak ayarlayın.

Aşağıdaki örnek haritada, tek bir bölgenin sınır poligonunun vurgulanması gösterilmektedir.

style mülkünü, stil mantığı içerebilen bir google.maps.FeatureStyleFunction olarak ayarlayarak sınır özelliklerine stil uygulayın. Stil işlevi, etkilenen özellik katmanındaki her özellik üzerinde çalıştırılır ve stil özelliğini ayarladığınız sırada uygulanır. Bu özelliği güncellemek için stil mülkünü tekrar ayarlamanız gerekir.

Bir özellik katmanındaki tüm özelliklere tek tip bir stil uygulamak için style özelliğini google.maps.FeatureStyleOptions olarak ayarlayın. Bu durumda mantık gerekli olmadığından bir özellik stili işlevi kullanmanız gerekmez.

Stil işlevi, özelliklere uygulandığında her zaman tutarlı sonuçlar döndürmelidir. Örneğin, bir grup özelliği rastgele renklendirmek istiyorsanız rastgelelik özelliği, özellik stili işlevinde yer almamalıdır. Aksi takdirde istenmeyen sonuçlar elde edilir.

Bu işlev, bir katmandaki her özellik üzerinde çalıştığından optimizasyon önemlidir. Oluşturma sürelerini etkilememek için:

  • Yalnızca ihtiyacınız olan katmanları etkinleştirin.
  • Bir katman artık kullanılmadığında style değerini null olarak ayarlayın.

Mahalle özellik katmanındaki bir poligona stil uygulamak için aşağıdaki adımları uygulayın:

  1. Henüz yapmadıysanız yeni bir harita kimliği ve harita stili oluşturmak için Başlayın bölümündeki adımları uygulayın. Yerleşim özellik katmanını etkinleştirdiğinizden emin olun.

  2. Harita başlatılırken yerleşim birimi özellik katmanına referans alın.

    featureLayer = map.getFeatureLayer("LOCALITY");

  3. google.maps.FeatureStyleFunction türüne sahip bir stil tanımı oluşturun.

  4. Özellik katmanındaki style özelliğini FeatureStyleFunction olarak ayarlayın. Aşağıdaki örnekte, yalnızca eşleşen yer kimliğine sahip google.maps.Feature öğesine stil uygulamak için bir işlev tanımlanmaktadır:

    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

Belirtilen yer kimliği bulunamazsa veya seçilen özellik türüyle eşleşmezse stil uygulanmaz. Örneğin, "New York City"nin yer kimliğiyle eşleşen bir POSTAL_CODE katmanına stil uygulamaya çalışmak hiçbir stilin uygulanmamasına neden olur.

Katmandan stili kaldırma

Bir katmandan stili kaldırmak için style'ü null olarak ayarlayın:

featureLayer.style = null;

Özellikleri hedeflemek için yer kimliklerini arama

Bölgelerin yer kimliklerini almak için:

Kapsam bölgeye göre değişir. Ayrıntılar için Google sınırları kapsamı başlıklı makaleyi inceleyin.

Coğrafi adlar, USGS Coğrafi Adlar Kurulu ve ABD Yer Adları Dosyaları gibi birçok kaynaktan edinilebilir.

Eksiksiz örnek kod

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>

    <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.onerror=()=>h=n(Error(p+" 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

Örneği Deneyin