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

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

סקירה כללית

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

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

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

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

שמות גיאוגרפיים זמינים ממקורות רבים, כמו המועצה של USGS לשמות גיאוגרפיים וקובצי ה-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

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

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

ניסיון של דוגמה