Kształty i linie

Wybierz platformę: Android iOS

Do mapy możesz dodawać różne kształty. Kształt to obiekt na mapie powiązany z układem współrzędnych LatLng. Mapy 3D w interfejsie Maps JavaScript API obsługują dodawanie do mapy linii i wielokątów.

Linie łamane

Aby narysować linię na mapie, użyj linii łamanej. Klasa Polyline3DElement definiuje liniową nakładkę połączonych odcinków linii na mapie. Obiekt Polyline3DElement składa się z tablicy lokalizacji LatLng i tworzy serię odcinków linii, które łączą te lokalizacje w uporządkowanej kolejności.

Dodawanie linii łamanej

Konstruktor Polyline3DElement przyjmuje zestaw Polyline3DElementOptions określający współrzędne LatLng linii oraz zestaw stylów, które pozwalają dostosować wygląd linii łamanej.

Obiekty linii łamanych są rysowane na mapie jako seria prostych odcinków. Podczas tworzenia linii możesz określić niestandardowe kolory, szerokości, przezroczystości, wysokości i opcje stylu geometrycznego dla kreski w Polyline3DElementOptions lub zmienić te właściwości po utworzeniu. Linia łamana obsługuje te style kreski:

• outerColor: kolor HTML w formacie szesnastkowym "#FFFFFF".
• outerWidth: wartość liczbowa z zakresu od 0.0 do 1.0, która jest interpretowana jako procent strokeWidth.
• strokeColor: kolor HTML w formacie szesnastkowym "#FFFFFF".
• strokeWidth: szerokość linii w pikselach.
• geodesic: czy krawędzie wielokąta mają podążać za krzywizną Ziemi, czy mają być rysowane jako linie proste.
• altitudeMode: sposób interpretowania komponentów wysokości we współrzędnych.
• drawsOccludedSegments: wartość logiczna wskazująca, czy należy rysować części wielokąta zasłonięte przez obiekty (np. budynki).
• extruded: wartość logiczna wskazująca, czy linia łamana ma być połączona z podłożem.

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

Interaktywne linie łamane

Ten przykład przełącza właściwość drawsOccludedSegments linii łamanej po zarejestrowaniu zdarzenia kliknięcia.

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

Wielokąty

Wielokąt reprezentuje obszar ograniczony zamkniętą ścieżką (lub pętlą), która jest zdefiniowana przez serię współrzędnych. Polygon3DElement obiekty są podobne do obiektów Polyline3DElement, ponieważ składają się z serii współrzędnych w uporządkowanej kolejności. Wielokąty są rysowane z kreską i wypełnieniem. Możesz zdefiniować spersonalizowane kolory i szerokości krawędzi wielokąta (kreski) oraz spersonalizowane kolory i nieprzezroczystość obszaru zamkniętego (wypełnienia). Kolory należy podawać w formacie szesnastkowym HTML. Nazwy kolorów nie są obsługiwane.

Obiekty Polygon3DElement mogą opisywać złożone kształty, w tym:

• wiele nieprzylegających do siebie obszarów zdefiniowanych przez jeden wielokąt;
• obszary z otworami;
• przecięcia co najmniej 1 obszaru.

Aby zdefiniować złożony kształt, użyj wielokąta z wieloma ścieżkami.

Dodawanie wielokąta

Ponieważ obszar wielokątny może obejmować kilka oddzielnych ścieżek, właściwość ścieżek obiektu Polygon3DElement określa tablicę tablic. Każda tablica definiuje oddzielną sekwencję uporządkowanych współrzędnych LatLng.

W przypadku podstawowych wielokątów składających się tylko z 1 ścieżki możesz utworzyć Polygon3DElement za pomocą pojedynczej tablicy współrzędnych LatLng. Mapy 3D w interfejsie Maps JavaScript API podczas tworzenia przekonwertują tablicę na tablicę tablic, gdy będą ją przechowywać we właściwości 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

Interaktywne wielokąty

Ten przykład zmienia kolory wewnętrzne i zewnętrzne wielokąta po zarejestrowaniu zdarzenia kliknięcia.

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