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

پلاتفرم را انتخاب کنید: 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,
};

JavaScript

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

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

از 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;
    }
}

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

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

برای اعمال سبک‌ها در تابع سبک عارضه:

  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;

JavaScript

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

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

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

برای برداشتن سبک از لایه، 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>

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