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

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

סקירה כללית

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

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

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

כדי להחיל סגנון אחיד על כל התכונות בשכבת תכונות, מגדירים את המאפיין 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

   הערה: כדאי לקרוא את המדריך לשימוש ב-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 API ובגיאו-קידוד כדי לחפש אזורים לפי שם ולקבל מזהי מקומות לאזורים בגבולות שצוינו.
• קבלת נתונים מאירועי קליקים הפונקציה מחזירה את התכונה שמתאימה לאזור שנלחץ, ומספקת גישה למזהה המקום, לשם המוצג ולקטגוריה של סוג התכונה.

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

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

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

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