سفارشی‌سازی نقشه‌های سه‌بعدی

می‌توانید ظاهر و عملکرد نقشه پایه سه‌بعدی را بااستفاده از سبک‌پردازی نقشه بااستفاده از فضای ابری سفارشی‌سازی کنید.

با سبک‌پردازی نقشه بااستفاده از فضای ابری، می‌توانید ظاهر و حس نقشه‌ای را که به کاربران ارائه می‌دهید کنترل کنید. با کنترل کردن ویژگی‌هایی مثل تراکم نقاط جالب (POI)، برداشتن برخی‌از دسته‌های POI، و اصلاح کردن رنگ‌آمیزی یا خطوط ویژگی‌ها، می‌توانید تجربه نقشه‌ای متناسب با کاربران خود ایجاد کنید.

سبک‌پردازی نقشه بااستفاده از فضای ابری تجربه ویرایش بدون کد را در کنسول Google Cloud ارائه می‌دهد. هر سبک سفارشی که ایجاد می‌کنید با شناسه نقشه مرتبط است؛ ویرایش‌های انجام‌شده در سبک شما در کنسول نقشه‌ها به‌طور خودکار در برنامه‌تان نشان داده می‌شود.

مثال زیر نقشه‌ای را نشان می‌دهد که از سبک سفارشی برای تغییر رنگ نمادها و نوشتار ویژگی تفریحی به نارنجی استفاده می‌کند:

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.75183154601466,
            lng: -119.52369070507672,
            altitude: 2200,
        },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs.
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();

نمای کلی

فرایند سفارشی‌سازی نقشه‌های سه‌بعدی بااستفاده از سبک‌پردازی نقشه بااستفاده از فضای ابری همانند نقشه‌های دوبعدی است:

۱ ایجاد شناسه نقشه شناسه نقشه ایجاد کنید. شناسه‌های نقشه برای مدیریت سبک به برنامه شما ارسال می‌شوند. در مراحل بعدی، سبک سفارشی را با این شناسه نقشه مرتبط خواهید کرد.
۲ ایجاد سبک نقشه بااستفاده از فضای ابری در این مرحله، «نقشه راه سه‌بعدی» (از حالت روشن و تاریک پشتیبانی می‌کند) یا «ترکیبی سه‌بعدی» (از حالت روشن پشتیبانی می‌کند) را انتخاب کنید.
3 مرتبط کردن سبک نقشه با نقشه سبکتان را به شناسه نقشه‌ای که در مرحله یک ایجاد کردید پیوند دهید
۴ افزودن شناسه نقشه به برنامه شناسه نقشه را در کدتان بااستفاده از پارامتر map-id مشخص کنید.
‫۵ شناسه نقشه را منتشر کنید توجه داشته باشید که تغییرات در سبک سفارشی شما به‌طور خودکار پس‌از انتشار در برنامه‌تان گنجانده می‌شود.

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

به‌روزرسانی شناسه نقشه به‌صورت پویا

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

برای به‌روزرسانی شناسه نقشه، ویژگی mapId را در نمونه Map3DElement تنظیم کنید:

const map3DElement = document.querySelector('gmp-map-3d');

// Update the map ID dynamically
map3DElement.mapId = 'YOUR_MAP_ID';

چون ویژگی mapId به مشخصه HTML برمی‌گردد، می‌توانید آن را با اصلاح مشخصه به‌صورت پویا به‌روز کنید:

const map3DElement = document.querySelector('gmp-map-3d');

// Alternatively, set the map-id attribute
map3DElement.setAttribute('map-id', 'YOUR_MAP_ID');

محدودیت‌ها

هنگام استفاده از سبک‌پردازی نقشه بااستفاده از فضای ابری با «نقشه‌های سه‌بعدی» در Maps JavaScript، محدودیت‌های خاصی وجود دارد که باید از آن‌ها آگاه باشید:

  • حالت تاریک فقط در حالت ROADMAP پشتیبانی می‌شود (حالت‌های HYBRID و SATELLITE از حالت تاریک پشتیبانی نمی‌کنند).
  • ویژگی‌های فعال‌شده با شناسه نقشه مثل سبک‌بندی داده‌محور پشتیبانی نمی‌شوند.