Создание нового Polygon

[KainWhite]

Здравствуйте. Мне необходимо по нажатию на кнопку каждый раз создавать новый редактируемый Polygon и отображать его на карте. Вот что я попробовал, но не получилось: https://codesandbox.io/s/dreamy-williamson-fspfh?file=/src/App.js

Возможно есть способ получше?

P.S. Есть ли способ не добавлять в модулях карты "package.full" для редактируемого Polygon?

[mmarkelov]

@KainWhite привет. Поменял логику: https://codesandbox.io/s/quizzical-jones-nf68l?file=/src/App.js Если коротко, то Вам стоило придерживаться одного из двух вариантов:

• Либо использовать непосредственно ymaps,
• Либо использовать реакт обертки

Я предпочитаю реакт обертки, чтобы держать код в одном стиле. Вы же пытаетесь комбинировать два этих подхода и в геообъекты карты пытаетесь добавить реакт обертку полигона, что естественно не будет работать)

[KainWhite]

Получилось немного не то, что я хотел: при каждом втором нажатии на кнопку должен начать рисоваться именно новый полигон. То есть нажал на кнопку -> создался новый полигон -> нарисовал -> нажал на кнопку, чтобы выйти из режима редактирования полигона -> нажал на кнопку ещё раз -> создался ещё 1 новый полигон... В принципе, не особо важно, чтобы это было именно на одной кнопке. Главное, чтобы можно было создавать несколько полигонов. Именно для этого я пытался пользоваться ymaps и добавил this.buttonSelected. Возможно ли это чисто в рамках реакт-обёрток?

[mmarkelov]

@KainWhite в принципе возможно, у меня богатого опыта в использовании АПИ Яндекса для рисования, поэтому я не знаю событие, которое вызывается при завершении рисования. Есть событие statechange, но оно срабатывает при старте и окончании рисования. При желании можно использовать его. В таком случае главная идея будет заключаться в хранении всех отрисованных полигонов в массиве, тогда в рендере можно будет итерироваться по этому массиву и отображать соответствующие полигоны. Но, это достаточно сложно.

Я обновил пример в соответствии с тем, что Вам нужно с использованием АПИ Яндекса. Минус этого подхода в том что у вас не будет быстрого доступа к отрисованным полигонам

[KainWhite]

@mmarkelov, cпасибо, это сработало) Но у меня не получается добиться такого же поведения для Polygon с кастомным balloon ))) (создание с помощью реакт-хуков и withYMaps). Что я делаю не так? https://codesandbox.io/s/frosty-browser-ihw7n?file=/src/App.js

[KainWhite]

Ну, не получается оно потому, что я опять-таки пытаюсь впихнуть в map.geoObjects.Add() реакт-обёртку. Возможно стоит переписать MyPolygon, чтобы он возвращал именно то, что подходит для map.geoObjects.Add(), но тогда эти мои полигоны окажутся без состояния и, соответственно, не будут затронуты при изменении их внутренних компонентов, чего я хотел бы избежать.

[KainWhite]

Вот пример с переписанным MyPolygon, в нём полигоны создаются, но balloon почему-то не работает( https://codesandbox.io/s/icy-leftpad-henqm?file=/src/my-polygon/my-polygon.js

[mmarkelov]

@KainWhite поправил ваш код https://codesandbox.io/s/priceless-goldstine-0htb0?file=/src/my-polygon/my-polygon.js:178-191 В чем Ваши траблы:

• Для того чтобы добавить к полигону возможность отображать балун, в список загружаемых модулей добавить "geoObject.addon.balloon"
• В разметке не закрыли кавычку <div class="map__polygon-balloon">

[KainWhite]

Точно, совсем забыл про модуль balloon. Большое спасибо)