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

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

    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 Geographic Names ו-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

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 },
    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>
    <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

רוצה לנסות את הדוגמה