الأشكال والخطوط

اختيار النظام الأساسي: Android iOS

يمكنك إضافة أشكال مختلفة إلى خريطتك. الشكل هو عنصر على الخريطة مرتبط بنظام إحداثيات LatLng. تتيح "خرائط ثلاثية الأبعاد" في Maps JavaScript API إضافة خطوط ومضلّعات إلى الخريطة.

الخطوط المتعدّدة

لرسم خط على خريطتك، استخدِم خطًا متعدّدًا. يحدّد الصف 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();
index.js

الخطوط المتعدّدة التفاعلية

في المثال التالي، يتم تبديل قيمة السمة 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();
index.js

المضلّعات

يمثّل المضلّع منطقة محاطة بمسار مغلق (أو حلقة)، يتم تحديدها من خلال سلسلة من الإحداثيات. Polygon3DElement تشبه الكائنات الكائنات Polyline3DElement من حيث أنّها تتكوّن من سلسلة من الإحداثيات بتسلسل مرتّب. يتم رسم المضلّعات بضربة وملء. يمكنك تحديد ألوان وعروض مخصّصة لحافة المضلّع (الضربة) وألوان وشفافيات مخصّصة للمنطقة المحاطة (الملء). يجب الإشارة إلى الألوان بتنسيق HTML سداسي عشري. لا يتم استخدام أسماء الألوان.

يمكن أن تصف كائنات Polygon3DElement أشكالاً معقّدة، بما في ذلك:

• مناطق متعدّدة غير متجاورة محدّدة بمضلّع واحد
• المناطق التي تحتوي على ثقوب
• تقاطعات منطقة واحدة أو أكثر

لتحديد شكل معقّد، استخدِم مضلّعًا يتضمّن مسارات متعدّدة.

إضافة مضلّع

بما أنّ المنطقة المضلّعة قد تتضمّن عدة مسارات منفصلة، تحدّد السمة paths لكائن Polygon3DElement مصفوفة من المصفوفات. تحدّد كل مصفوفة تسلسلاً منفصلاً من إحداثيات LatLng المرتّبة.

بالنسبة إلى المضلّعات الأساسية التي تتكوّن من مسار واحد فقط، يمكنك إنشاء Polygon3DElement باستخدام مصفوفة واحدة من إحداثيات LatLng. ستحوّل "خرائط ثلاثية الأبعاد" في Maps JavaScript API المصفوفة إلى مصفوفة من المصفوفات عند الإنشاء عند تخزينها ضمن السمة 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();
index.js

المضلّعات التفاعلية

في المثال التالي، يتم تغيير الألوان الداخلية والخارجية للمضلّع بعد تسجيل حدث ناتج عن النقر.

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();
index.js