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

اختيار النظام الأساسي: 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',
    });

    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',
    });

    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',
    });

    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',
    });

    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