Создать обрамляющую обводку для полигона в яндекс картах

#javascript #yandex_maps_api #gis

В конструкторе карт Яндекса при наведении мыши на полигон появляется обрамляющий
квадрат - https://yandex.ru/map-constructor/:

Подскажите как можно реализовать такой эффект?


    

Ответы

Ответ 1

Задача полностью решается средствами API:


Вам нужно слушать на многоугольниках событие наведения мыши mouseenter
По наведению мыши определять прямоугольную область, в которую вписан полигон. Для
этого есть метод геометрии geometry.getBounds() - он возвращает координаты прямоугольника,
который можно добавить на карту.
В ответ на событие mouseleave полигона нужно скрывать прямоугольник-рамку, например,
методом карты myMap.geoObjects.remove().


Ниже пример для одного полигона (для "универсальности" его понадобится доработать):


ymaps.ready(init);

function init() {
  var myMap = new ymaps.Map("map", {
    center: [55.73, 37.75],
    zoom: 10
  }, {
    searchControlProvider: 'yandex#search'
  });

  // Создаем многоугольник, используя вспомогательный класс Polygon.
  var myPolygon = new ymaps.Polygon([
    // Указываем координаты вершин многоугольника.
    // Координаты вершин внешнего контура.
    [
      [55.75, 37.50],
      [55.80, 37.60],
      [55.75, 37.70],
      [55.70, 37.70],
      [55.70, 37.50]
    ],
    // Координаты вершин внутреннего контура.
    [
      [55.75, 37.52],
      [55.75, 37.68],
      [55.65, 37.60]
    ]
  ], {
    // Описываем свойства геообъекта.
    // Содержимое балуна.
    hintContent: "Многоугольник"
  }, {
    // Задаем опции геообъекта.
    // Цвет заливки.
    fillColor: '#00FF0088',
    // Ширина обводки.
    strokeWidth: 5
  });

  // Добавляем многоугольник на карту.
  myMap.geoObjects.add(myPolygon);

  var boundsRectangle;

  myPolygon.events.add("mouseenter", function(e) {
    
    bounds = myPolygon.geometry.getBounds();
    boundsRectangle = new ymaps.Rectangle(bounds, {
      hintContent: 'Рамка многоугольника'
    }, {
      // Опции.
      // Цвет и прозрачность заливки.
      fillColor: '#777',
      fillOpacity: 0,
      // Цвет обводки.
      strokeColor: '#777',
      strokeOpacity: 0.7,
      // Ширина линии.
      strokeWidth: 5,
      zIndex: 0
    });
    myMap.geoObjects.add(boundsRectangle);
  });

  myPolygon.events.add("mouseleave", function() {
    
    myMap.geoObjects.remove(boundsRectangle);
  });
}
html,
body,
#map {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}