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

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

يمكنك إضافة أشكال مختلفة إلى خريطتك. الشكل هو عنصر على الخريطة مرتبط بنظام إحداثيات LatLng. تتيح "خرائط Google الثلاثية الأبعاد" في 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