Как сделать подобную карту с областями и картинками?

Question

[Владислав Старцев]

Карта тут https://1za100.ru/ далее по ссылке "Выбрать участок".


Как я понимаю эти области являются полигонами, в админке нужно лишь правильно создавать области с помощью этого https://tech.yandex.ru/maps/jsbox/2.0/polygonEditor и по завершении сохранять координаты куда нибудь (в базу или файл) и привязывать к определенному участку. Но вот вопрос как создавать множество многоугольников и как на карту добавить собственные картинки и надписи?

Answer 1

[Александр Петров]

Я думаю, что тут без танцев с бубном не обойтись) В смысле легко и просто не будет...
Не помню как называется, но у яндекса есть функция, которая конвертирует позицию относительно карты в пикеслях в гео-координаты. (Чтобы точнее понять как работает начните копать с этой темы: https://toster.ru/q/316143) - я такую штуку делал давно и забыл сейчас как это точно все работает.

Получается вам для загрузки необходимо будет запустить карту, сверху положить маску (в svg например), посчитать координаты всех точек, передать яндексу, получить гео-координаты, которые можно использовать для Polygon яндекса. Сохраняете и радуетесь)

Простите, что размыто и поверхостно. Если хотите, можете написать мне в личку: https://vk.com/petrov___aleksandr, я свой код подниму, вспомню какой метод отвечает за конвертацию.

Answer 2

[Rhesus Negative]

Когда то делал только с одной областью но там еще много можно делать разными цветами
конструктор тут Ссылка

Answer 3

[Филипп Гапоненко]

Я бы решал это с помощью https://leafletjs.com/

как создавать множество многоугольников

Можно добавить карту в админку и рисовать полигоны прямо там, сохранять лучше в формате GeoJSON

как на карту добавить собственные картинки и надписи?

Ответы на эти вопросы вы сможете найти в документации leaflet

Answer 4

[freeExec]

Всё просто, 3 слоя которые мы наблюдаем:

Цветные полигоны учасков в geojson
------------------------------------
Гео привязанная картинка с домиками и надписями
------------------------------------
Спутниковая подложка