اشکال و خطوط

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS

شما می‌توانید اشکال مختلفی را به نقشه خود اضافه کنید. یک شکل، یک شیء روی نقشه است که به یک سیستم مختصات LatLng گره خورده است. نقشه‌های سه‌بعدی در Maps JavaScript API از اضافه کردن خطوط و چندضلعی‌ها به نقشه پشتیبانی می‌کند.

چندخطی‌ها

برای رسم یک خط روی نقشه، از یک polyline استفاده کنید. کلاس Polyline3DElement یک پوشش خطی از پاره خط‌های متصل به هم را روی نقشه تعریف می‌کند. یک شیء Polyline3DElement شامل آرایه‌ای از مکان‌های LatLng است و مجموعه‌ای از پاره خط‌ها را ایجاد می‌کند که آن مکان‌ها را به ترتیبی مرتب به هم متصل می‌کنند.

اضافه کردن چندخطی

سازنده‌ی Polyline3DElement مجموعه‌ای از Polyline3DElementOptions را می‌گیرد که مختصات LatLng خط و مجموعه‌ای از سبک‌ها را برای تنظیم رفتار بصری چندخطی مشخص می‌کند.

اشیاء چندخطی به صورت مجموعه‌ای از بخش‌های مستقیم روی نقشه ترسیم می‌شوند. می‌توانید هنگام ساخت خط، رنگ‌ها، عرض‌ها، شفافیت‌ها، ارتفاع‌ها و گزینه‌های سبک‌دهی هندسی سفارشی را برای خط دور خط در Polyline3DElementOptions مشخص کنید، یا می‌توانید این ویژگی‌ها را پس از ساخت تغییر دهید. یک چندخطی از سبک‌های خط دور زیر پشتیبانی می‌کند:

  • outerColor : یک رنگ HTML هگزادسیمال با فرمت "#FFFFFF" است.
  • outerWidth : یک مقدار عددی بین 0.0 و 1.0 که به صورت درصدی از strokeWidth تفسیر می‌شود.
  • strokeColor : یک رنگ HTML هگزادسیمال با فرمت "#FFFFFF" است.
  • strokeWidth : عرض خط بر حسب پیکسل.
  • geodesic : اینکه آیا لبه‌های چندضلعی از انحنای زمین پیروی می‌کنند یا به صورت خطوط مستقیم رسم می‌شوند.
  • altitudeMode : نحوه تفسیر مؤلفه‌های ارتفاع در مختصات
  • drawsOccludedSegments : یک مقدار بولی که نشان می‌دهد آیا بخش‌هایی از چندضلعی که توسط اشیاء (مانند ساختمان‌ها) پنهان شده‌اند باید ترسیم شوند یا خیر.
  • extruded : یک مقدار بولی که نشان می‌دهد آیا چندخطی باید به زمین متصل شود یا خیر. 

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

    map = new Map3DElement({
        center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
        range: 3362.87,
        tilt: 64.01,
        heading: 25.0,
        mode: 'SATELLITE',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polyline = new Polyline3DElement({
        path: [
            { lat: 37.80515638571346, lng: -122.4032569467164 },
            { lat: 37.80337073509504, lng: -122.4012878349353 },
            { lat: 37.79925208843463, lng: -122.3976697250461 },
            { lat: 37.7989102378512, lng: -122.3983408725656 },
            { lat: 37.79887832784348, lng: -122.3987094864192 },
            { lat: 37.79786443410338, lng: -122.4066878788802 },
            { lat: 37.79549248916587, lng: -122.4032992702785 },
            { lat: 37.78861484290265, lng: -122.4019489189814 },
            { lat: 37.78618687561075, lng: -122.398969592545 },
            { lat: 37.7892310309145, lng: -122.3951458683092 },
            { lat: 37.7916358762409, lng: -122.3981969390652 },
        ],
        strokeColor: 'blue',
        outerColor: 'white',
        strokeWidth: 10,
        outerWidth: 0.4,
        altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height).
        drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way.
    });

    map.append(polyline);
}

void init();

چندخطی‌های تعاملی

مثال زیر پس از ثبت یک رویداد کلیک، ویژگی drawsOccludedSegments مربوط به چندخطی را تغییر وضعیت می‌دهد. 

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

    map = new Map3DElement({
        center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
        range: 3362.87,
        tilt: 64.01,
        heading: 25.0,
        mode: 'SATELLITE',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polyline = new Polyline3DInteractiveElement({
        coordinates: [
            { lat: 37.80515638571346, lng: -122.4032569467164 },
            { lat: 37.80337073509504, lng: -122.4012878349353 },
            { lat: 37.79925208843463, lng: -122.3976697250461 },
            { lat: 37.7989102378512, lng: -122.3983408725656 },
            { lat: 37.79887832784348, lng: -122.3987094864192 },
            { lat: 37.79786443410338, lng: -122.4066878788802 },
            { lat: 37.79549248916587, lng: -122.4032992702785 },
            { lat: 37.78861484290265, lng: -122.4019489189814 },
            { lat: 37.78618687561075, lng: -122.398969592545 },
            { lat: 37.7892310309145, lng: -122.3951458683092 },
            { lat: 37.7916358762409, lng: -122.3981969390652 },
        ],
        strokeColor: 'blue',
        outerColor: 'white',
        strokeWidth: 10,
        outerWidth: 0.4,
        altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height).
        drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way.
    });

    polyline.addEventListener('gmp-click', function () {
        // Toggle whether the line draws occluded segments.
        this.drawsOccludedSegments = !this.drawsOccludedSegments;
    });

    map.append(polyline);
}

void init();

چندضلعی‌ها

یک چندضلعی نشان‌دهنده‌ی ناحیه‌ای است که توسط یک مسیر بسته (یا حلقه) محصور شده است، که توسط مجموعه‌ای از مختصات تعریف می‌شود. اشیاء Polygon3DElement مشابه اشیاء Polyline3DElement هستند، زیرا از مجموعه‌ای از مختصات در یک توالی منظم تشکیل شده‌اند. چندضلعی‌ها با یک خط دور و یک پر کردن رسم می‌شوند. می‌توانید رنگ‌ها و عرض‌های سفارشی را برای لبه‌ی چندضلعی (خط دور) و رنگ‌ها و شفافیت‌های سفارشی را برای ناحیه‌ی محصور (پر کردن) تعریف کنید. رنگ‌ها باید در قالب HTML هگزادسیمال مشخص شوند. نام رنگ‌ها پشتیبانی نمی‌شود.

اشیاء Polygon3DElement می‌توانند اشکال پیچیده‌ای از جمله موارد زیر را توصیف کنند:

  • چندین ناحیه غیرمجاور که توسط یک چندضلعی واحد تعریف شده‌اند.
  • مناطقی که سوراخ‌هایی در آنها وجود دارد.
  • تقاطع‌های یک یا چند منطقه.

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

اضافه کردن چندضلعی

از آنجا که یک ناحیه چندضلعی ممکن است شامل چندین مسیر جداگانه باشد، خاصیت paths شیء Polygon3DElement آرایه‌ای از آرایه‌ها را مشخص می‌کند. هر آرایه یک دنباله جداگانه از مختصات LatLng مرتب شده را تعریف می‌کند.

برای چندضلعی‌های پایه که فقط از یک مسیر تشکیل شده‌اند، می‌توانید با استفاده از یک آرایه از مختصات LatLng یک Polygon3DElement بسازید. API نقشه‌های سه‌بعدی در Maps JavaScript، آرایه را هنگام ساخت، هنگام ذخیره آن در ویژگی path ، به آرایه‌ای از آرایه‌ها تبدیل می‌کند. 

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

    const map3DElement = new Map3DElement({
        center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },
        heading: 340,
        tilt: 70,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    const polygonOptions = {
        strokeColor: '#0000ff80',
        strokeWidth: 8,
        fillColor: '#ff000080',
        drawsOccludedSegments: false,
    };

    const examplePolygon = new Polygon3DElement(polygonOptions);

    examplePolygon.path = [
        { lat: 40.7144, lng: -74.0208 },
        { lat: 40.6993, lng: -74.019 },
        { lat: 40.7035, lng: -74.0004 },
    ];

    map3DElement.append(examplePolygon);

    document.body.append(map3DElement);
}

void init();

چندضلعی‌های تعاملی

مثال زیر رنگ‌های داخلی و خارجی چندضلعی را پس از ثبت یک رویداد کلیک تغییر می‌دهد. 

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

    const map = new Map3DElement({
        center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },
        heading: 340,
        tilt: 70,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polygonOptions = {
        strokeColor: '#0000ff80',
        strokeWidth: 8,
        fillColor: '#ff000080',
        drawsOccludedSegments: false,
    };

    const examplePolygon = new Polygon3DInteractiveElement(polygonOptions);

    examplePolygon.path = [
        { lat: 40.7144, lng: -74.0208 },
        { lat: 40.6993, lng: -74.019 },
        { lat: 40.7035, lng: -74.0004 },
        { lat: 40.7144, lng: -74.0208 },
    ];

    examplePolygon.addEventListener('gmp-click', function (event) {
        // change the color of the polygon stroke and fill colors to a random alternatives!
        this.fillColor = randomizeHexColor(this.fillColor);
        this.strokeColor = randomizeHexColor(this.strokeColor);
        console.log(event);
    });

    map.append(examplePolygon);
}

function randomizeHexColor(originalHexColor) {
    console.log(originalHexColor);
    const alpha = originalHexColor.substring(7);

    // Generate random values for Red, Green, Blue (0-255)
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);

    console.log(r + ' ' + g + ' ' + b);

    // Convert decimal to 2-digit hex, padding with '0' if needed
    const rHex = ('0' + r.toString(16)).slice(-2);
    const gHex = ('0' + g.toString(16)).slice(-2);
    const bHex = ('0' + b.toString(16)).slice(-2);

    // Combine parts: '#' + random RGB + original Alpha (if any)
    return `#${rHex}${gHex}${bHex}${alpha}`;
}

void init();