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

انتخاب پلاتفرم: Android iOS JavaScript

نمای کلی

برای سبک‌دهی به رنگ و خط چندضلعی مرز، از 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

   توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

   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

   توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

   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 مطابق با شناسه مکان «شهر نیویورک» منجر به اعمال نشدن سبک می‌شود.

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

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

featureLayer.style = null;

برای هدف‌یابی ویژگی‌ها، شناسه‌های مکان را جستجو کنید

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

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

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

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

کد نمونه کامل

TypeScript

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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

JavaScript

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

CSS

/* 
 * 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

<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