افزودن مجموعه داده به نقشه

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

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

پیش‌نیازها

قبل‌از ادامه، باید شناسه نقشه و سبک نقشه، و شناسه مجموعه داده داشته باشید.

• ایجاد شناسه نقشه و سبک نقشه
• ایجاد و بارگذاری مجموعه داده

مرتبط کردن شناسه مجموعه داده با سبک نقشه

آزمایشی: این ویژگی را فقط می‌توان برای سبک‌های نقشه روشن تنظیم کرد. وقتی سبک نقشه روشنی را که این ویژگی در آن فعال است به شناسه نقشه پیوند می‌دهید، لایه‌های فعال‌شده برای سبک نقشه تیره نیز دردسترس قرار می‌گیرد.

برای مرتبط کردن مجموعه داده با سبک نقشه‌ای که استفاده می‌کنید، مراحل زیر را انجام دهید:

1. در کنسول Google Cloud، به صفحه مجموعه‌های داده بروید.
2. روی نام مجموعه داده کلیک کنید. صفحه جزئیات مجموعه داده ظاهر می‌شود.
3. روی برگه پیش‌نمایش کلیک کنید.
4. به افزودن سبک نقشه پیمایش کنید و روی آن کلیک کنید.
   
5. روی چارگوش انتخاب «سبک(های) نقشه» برای مرتبط کردن کلیک کنید و سپس روی ذخیره کلیک کنید.

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

استفاده از قوانین سبک ساده

ساده‌ترین راه برای سبک‌بندی عارضه‌ها، ارسال FeatureStyleOptions برای تعریف مشخصه‌های سبک مانند رنگ، ماتی، و پهنای خط است. گزینه‌های سبک عارضه را مستقیماً روی لایه عارضه مجموعه داده اعمال کنید یا آن‌ها را همراه با FeatureStyleFunction استفاده کنید.

TypeScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.ts

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

JavaScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.js

استفاده از قوانین سبک اعلانی

از FeatureStyleFunction برای تنظیم قوانین سبک به‌صورت اعلانی استفاده کنید و آن‌ها را در کل مجموعه داده‌تان اعمال کنید. FeatureStyleOptions را براساس مقادیر مشخصه مجموعه داده به ویژگی اعمال کنید. همچنین می‌توانید null را از تابع سبک ویژگی برگردانید، برای مثال اگر می‌خواهید زیرمجموعه‌ای از ویژگی‌ها نامرئی بماند. این مثال تابع سبکی را نشان می‌دهد که مجموعه‌ای از نقطه‌ها را براساس مشخصه‌های داده رنگ‌آمیزی می‌کند:

TypeScript

function setStyle(params: { feature: google.maps.Feature }) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature as google.maps.DatasetFeature;
    // Get all of the needed dataset attributes.
    const furColors =
        datasetFeature.datasetAttributes.CombinationofPrimaryandHighlightColor;

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return {
                fillColor: 'black',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+':
            return {
                fillColor: '#8b0000',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+Gray':
            return {
                fillColor: '#8b0000',
                strokeColor: 'gray',
                pointRadius: 6,
            };
            break;
        case 'Cinnamon+White':
            return {
                fillColor: '#8b0000',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        case 'Gray+':
            return {
                fillColor: 'gray',
                pointRadius: 8,
            };
            break;
        case 'Gray+Cinnamon':
            return {
                fillColor: 'gray',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+Cinnamon, White':
            return {
                fillColor: 'silver',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+White':
            return {
                fillColor: 'gray',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        default: // Color not defined.
            return {
                fillColor: 'yellow',
                pointRadius: 8,
            };
            break;
    }
}
index.ts

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

JavaScript

function setStyle(params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors =
        datasetFeature.datasetAttributes.CombinationofPrimaryandHighlightColor;

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return {
                fillColor: 'black',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+':
            return {
                fillColor: '#8b0000',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+Gray':
            return {
                fillColor: '#8b0000',
                strokeColor: 'gray',
                pointRadius: 6,
            };
            break;
        case 'Cinnamon+White':
            return {
                fillColor: '#8b0000',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        case 'Gray+':
            return {
                fillColor: 'gray',
                pointRadius: 8,
            };
            break;
        case 'Gray+Cinnamon':
            return {
                fillColor: 'gray',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+Cinnamon, White':
            return {
                fillColor: 'silver',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+White':
            return {
                fillColor: 'gray',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        default: // Color not defined.
            return {
                fillColor: 'yellow',
                pointRadius: 8,
            };
            break;
    }
}
index.js

اعمال کردن سبک به لایه عارضه مجموعه داده

برای اعمال سبک‌ها در تابع سبک ویژگی:

1. با فراخوانی map.getDatasetFeatureLayer()، ارسال شناسه مجموعه داده، لایه عارضه مجموعه داده را دریافت کنید.
2. با تنظیم گزینه‌های سبک ویژگی (برای نمونه styleOptions) یا تابع (برای نمونه setStyle) در لایه مجموعه داده، سبک را اعمال کنید.

TypeScript

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.ts

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

JavaScript

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.js

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

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

featureLayer.style = null;

همچنین می‌توانید null را از تابع سبک ویژگی برگردانید، برای مثال اگر می‌خواهید زیرمجموعه‌ای از ویژگی‌ها نامرئی بماند.

افزودن نوشتار انتساب

هنگام نمایش مجموعه داده‌های بارگذاری‌شده در Google Maps، نقشه شما باید هرگونه ارجاع(های) لازم را نمایش دهد. نوشتار انتساب نباید نشان‌واره Google را بپوشاند یا در آن تداخل ایجاد کند.

یک راه برای افزودن نوشتار انتساب استفاده از کنترل‌های سفارشی برای قرار دادن HTML دلخواه در موقعیت‌های استاندارد روی نقشه است. تکه‌کدهای زیر HTML و CSS استفاده‌شده برای ارجاع‌ها را در این نمونه نشان می‌دهد:

<gmp-map
    center="40.757815, -73.933123"
    zoom="11"
    map-id="5cd2c9ca1cf05670"
    map-type-control="false">
    <div id="attribution" slot="control-block-end-inline-start">
        Data source: NYC Open Data
    </div>
</gmp-map>
index.html

#attribution {
    background-color: rgba(255, 255, 255, 0.7);
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: 10px;
    padding: 2px;
    margin: 2px;
}
style.css