Formes et lignes

Sélectionnez une plate-forme : Android iOS

Ce produit ou cette fonctionnalité est en phase de preview (pré-DG). La prise en charge des fonctionnalités et produits pré-DG peut être limitée, et il se peut que les modifications apportées à ces fonctionnalités ou produits ne soient pas compatibles avec d'autres versions pré-DG. Les offres en pré-DG sont couvertes par les Conditions spécifiques du service Google Maps Platform. Pour en savoir plus, consultez les descriptions des étapes de lancement.

Vous pouvez ajouter différentes formes à votre carte. Une forme est un objet sur la carte, associé à un système de coordonnées LatLng. L'API Maps JavaScript, cartes 3D photoréalistes, permet d'ajouter des lignes et des polygones à la carte.

Polylignes

Pour dessiner une ligne sur une carte, utilisez une polyligne. La classe Polyline3DElement définit une superposition linéaire de segments de ligne connectés sur la carte. Un objet Polyline est composé d'un tableau de points géographiques LatLng qui crée une série de segments de lignes, lesquels relient ces points dans une séquence ordonnée.

Ajouter une polyligne

Le constructeur Polyline utilise un ensemble de Polyline3DElementOptions qui spécifient les coordonnées LatLng de la ligne et un ensemble de styles pour ajuster le comportement visuel de la polyligne.

Les objets polyligne sont dessinés sous la forme d'une série de segments droits sur la carte. Vous pouvez spécifier des couleurs, des largeurs, des opacités, des hauteurs et des options de style géométrique personnalisées pour le trait de la ligne dans les Polyline3DElementOptions lorsque vous créez votre ligne, ou bien modifier ces propriétés après la construction. Les polylignes prennent en charge les styles de trait suivants:

• outerColor: couleur HTML hexadécimale au format "#FFFFFF".
• outerWidth: valeur numérique comprise entre 0.0 et 1.0, interprétée comme un pourcentage de strokeWidth.
• strokeColor: couleur HTML hexadécimale au format "#FFFFFF".
• strokeWidth: largeur de la ligne en pixels.
• geodesic: indique si les arêtes du polygone suivent la courbure de la Terre ou sont dessinées en lignes droites.
• altitudeMode: interprétation des composants d'altitude dans les coordonnées
• drawsOccludedSegments: valeur booléenne indiquant si des parties du polygone masquées par des objets (tels que des bâtiments) doivent être dessinées.
• extruded: valeur booléenne indiquant si la polyligne doit être connectée au sol.

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();

Polylignes interactives

L'exemple suivant modifie la couleur du trait de la polyligne après l'enregistrement d'un événement de clic.

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();

Polygones

Un polygone représente une zone délimitée par un tracé fermé (ou une boucle) et définie par une série de coordonnées. Les objets Polygon sont semblables aux objets Polyline dans la mesure où ils sont composés d'une série de coordonnées dans une séquence ordonnée. Les polygones sont dessinés au moyen d'un trait et d'un remplissage. Vous pouvez définir des couleurs et des largeurs personnalisées pour le contour du polygone (le trait), ainsi que des couleurs et des opacités personnalisées pour la zone délimitée (le remplissage). Les couleurs doivent être indiquées au format HTML hexadécimal. Les noms de couleur ne sont pas pris en charge.

Les objets Polygon peuvent décrire des formes complexes, y compris :

• Plusieurs zones non contigües définies par un seul polygone
• Des zones contenant un espace vide
• Des intersections d'une ou plusieurs zones

Pour définir une forme complexe, vous devez utiliser un polygone avec plusieurs tracés.

Ajouter un polygone

Étant donné qu'une zone polygonale peut inclure plusieurs tracés distincts, la propriété "paths" de l'objet Polygon spécifie un tableau de tableaux, chacun de type MVCArray. Chaque tableau définit une séquence distincte de coordonnées LatLng ordonnées.

Pour les polygones de base constitués d'un seul tracé, vous pouvez construire un Polygon à l'aide d'un seul tableau de coordonnées LatLng. L'API Maps JavaScript, Cartes 3D photoréalistes convertit le tableau en un tableau de tableaux lors de sa construction lorsqu'elle le stocke dans la propriété 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();

Polygones interactifs

L'exemple suivant modifie la couleur du trait du polygone après l'enregistrement d'un événement de clic.

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();