עיצוב פוליגון גבול

סקירה כללית

כדי להגדיר סגנון למילוי ולקו של פוליגון גבול, משתמשים ב-FeatureStyleOptions כדי להגדיר מאפייני סגנון, ומגדירים את המאפיין style בשכבת תכונות כ-google.maps.FeatureStyleFunction, שמכיל לוגיקה של סגנון.

המפה הבאה לדוגמה ממחישה את פוליגון הגבולות של אזור אחד.

כדי להחיל סגנון על תכונות הגבולות, מגדירים את המאפיין style ל-google.maps.FeatureStyleFunction, שיכול להכיל לוגיקת עיצוב. פונקציית הסגנון מופעלת על כל תכונה בשכבת התכונות המושפעת, והיא חלה בזמן שמגדירים את מאפיין הסגנון. כדי לעדכן אותו, צריך להגדיר שוב את מאפיין הסגנון.

כדי לעצב באופן אחיד את כל התכונות בשכבת התכונות, צריך להגדיר את המאפיין style ל-google.maps.FeatureStyleOptions. במקרה כזה, אין צורך להשתמש בפונקציה של סגנון תכונה, כי לא נדרש לוגיקה.

פונקציית הסגנון תמיד אמורה להחזיר תוצאות עקביות כשהיא חלה על תכונות. לדוגמה, אם רוצים לצבוע קבוצה של פיצ'רים בצורה אקראית, החלק האקראי לא צריך להופיע בפונקציית הסגנון של הפיצ'ר, כי זה יגרום לתוצאות לא רצויות.

הפונקציה הזו פועלת על כל התכונות בשכבה, ולכן חשוב לבצע אופטימיזציה. כדי להימנע מהשפעה על זמני העיבוד:

• מפעילים רק את השכבות הנחוצות.
• צריך להגדיר את style לערך null כשאין יותר שימוש בשכבה מסוימת.

כדי להגדיר סגנון לפוליגון בשכבת התכונות של יישוב, פועלים לפי השלבים הבאים:

1. אם עדיין לא עשיתם זאת, פועלים לפי השלבים המפורטים במאמר תחילת העבודה כדי ליצור מזהה מפה וסגנון מפה חדשים. חשוב להפעיל את שכבת המאפיינים Locality.

2. אחזור הפניה לשכבת התכונות של יישוב בזמן שמופעל המיפוי.

   featureLayer = map.getFeatureLayer("LOCALITY");

3. יוצרים הגדרת סגנון מסוג google.maps.FeatureStyleFunction.

4. מגדירים את המאפיין style בשכבת התכונות לערך FeatureStyleFunction. בדוגמה הבאה מופיעה הגדרה של פונקציה להחלה של סגנון רק על google.maps.Feature עם מזהה מקום תואם:

   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

אם מזהה המקום שצוין לא נמצא או שהוא לא תואם לסוג התכונה שנבחר, הסגנון לא יוחל. לדוגמה, אם מנסים להחיל סגנון על שכבת POSTAL_CODE שתואמת למזהה המקום של 'תל אביב', לא יוחל סגנון.

הסרת סגנון משכבה

כדי להסיר עיצוב משכבה, מגדירים את style כ-null:

featureLayer.style = null;

חיפוש מזהי מקומות כדי לטרגט תכונות

כדי לקבל מזהי מקומות של אזורים:

• שימוש ב-Places APIs ובמיקוד גיאוגרפי כדי לחפש אזורים לפי שם ולקבל מזהי מקומות של אזורים בתוך גבולות שצוינו.
• איך מקבלים נתונים מאירועי קליקים הפונקציה מחזירה את התכונה התואמת לאזור שבו לחצתם, ומספקת גישה למזהה המקום, לשם המוצג ולקטגוריה של סוג התכונה.

הכיסוי משתנה בהתאם לאזור. פרטים נוספים זמינים במאמר היקף הכיסוי של גבולות Google.

שמות גיאוגרפיים זמינים ממקורות רבים, כמו המועצה של USGS לשמות גיאוגרפיים וקובצי ה-Gazetteer של ארה"ב.

השלמת הקוד לדוגמה

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

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

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