Sur la carte, vous pouvez ajouter des objets pour désigner des points, des lignes, des zones ou des ensembles d'objets. Dans l'API Maps JavaScript, on appelle ces objets des superpositions. Les superpositions étant liées aux coordonnées de latitude/longitude, elles se déplacent lorsque vous zoomez ou faites glisser la carte.
Types de superpositions
Dans l'API Maps JavaScript, les cartes 3D photoréalistes sont compatibles avec différents types de superpositions que vous pouvez ajouter par programmation :
- Les lignes sur la carte sont affichées à l'aide de polylignes, qui sont représentées par une séquence ordonnée de points reliés par des segments de ligne.
- Les zones de forme arbitraire sur la carte sont affichées à l'aide de polygones. Comme les polylignes, les polygones représentent une séquence ordonnée de lieux. Mais contrairement aux polylignes, les polygones définissent la région qu'ils délimitent.
Polylignes
Les polylignes sont utilisées pour afficher des lignes sur la carte en fonction d'une séquence ordonnée de lieux.
Ajouter une polyligne
<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>
Supprimer une polyligne
const polyline = document.querySelector('gmp-polyline-3d');
polyline.remove();
Polyligne masquée
Vous pouvez contrôler la visibilité des segments masqués à l'aide de l'attribut 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>
Polygones
Les polygones permettent d'afficher des zones de forme arbitraire sur la carte. Comme les polylignes, les polygones représentent une séquence ordonnée de lieux. Toutefois, les polygones définissent la région qu'ils délimitent.
Polygone simple
<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>
Supprimer un polygone
const polygon = document.querySelector('gmp-polygon-3d');
polygon.remove();
Polygone extrudé
<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>
Polygone avec trou intérieur
<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>