gribnoysup / react-yandex-maps

Yandex Maps API bindings for React
MIT License
327 stars 114 forks source link

[Question] Как правильно определить iconShape при создании кастомного лейуата для Placemark #332

Open PCPbiscuit opened 2 years ago

PCPbiscuit commented 2 years ago

Приветствую, В моём кейсе, нужно развернуть кастомные метки на карте в зависимости от направления движения, я делаю это через templateLayoutFactory

const customPlacemarkContentLayout = () => {
    return ymaps?.templateLayoutFactory.createClass(
      [
        '<div id="placemark" style="transform:rotate({{options.rotate}}deg)">',
        '{% include "default#image" %}',
        '</div>',
      ].join(''),
    );
  };

Иконки разворачиваются как надо, однако проблема заключается в том, что по ховеру должен открываться хинт, но для этого нужно определить iconShape. Я пробовал разные вариации (Circle, Rectangle, etc.), но из за трансформа и прямоугольности иконок возникает ситуация, что область ховера у иконок разная. А в случае если две метки рядом, то начинается борьба иконок, кто важнее. Ещё одним препятствием нормальной работы ховера и следовательно хинта, то что по ховеру иконки увеличиваются в размере (и меняется оффсет, чтобы они не сдвигались).

<Placemark
                    geometry={[car.lat, car.lng]}
                    instanceRef={(ref: any) => {
                      ref?.events.add('mouseenter', () => {
                        console.log(ref);
                        ref.options.set('iconImageSize', [50, 50]);
                        ref.options.set('iconOffset', [-10, -10]);
                      });
                      ref?.events.add('mouseleave', () => {
                        ref.options.set('iconImageSize', [32, 40]);
                        ref.options.set('iconOffset', [0, 0]);
                      });
                    }}
                    options={{
                      iconLayout: customPlacemarkContentLayout(),
                      iconImageSize: [32, 40],
                      iconImageHref: icon,
                      iconRotate: car.course,
                      iconShape: {
                        type: 'Circle',
                        coordinates: [16, 20],
                        radius: 20,
                      },
                    }}
                    key={car.car_id}
                    className="bg-red"
                    properties={{
                      hintContent:
                        '<div class="bg-white p-4 space-y-2 flex flex-col rounded-tiny">' +
                        '<div class="text-xs font-semibold">' +
                        car.car_id +
                        '</div>' +
                        '<div>' +
                        car.car_id +
                        '</div>' +
                        '</div>',
                    }}
                  />

Компонент метки для референса

У меня два вопроса:

  1. Возможно ли динамически менять iconShape в зависимости от каких то условий (в данном случае разворот)
  2. Как в случае, если не используется templateFactory определяется область ховера в метках? Может как то, неочевидным образом, возможно метод этот достать из карты?