الرسم على الخريطة

يمكنك إضافة كائنات إلى الخريطة لتحديد النقاط أو الخطوط أو المناطق أو مجموعات العناصر. تطلب واجهة برمجة تطبيقات JavaScript للخرائط هذه العناصر المركّبة. ترتبط التراكبات بإحداثيات خطوط الطول/العرض، لذا فهي تتحرك عند سحب الخريطة أو تكبيرها.

أنواع التراكب

تتوافق خرائط الصور الواقعية ثلاثية الأبعاد في واجهة برمجة تطبيقات JavaScript للخرائط مع عدة أنواع مختلفة من التراكبات التي يمكنك إضافتها آليًا:

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

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

تُستخدم الخطوط المتعددة لعرض الخطوط على الخريطة بناءً على تسلسل مرتّب من المواقع.

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

خط متعدد أحمر مرسوم على سطح الأرض

<gmp-map-3d center="0,-180,15000000">
  <gmp-polyline-3d altitude-mode="clamp-to-ground" stroke-color="red" stroke-width="10"></gmp-polyline-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polyline = document.querySelector('gmp-polyline-3d');

  customElements.whenDefined(polyline.localName).then(() => {
    polyline.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 }
    ];
  });
</script>

إزالة خط متعدد

const polyline = document.querySelector('gmp-polyline-3d');
polyline.remove();

خطوط متعددة مسدودة

يمكنك التحكّم في مستوى رؤية المقاطع المغطاة باستخدام السمة draws-occluded-segments.

خط متعدد الطرق يرسم طريقًا عشوائيًا يمر عبر وسط مدينة سان فرانسيسكو

<gmp-map-3d heading="25" range="2500" tilt="45" center="37.7905,-122.3989,165">
  <gmp-polyline-3d altitude-mode="relative-to-ground" stroke-color="#1967d2" stroke-width="10" stroke-opacity="0.75"></gmp-polyline-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polyline = document.querySelector('gmp-polyline-3d');

  customElements.whenDefined(polyline.localName).then(() => {
    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}
    ];
  });
</script>

عرض النموذج

المضلعات

تستخدم المضلعات لعرض مناطق الشكل على الخريطة. مثل الخطوط المتعددة، فإن المضلّعات عبارة عن تسلسل مرتبة من المواقع. ومع ذلك، تحدد المضلعات المنطقة التي تحيط بها.

مضلّع بسيط

مضلّع أحمر مثلث مع حواف زرقاء حول مانهاتن السفلي

<gmp-map-3d center="40.6842,-74.0019,1000" heading="340" tilt="70">
  <gmp-polygon-3d altitude-mode="clamp-to-ground" fill-color="#ff0000" stroke-color="#0000ff" stroke-width="8" draws-occluded-segments></gmp-polygon-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polygon = document.querySelector('gmp-polygon-3d');

  customElements.whenDefined(polygon.localName).then(() => {
    polygon.outerCoordinates = [
      {lat: 40.7144, lng: -74.0208},
      {lat: 40.6993, lng: -74.019},
      {lat: 40.7035, lng: -74.0004},
      {lat: 40.7144, lng: -74.0208}
    ];
  });
</script>

إزالة مضلّع

const polygon = document.querySelector('gmp-polygon-3d');
polygon.remove();

مضلّع منبثق

منشور أحمر مثلث بحواف زرقاء حول جنوب مانهاتن بارتفاع 1000 متر

<gmp-map-3d center="40.7079,-74.0132,100" heading="30" tilt="55" range="5000">
  <gmp-polygon-3d altitude-mode="relative-to-ground" fill-color="#ff0000" fill-opacity="0.5" stroke-color="#0000ff" stroke-width="8" extruded><gmp-polygon-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polygon = document.querySelector('gmp-polygon-3d');

  customElements.whenDefined(polygon.localName).then(() => {
    polygon.outerCoordinates = [
      {lat: 40.7144, lng: -74.0208, altitude: 1000},
      {lat: 40.6993, lng: -74.019, altitude: 1000},
      {lat: 40.7035, lng: -74.0004, altitude: 1000},
      {lat: 40.7144, lng: -74.0208, altitude: 1000}
    ];
  });
</script>

عرض النموذج

مضلّع به ثقب داخلي

مضلّع أحمر مثلث فيه ثقب في الوسط وحواف زرقاء حول مانهاتن السفلي

<gmp-map-3d center="40.7093,-74.0122,10" heading="30" tilt="15" range="5000">
  <gmp-polygon-3d altitude-mode="relative-to-ground" fill-color="#ff0000" fill-opacity="0.5" stroke-color="#0000ff" stroke-width="8" extruded><gmp-polygon-3d>
</gmp-map-3d>

<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

<script>
  const polygon = document.querySelector('gmp-polygon-3d');

  customElements.whenDefined(polygon.localName).then(() => {
    polygon.outerCoordinates = [
      {lat: 40.7144, lng: -74.0208, altitude: 1000},
      {lat: 40.6993, lng: -74.019, altitude: 1000},
      {lat: 40.7035, lng: -74.0004, altitude: 1000},
      {lat: 40.7144, lng: -74.0208, altitude: 1000}
    ];
    polygon.innerCoordinates = [
      [
        {lat: 40.71, lng: -74.0175, altitude: 1000},
        {lat: 40.703, lng: -74.0165, altitude: 1000},
        {lat: 40.7035, lng: -74.006, altitude: 1000},
        {lat: 40.71, lng: -74.0175, altitude: 1000}
      ]
    ];
  });
</script>