Как наложить слой с изображением в Mapbox GL JS?

Question

[Никита Мелихов]

Есть карта с image overlay и участками в виде слоёв fill/line:


Нужно поверх наложить прозрачное изображение (такой же размер, как и у overlay image) с номерами участков и различными иконками. Необходимо, чтобы изображение было привязано к координатам, чтобы номера участков были на своих местах. Как это можно сделать?

P.S. Сами участки уже сделаны, данные в GeoJSON есть, карта работает. Нужно только поверх карты наложить прозрачное изображение с номерами и иконками.

Answer 1

[freeExec]

Взять QGIS и векторизовать картинку (обрисовать участки, проставить атрибуты занят, номер), сохранить в geojson. Подключить этот файл в mapbox как источник данных со своим стилем.

Comments

[Никита Мелихов]

Сами участки уже сделаны, данные в GeoJSON есть, карта работает. Нужно только поверх карты наложить прозрачное изображение с номерами и иконками.

[freeExec]

Никита Мелихов, нужно номера положить в данные, так же как и создать ПОИ для иконок. И выводить это всё средствами GL, зачем тут картинка?

[Никита Мелихов]

freeExec, я думал, так быстрее - тупо наложить картинку поверх.

Что за ПОИ?

[freeExec]

Никита Мелихов, ПОИ, в данном случае будет точка которая будет означать детская площадка (или другой нужный тип), а на её месту будет рисоваться соответствующая иконка.
Может и быстрее, если она у вас есть. Но тогда не понятно зачем было вообще со всем этим заморачиваться, тупо показывали бы картинку как есть.

[Никита Мелихов]

freeExec, суть в выделении участков разным цветом и обработки клика по ним для отображения информации по конкретному участку.
Номер участка и иконка дома (если на участке есть дом) есть на изображении карты, но слои с цветными полигонами это всё перекрывают, поэтому нужно их вывести поверх этих слоёв.

Как вариант - можно и добавить точки с иконками, но пока не могу найти, что для этого использовать.
Можно ли вообще наложить поверх карты своё изображение (не тайлы) - тоже пока не особо понятно.

[Никита Мелихов]

freeExec, lazoordom-karta.ru
Может, так нагляднее будет.

[freeExec]

Никита Мелихов, Сделайте подсветку не заливкой, а обводкой контура, тогда цифры не будут закрываться. Или если так хотите картинку, то берёте свою исходную, убираете всё кроме цифр и накладываете её поверх. Но подложка так долго грузилась, что я подумал, что оно вообще не работает.

[Никита Мелихов]

freeExec, в том-то и вопрос - как наложить картинку поверх? :) Она уже есть. Такого же размера, что и подложка, но на ней только цифры.

На счёт долгой загрузки - поменяли подложку, ещё не успел оптимизировать. Прошлая около 2с грузилась.

[freeExec]

Никита Мелихов, тогда не понимаю в чём загвозка, первую же картинку наложили. Слои рисуются в обратном порядке - самый первый добавленные будет самый нижний.

[Никита Мелихов]

freeExec, картинка - оверлей в стиле:

var mapStyle = {
        "version": 8,
        "name": "Dark",
        "sources": {
            "overlay": {
                "type": "image",
                "url": "/templates/map/img/map.png",
                "coordinates": [
                    [x1, y1],
                    [x2, y1],
                    [x2, y2],
                    [x1, y2]
                ]
            }
        },
        "layers": [
            {
                "id": "background",
                "type": "background",
                "paint": {"background-color": "#111"}
            },
            {
                "id": "overlay",
                "source": "overlay",
                "type": "raster",
                "paint": {"raster-opacity": 0.85}
            },
        ]
    };

Перечитав этот стиль, догнал, что нужно делать. Изображение добавляется в source, а слой уже его использует. А я сразу layer смотрел, на стиль вообще не подумал посмотреть :(

В общем, спасибо за толчок в нужную сторону :)