Formas e linhas

Selecione a plataforma: Android iOS

É possível adicionar várias formas a um mapa. Elas são objetos vinculados a um sistema de coordenadas LatLng. Os mapas 3D na API Maps JavaScript são compatíveis com a adição de linhas e polígonos ao mapa.

Polilinhas

Para desenhar uma linha no mapa, use uma polilinha. A classe define uma sobreposição linear de segmentos de linha conectados no mapa.Polyline3DElement Um objeto Polyline3DElement consiste em uma matriz de locais LatLng e cria uma série de segmentos de linha que conectam esses locais em uma sequência ordenada.

Adicionar uma polilinha

O construtor Polyline3DElement usa um conjunto de Polyline3DElementOptions para especificar as coordenadas LatLng da linha e um conjunto de estilos para ajustar o comportamento visual da polilinha.

Objetos de polilinha são desenhados como uma série de segmentos retos no mapa. Você pode especificar cores, larguras, opacidades, alturas e opções de estilo geométrico personalizadas para o traço da linha em Polyline3DElementOptions durante a construção dela ou alterar essas propriedades posteriormente. Uma polilinha permite os estilos de traço a seguir:

• outerColor: uma cor HTML hexadecimal no formato "#FFFFFF".
• outerWidth: um valor numérico entre 0.0 e 1.0, que é interpretado como uma porcentagem de strokeWidth.
• strokeColor: uma cor HTML hexadecimal no formato "#FFFFFF".
• strokeWidth: a largura da linha em pixels.
• geodesic: indica se as bordas do polígono seguem a curvatura da Terra ou são desenhadas como linhas retas.
• altitudeMode: como os componentes de altitude nas coordenadas são interpretados.
• drawsOccludedSegments: um booleano que indica se as partes do polígono obscurecidas por objetos (como edifícios) precisam ser desenhadas.
• extruded: um booleano que indica se a polilinha precisa ser conectada ao chão.

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

Polilinhas interativas

O exemplo a seguir alterna a propriedade drawsOccludedSegments da polilinha após registrar um evento de clique.

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

Polígonos

Um polígono representa uma área envolvida por um caminho (ou loop) fechado, identificado por uma série de coordenadas. Polygon3DElement objetos são parecidos com os Polyline3DElement, porque são formados por uma série de coordenadas em uma sequência ordenada. Os polígonos são desenhados com um traço e um preenchimento. Você pode definir cores e larguras personalizadas para a borda do polígono (o traço) e cores e opacidades personalizadas para a área envolvida (o preenchimento). Indique as cores no formato HTML hexadecimal. Nomes de cores não são permitidos.

Objetos Polygon3DElement podem descrever formas complexas, incluindo:

• Várias áreas não contíguas definidas por um único polígono.
• Áreas com buracos.
• Interseções de uma ou mais áreas.

Para definir uma forma complexa, use um polígono com vários caminhos.

Adicionar um polígono

Como uma área poligonal pode incluir vários caminhos diferentes, a propriedade "paths" do objeto Polygon3DElement especifica uma matriz de matrizes. Cada matriz define uma sequência diferente de coordenadas LatLng ordenadas.

Para polígonos básicos que consistem em apenas um caminho, você pode construir um Polygon3DElement usando uma única matriz de coordenadas LatLng. Os mapas 3D na API Maps JavaScript convertem a matriz em uma matriz de matrizes durante a construção, ao armazená-la na propriedade 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

Polígonos interativos

O exemplo a seguir muda as cores interna e externa do polígono após registrar um evento de clique.

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