Skip to content
This repository has been archived by the owner on Jun 23, 2022. It is now read-only.

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

Open
PCPbiscuit opened this issue Mar 29, 2022 · 0 comments

Comments

@PCPbiscuit
Copy link

Приветствую,
В моём кейсе, нужно развернуть кастомные метки на карте в зависимости от направления движения, я делаю это через 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 определяется область ховера в метках? Может как то, неочевидным образом, возможно метод этот достать из карты?
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant