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

בחירת פלטפורמה: 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

    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 Board on Generative 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

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

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