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

בחירת פלטפורמה: iOS JavaScript

סקירה

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

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

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

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

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

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

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

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

1. אם עדיין לא עשיתם זאת, עליכם לפעול לפי השלבים במאמר Get Started (תחילת העבודה) כדי ליצור מזהה מפה וסגנון מפה חדשים. הקפידו להפעיל את שכבת התכונות 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

   הערה: קראו את המדריך לשימוש ב-TypeScript ובמפות Google.

   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;

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

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

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

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

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

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

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

הערה: קראו את המדריך לשימוש ב-TypeScript ובמפות Google.

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

הערה: קוד ה-JavaScript מורכב מקטע הקוד של TypeScript.

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.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

כדאי לנסות דוגמה

JSFiddle.net Google Cloud Shell