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

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

يمكنك إضافة أشكال مختلفة إلى خريطتك. الشكل هو كائن على الخريطة مرتبط بنظام إحداثيات LatLng. تتيح "الخرائط الثلاثية الأبعاد ذات المظهر الواقعي" في واجهة برمجة التطبيقات JavaScript لـ "خرائط Google" إضافة الخطوط والأشكال المتعددة الأضلاع إلى الخريطة.

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

لرسم خط على الخريطة، استخدِم خطًا متعدّد الأجزاء. تحدِّد فئة Polyline3DElement تراكبًا خطيًا لمقاطع الخطوط المتّصلة على الخريطة. يتألّف عنصر Polyline من صفيف من LatLng موقع جغرافي، وينشئ سلسلة من أجزاء الخطوط التي تربط هذه المواقع الجغرافية في تسلسل مرتّب.

إضافة خط متعدد

يأخذ مُنشئ Polyline مجموعة من Polyline3DElementOptions لتحديد إحداثيات LatLng للخط ومجموعة من الأنماط لتعديل السلوك المرئي للخط المتعدّد.

يتم رسم عناصر الخطوط المتعددة على شكل سلسلة من الأجزاء المستقيمة على الخريطة. يمكنك تحديد ألوان مخصّصة وعرض ومستويات شفافية وارتفاعات وخيارات تصميم هندسي لخطّ الخط ضمن Polyline3DElementOptions عند إنشاء الخط، أو يمكنك تغيير هذه السمات بعد الإنشاء. تتوافق الخطوط المتعدّدة مع أنماط الخطوط التالية:

  • outerColor: لون HTML سداسي عشري بالتنسيق "#FFFFFF".
  • outerWidth: قيمة رقمية تتراوح بين 0.0 و1.0، ويتم تفسيرها كنسبة مئوية من strokeWidth.
  • strokeColor: لون HTML سداسي عشري بالتنسيق "#FFFFFF".
  • ‫strokeWidth: عرض الخط بالبكسل
  • ‫geodesic: ما إذا كانت حواف المضلع تتبع منحنى سطح الأرض، أو يتم رسمها كخطوط مستقيمة.
  • altitudeMode: كيفية تفسير مكوّنات الارتفاع في الإحداثيات
  • ‫drawsOccludedSegments: قيمة منطقية تشير إلى ما إذا كان يجب رسم أجزاء من المضلع التي تحجبها الأجسام (مثل المباني).
  • ‫extruded: قيمة منطقية تشير إلى ما إذا كان يجب ربط الخط المتعدّد بالخط الأرضي.
async function init() {
    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

    const map = new Map3DElement({
      center: { lat: 37.772675996068915, lng: -122.3978382542777, altitude: 2500 },
      tilt: 45,
      heading: 5.9743656,
      mode: MapMode.HYBRID,
    });

    const { Polyline3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polylineOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 10,
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
    }
    const polyline = new google.maps.maps3d.Polyline3DElement(polylineOptions)

    polyline.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}
    ];

    map.append(polyline)
    document.body.append(map);
}
init();

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

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

async function init() {
  const colors = ["red", "blue", "green", "yellow"];

  const { Map3DElement, MapMode, Polyline3DInteractiveElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 0, lng: -180, altitude: 15000000},
    mode: MapMode.HYBRID,
  });

  document.body.append(map);

  const polyline = new Polyline3DInteractiveElement({
    coordinates: [
      { lat: 37.772, lng: -122.214 },
      { lat: 21.291, lng: -157.821 },
      { lat: -18.142, lng: 178.431 },
      { lat: -27.467, lng: 153.027 }
    ],
    strokeColor: 'red',
    strokeWidth: 10,
  });

  polyline.addEventListener('gmp-click', (event) => {
    polyline.strokeColor = colors[~~(Math.random() * colors.length)];
  });

  map.append(polyline);
}

init();

المضلّعات

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

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

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

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

إضافة مضلّع

بما أنّ المنطقة المضلّعة قد تتضمّن عدة مسارات منفصلة، تحدّد خاصية مسارات Polygon العنصر مصفوفة من المصفوفات، وكلّ منها من النوع MVCArray. يحدِّد كل صفيف تسلسلًا منفصلاً من إحداثيات LatLng مرتبة.

بالنسبة إلى المضلّعات الأساسية التي تتألف من مسار واحد فقط، يمكنك إنشاء Polygon باستخدام صفيف واحد من إحداثيات LatLng. ستؤدي "الخرائط الثلاثية الأبعاد ذات المظهر الواقعي" في واجهة برمجة التطبيقات Maps JavaScript API إلى تحويل الصفيف إلى صفيف من الصفائف عند إنشائه عند تخزينه داخل سمة outerCoordinates.

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

    const map3DElement = new Map3DElement({
        center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
        range: 1000,
        tilt: 60,
        mode: MapMode.SATELLITE,
    });

    const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polygonOptions = {
        strokeColor: "#EA433580",
        strokeWidth: 4,
        fillColor: "#0000FF80",
        altitudeMode: "ABSOLUTE",
        extruded: true,
        drawsOccludedSegments: true,
    }

    const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);

    towerPolygon.outerCoordinates = [
        { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
        { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
        { lat: 43.643001, lng: -79.3866475, altitude: 600 }
    ];

    map3DElement.append(towerPolygon);
    document.body.append(map3DElement);
}
init();

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

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

async function init() {
  const colors = ["red", "blue", "green", "yellow"];
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map3DElement = new Map3DElement({
      center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
      range: 1000,
      tilt: 60,
      mode: MapMode.SATELLITE,
  });

  const { Polygon3DInteractiveElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

  const polygonOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 4,
      fillColor: "#0000FF80",
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
  }

  const towerPolygon = new google.maps.maps3d.Polygon3DInteractiveElement(polygonOptions);

  towerPolygon.outerCoordinates = [
      { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
      { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
      { lat: 43.643001, lng: -79.3866475, altitude: 600 }
  ];

    towerPolygon.addEventListener('gmp-click', (event) => {
      towerPolygon.strokeColor = colors[~~(Math.random() * colors.length)];
    });

  map3DElement.append(towerPolygon);

  document.body.append(map3DElement);
}

init();