Формы и линии

Выберите платформу: Android iOS

Вы можете добавлять на карту различные фигуры. Фигура — это объект на карте, привязанный к системе координат LatLng . 3D-карты в API JavaScript Maps поддерживают добавление линий и многоугольников на карту.

Полилинии

Для построения линии на карте используйте полилинию. Класс Polyline3DElement определяет линейное наложение соединенных отрезков линий на карту. Объект Polyline3DElement представляет собой массив координат LatLng и создает последовательность отрезков линий, соединяющих эти координаты в упорядоченном порядке.

Добавить ломаную линию

Конструктор Polyline3DElement принимает набор параметров Polyline3DElementOptions , определяющих координаты LatLng линии, и набор стилей для настройки визуального поведения полилинии.

Полилинии отображаются на карте в виде ряда прямых отрезков. При построении линии в параметре Polyline3DElementOptions можно задать пользовательские цвета, ширину, прозрачность, высоту и геометрические параметры обводки, или же изменить эти свойства после построения. Полилиния поддерживает следующие стили обводки:

• outerColor : Шестнадцатеричный HTML-цвет в формате "#FFFFFF" .
• outerWidth : Числовое значение от 0.0 до 1.0 , которое интерпретируется как процент от strokeWidth .
• strokeColor : Шестнадцатеричный HTML-цвет в формате "#FFFFFF" .
• strokeWidth : Ширина линии в пикселях.
• geodesic : следует ли линия, проведенная вдоль кривизны Земли, или же края многоугольника представляют собой прямые линии.
• altitudeMode : Способ интерпретации компонентов высоты в координатах.
• drawsOccludedSegments : логическое значение, указывающее, следует ли отображать части многоугольника, скрытые объектами (например, зданиями).
• extruded : Логическое значение, указывающее, следует ли соединять полилинию с землей.

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

Интерактивные полилинии

В следующем примере свойство drawsOccludedSegments полилинии переключается после регистрации события клика.

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

Многоугольники

Многоугольник представляет собой область, заключенную в замкнутый контур (или петлю), определяемый рядом координат. Объекты Polygon3DElement похожи на объекты Polyline3DElement тем, что они состоят из ряда координат в упорядоченной последовательности. Многоугольники рисуются с помощью обводки и заливки. Вы можете задать пользовательские цвета и толщину для края многоугольника (обводки), а также пользовательские цвета и прозрачность для заключенной в него области (заливки). Цвета должны быть указаны в шестнадцатеричном формате HTML. Названия цветов не поддерживаются.

Объекты Polygon3DElement могут описывать сложные фигуры, в том числе:

• Несколько несмежных областей, ограниченных одним многоугольником.
• Участки с отверстиями.
• Пересечения одной или нескольких областей.

Для определения сложной фигуры используется многоугольник, состоящий из нескольких контуров.

Добавить многоугольник

Поскольку полигональная область может включать несколько отдельных путей, свойство paths объекта Polygon3DElement задает массив массивов. Каждый массив определяет отдельную последовательность упорядоченных координат LatLng .

Для простых многоугольников, состоящих всего из одного пути, можно создать объект Polygon3DElement используя один массив координат LatLng . API JavaScript для 3D-карт преобразует этот массив в массив массивов при создании объекта, сохраняя его в свойстве 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

Интерактивные многоугольники

В следующем примере внутренний и внешний цвета многоугольника изменяются после регистрации события клика.

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