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

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

סקירה כללית

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

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

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

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

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

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

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

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

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

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;

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

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

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

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

שמות גיאוגרפיים זמינים ממקורות רבים, כגון USGS Board on geo Name, וארה"ב קובצי Gazetteer.

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

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>

    <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