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

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

هذا المنتج أو الميزة في مرحلة المعاينة (ما قبل الإصدار العام). قد يكون الدعم المقدّم للمنتجات والميزات في مرحلة ما قبل التوفّر للجمهور العام محدودًا، وقد لا تكون التغييرات التي يتم إجراؤها على المنتجات والميزات في مرحلة ما قبل التوفّر للجمهور العام متوافقة مع الإصدارات الأخرى من هذه المرحلة. تخضع "عروض مرحلة ما قبل التوفّر للجمهور العام" لبنود الخدمة المحدّدة في "منصة خرائط Google". لمزيد من المعلومات، يُرجى الاطّلاع على أوصاف مراحل الإطلاق.

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

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

لرسم خط على خريطتك، استخدِم خطًا متعدد الأضلاع. يحدّد الصف 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 الأشكال المعقّدة، بما في ذلك:

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

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

إضافة مضلّع

بما أنّ المنطقة المضلّعة قد تتضمّن عدة مسارات منفصلة، تحدّد السمة paths الخاصة بالكائن 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();