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

סקירה כללית

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

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

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

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

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

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

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

כדי לעצב פוליגון בשכבת התכונות של היישוב:

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

2. מקבלים הפניה לשכבת התכונות של היישוב כשהמפה מאותחלת.

   TypeScript

   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer('LOCALITY');
   index.ts

   JavaScript

   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer('LOCALITY');
   index.js

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

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

   TypeScript

   // Define a style with purple fill and border.
   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.
   featureLayer.style = (options: google.maps.FeatureStyleFunctionOptions) => {
       const feature = options.feature as google.maps.PlaceFeature;
       if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
           // Hana, HI
           return featureStyleOptions;
       }
       return null;
   };
   index.ts

   JavaScript

   // Define a style with purple fill and border.
   const featureStyleOptions = {
       strokeColor: '#810FCB',
       strokeOpacity: 1.0,
       strokeWeight: 3.0,
       fillColor: '#810FCB',
       fillOpacity: 0.5,
   };
   
   // Apply the style to a single boundary.
   featureLayer.style = (options) => {
       const feature = options.feature;
       if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
           // Hana, HI
           return featureStyleOptions;
       }
       return null;
   };
   index.js

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

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

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

featureLayer.style = null;

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

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

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

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

שמות גיאוגרפיים זמינים ממקורות רבים, כמו USGS Board on Geographic Names ו-U.S. Gazetteer Files.

קוד לדוגמה מלא

let featureLayer: google.maps.FeatureLayer;

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    // Define a style with purple fill and border.
    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.
    featureLayer.style = (options: google.maps.FeatureStyleFunctionOptions) => {
        const feature = options.feature as google.maps.PlaceFeature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();
index.ts

let featureLayer;

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

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

    // Apply the style to a single boundary.
    featureLayer.style = (options) => {
        const feature = options.feature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-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>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="20.773,-156.01"
            zoom="12"
            map-id="8b37d7206ccf0121d4414bb0"></gmp-map>
    </body>
</html>
index.html