Фигуры и линии

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

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

Ломаные линии

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

Как добавить ломаную линию

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

Объекты Polyline (полилинии) рисуются на карте в виде последовательности прямых отрезков. С помощью свойств объекта 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',
    });

    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();

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

В примере ниже после регистрации события клика переключается свойство 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',
    });

    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();

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

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

С помощью объектов Polygon3DElement можно определять сложные фигуры, в том числе:

  • несколько не прилегающих друг к другу областей, определяемых одним многоугольником;
  • области с вырезанными сегментами;
  • пересечения одной или нескольких областей.

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

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

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

Если вы хотите нарисовать простой многоугольник с одним путем, достаточно создать объект Polygon3DElement с единым массивом координат LatLng. При вызове конструктора 3D Maps в Maps JavaScript API преобразует массив в массив массивов и сохраняет его в свойстве 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();

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

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

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();