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 permitem adicionar linhas e polígonos ao mapa.

Polilinhas

Para desenhar uma linha no mapa, use uma polilinha. A classe Polyline3DElement define uma sobreposição linear de segmentos de linha conectados no mapa. Um objeto Polyline3DElement é composto por 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 de Polyline3DElement usa um conjunto de Polyline3DElementOptions para especificar as coordenadas de 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étricas 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: 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) devem ser desenhadas.
• extruded: um booleano que indica se a polilinha deve 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',
    });

    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 depois de 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',
    });

    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. Os objetos Polygon3DElement 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. Defina 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 separados, a propriedade "paths" do objeto Polygon3DElement especifica uma matriz de matrizes. Cada matriz define uma sequência separada 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',
    });

    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 depois de 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',
    });

    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