Formes et lignes

Sélectionnez une plate-forme : Android iOS

Vous pouvez ajouter différentes formes à votre carte. Une forme est un objet sur la carte, associé à un système de coordonnées LatLng. Dans l'API Maps JavaScript, les cartes 3D sont compatibles avec l'ajout de lignes et de 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 Polyline3DElement 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 Polyline3DElement 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 polylignes sont dessinés sous la forme d'une série de segments droits sur la carte. Vous pouvez spécifier des couleurs personnalisées, des épaisseurs, des opacités, des hauteurs et des options de style géométrique pour le trait de la ligne dans les Polyline3DElementOptions lorsque vous créez votre ligne, ou bien changer 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 bords du polygone suivent la courbure de la Terre ou s'ils sont dessinés sous forme de lignes droites.
• altitudeMode : interprétation des composants d'altitude dans les coordonnées
• drawsOccludedSegments : valeur booléenne indiquant si les 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.

let map;
async function init() {
    const { Map3DElement, Polyline3DElement } =
        await google.maps.importLibrary('maps3d');

    map = new Map3DElement({
        center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
        range: 3362.87,
        tilt: 64.01,
        heading: 25.0,
        mode: 'SATELLITE',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polyline = new Polyline3DElement({
        path: [
            { 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 },
        ],
        strokeColor: 'blue',
        outerColor: 'white',
        strokeWidth: 10,
        outerWidth: 0.4,
        altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height).
        drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way.
    });

    map.append(polyline);
}

void init();
index.js

Polylignes interactives

L'exemple suivant active ou désactive la propriété drawsOccludedSegments de la polyligne après l'enregistrement d'un événement de clic.

let map;
async function init() {
    const { Map3DElement, Polyline3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    map = new Map3DElement({
        center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
        range: 3362.87,
        tilt: 64.01,
        heading: 25.0,
        mode: 'SATELLITE',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polyline = new Polyline3DInteractiveElement({
        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 },
        ],
        strokeColor: 'blue',
        outerColor: 'white',
        strokeWidth: 10,
        outerWidth: 0.4,
        altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height).
        drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way.
    });

    polyline.addEventListener('gmp-click', function () {
        // Toggle whether the line draws occluded segments.
        this.drawsOccludedSegments = !this.drawsOccludedSegments;
    });

    map.append(polyline);
}

void init();
index.js

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 Polygon3DElement sont semblables aux objets Polyline3DElement 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 épaisseurs 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 acceptés.

Les objets Polygon3DElement 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 Polygon3DElement spécifie un tableau de tableaux. 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 Polygon3DElement à l'aide d'un seul tableau de coordonnées LatLng. Les cartes 3D de l'API Maps JavaScript convertissent le tableau en un tableau de tableaux lors de sa construction lorsqu'elles le stockent dans la propriété path.

async function init() {
    const { Map3DElement, Polygon3DElement } =
        await google.maps.importLibrary('maps3d');

    const map3DElement = new Map3DElement({
        center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },
        heading: 340,
        tilt: 70,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    const polygonOptions = {
        strokeColor: '#0000ff80',
        strokeWidth: 8,
        fillColor: '#ff000080',
        drawsOccludedSegments: false,
    };

    const examplePolygon = new Polygon3DElement(polygonOptions);

    examplePolygon.path = [
        { lat: 40.7144, lng: -74.0208 },
        { lat: 40.6993, lng: -74.019 },
        { lat: 40.7035, lng: -74.0004 },
    ];

    map3DElement.append(examplePolygon);

    document.body.append(map3DElement);
}

void init();
index.js

Polygones interactifs

L'exemple suivant modifie les couleurs intérieure et extérieure du polygone après l'enregistrement d'un événement de clic.

async function init() {
    const { Map3DElement, Polygon3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },
        heading: 340,
        tilt: 70,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);

    const polygonOptions = {
        strokeColor: '#0000ff80',
        strokeWidth: 8,
        fillColor: '#ff000080',
        drawsOccludedSegments: false,
    };

    const examplePolygon = new Polygon3DInteractiveElement(polygonOptions);

    examplePolygon.path = [
        { lat: 40.7144, lng: -74.0208 },
        { lat: 40.6993, lng: -74.019 },
        { lat: 40.7035, lng: -74.0004 },
        { lat: 40.7144, lng: -74.0208 },
    ];

    examplePolygon.addEventListener('gmp-click', function (event) {
        // change the color of the polygon stroke and fill colors to a random alternatives!
        this.fillColor = randomizeHexColor(this.fillColor);
        this.strokeColor = randomizeHexColor(this.strokeColor);
        console.log(event);
    });

    map.append(examplePolygon);
}

function randomizeHexColor(originalHexColor) {
    console.log(originalHexColor);
    const alpha = originalHexColor.substring(7);

    // Generate random values for Red, Green, Blue (0-255)
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);

    console.log(r + ' ' + g + ' ' + b);

    // Convert decimal to 2-digit hex, padding with '0' if needed
    const rHex = ('0' + r.toString(16)).slice(-2);
    const gHex = ('0' + g.toString(16)).slice(-2);
    const bHex = ('0' + b.toString(16)).slice(-2);

    // Combine parts: '#' + random RGB + original Alpha (if any)
    return `#${rHex}${gHex}${bHex}${alpha}`;
}

void init();
index.js