سبک‌بندی چندضلعی مرز

نمای کلی

برای سبک‌بندی رنگ‌آمیزی و خط مرزی چندضلعی مرز، از FeatureStyleOptions برای تعریف مشخصه‌های سبک استفاده کنید و ویژگی style را در لایه عارضه روی google.maps.FeatureStyleFunction تنظیم کنید که حاوی منطق سبک‌بندی است.

نقشه نمونه زیر برجسته کردن چندضلعی مرزی را برای یک منطقه نشان می‌دهد.

با تنظیم کردن ویژگی style روی google.maps.FeatureStyleFunction، که می‌تواند حاوی منطق سبک‌بندی باشد، سبک را روی عارضه‌های مرزی اعمال کنید. تابع سبک روی هر عارضه در لایه عارضه تحت‌تأثیر اجرا می‌شود و در زمانی که ویژگی سبک را تنظیم می‌کنید اعمال می‌شود. برای به‌روزرسانی آن، باید ویژگی سبک را دوباره تنظیم کنید.

برای اعمال سبک یکسان به همه عارضه‌های لایه عارضه، ویژگی style را روی google.maps.FeatureStyleOptions تنظیم کنید. در این حالت، نیازی به استفاده از تابع سبک عارضه نیست، زیرا منطق لازم نیست.

تابع سبک باید همیشه نتایج ثابتی را هنگام اعمال روی عارضه‌ها برگرداند. برای مثال، اگر می‌خواهید مجموعه‌ای از ویژگی‌ها را به‌طور تصادفی رنگ‌آمیزی کنید، بخش تصادفی نباید در تابع سبک ویژگی انجام شود، زیرا این کار باعث نتایج ناخواسته می‌شود.

چون این تابع روی هر عارضه در یک لایه اجرا می‌شود، بهینه‌سازی مهم است. برای جلوگیری از تأثیر بر زمان پرداز زدن:

• فقط لایه‌هایی را که نیاز دارید فعال کنید.
• وقتی لایه‌ای دیگر استفاده نمی‌شود، style را روی null تنظیم کنید.

برای سبک‌دهی به چندضلعی در لایه عارضه محلی، مراحل زیر را دنبال کنید:

1. اگر قبلاً این کار را نکرده‌اید، مراحل شروع به کار را دنبال کنید تا شناسه نقشه و سبک نقشه جدیدی ایجاد کنید. حتماً لایه عارضه محل را فعال کنید.

2. هنگام مقداردهی اولیه نقشه، مرجعی برای لایه عارضه محلی دریافت کنید.

   TypeScript

   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer('LOCALITY');
   index.ts

   JavaScript

   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer('LOCALITY');
   index.js

3. تعریف سبکی از نوع google.maps.FeatureStyleFunction ایجاد کنید.

4. خصوصیت style را در لایه عارضه روی FeatureStyleFunction تنظیم کنید. مثال زیر نحوه تعریف تابعی را نشان می‌دهد که سبکی را فقط برای google.maps.Feature با شناسه مکان منطبق اعمال می‌کند:

   TypeScript

   // Define a style with purple fill and border.
   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.
   featureLayer.style = (options: google.maps.FeatureStyleFunctionOptions) => {
       const feature = options.feature as google.maps.PlaceFeature;
       if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
           // Hana, HI
           return featureStyleOptions;
       }
       return null;
   };
   index.ts

   JavaScript

   // Define a style with purple fill and border.
   const featureStyleOptions = {
       strokeColor: '#810FCB',
       strokeOpacity: 1.0,
       strokeWeight: 3.0,
       fillColor: '#810FCB',
       fillOpacity: 0.5,
   };
   
   // Apply the style to a single boundary.
   featureLayer.style = (options) => {
       const feature = options.feature;
       if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
           // Hana, HI
           return featureStyleOptions;
       }
       return null;
   };
   index.js

اگر شناسه مکان مشخص‌شده پیدا نشود یا با نوع عارضه انتخاب‌شده مطابقت نداشته باشد، سبک اعمال نمی‌شود. برای مثال، تلاش برای سبک‌بندی لایه POSTAL_CODE که با شناسه مکان «New York City» مطابقت دارد، منجر به اعمال نشدن هیچ سبکی می‌شود.

برداشتن سبک از لایه

برای برداشتن سبک از لایه، style را روی null تنظیم کنید:

featureLayer.style = null;

جستجوی شناسه مکان‌ها برای هدف‌یابی عارضه‌ها

برای دریافت شناسه مکان برای مناطق:

• از Places API و Geocoding استفاده کنید تا مناطق را براساس نام جستجو کنید، و شناسه‌های مکان را برای مناطق در محدوده‌های مشخص‌شده دریافت کنید.
• دریافت داده از رویدادهای کلیک. این کار «ویژگی» مربوط به منطقه کلیک‌شده را برمی‌گرداند که دسترسی به شناسه مکان، نام نمایشی، و دسته نوع ویژگی آن را فراهم می‌کند.

پوشش بسته به منطقه متفاوت است. برای جزئیات، پوشش مرزهای Google را ببینید.

نام‌های جغرافیایی از منابع زیادی دردسترس است، ازجمله هیئت نام‌های جغرافیایی USGS، و فایل‌های فرهنگ جغرافیایی ایالات متحده.

کد نمونه کامل

let featureLayer: google.maps.FeatureLayer;

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    // Define a style with purple fill and border.
    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.
    featureLayer.style = (options: google.maps.FeatureStyleFunctionOptions) => {
        const feature = options.feature as google.maps.PlaceFeature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();
index.ts

let featureLayer;

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    // Define a style with purple fill and border.
    const featureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Apply the style to a single boundary.
    featureLayer.style = (options) => {
        const feature = options.feature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

<html>
    <head>
        <title>Boundaries Simple</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="20.773,-156.01"
            zoom="12"
            map-id="8b37d7206ccf0121d4414bb0"></gmp-map>
    </body>
</html>
index.html