يمكنك إضافة كائنات إلى الخريطة لتحديد النقاط أو الخطوط أو المناطق أو مجموعات العناصر. تطلب واجهة برمجة تطبيقات 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();
مضلّع منبثق
<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>