אפשר להוסיף אובייקטים למפה כדי להקצות נקודות, קווים, אזורים או אוספים של אובייקטים. ה-JavaScript API של מפות Google קורא לאובייקטים האלה שכבות-על. שכבות-העל מקושרות לקואורדינטות של קווי אורך ורוחב, כך שהן זזות כשגוררים או משנים את מרחק התצוגה של המפה.
סוגים של שכבות-על
הכלי הפוטוריאליסטי מפות תלת-ממדיות ב-API של JavaScript של מפות Google תומך בכמה סוגים שונים של שכבות-על שניתן להוסיף באופן פרוגרמטי:
- הקווים במפה מוצגים באמצעות קווים פוליגוניים, והם מיוצגים כרצף סדור של נקודות שמחוברות באמצעות קטעי קו.
- אזורים של צורה שרירותית במפה מוצגים באמצעות פוליגונים. בדומה לקווים פוליגוניים, פוליגונים הם רצף של מיקומים לפי סדר מסוים. בניגוד לקווים פוליגוניים, פוליגונים מגדירים אזור שהם תוחמים.
קווים פוליגוניים
קווים פוליגוניים משמשים להצגת קווים במפה על סמך רצף של מיקומים לפי סדר מסוים.
הוספת קו פוליגוני
<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>