Polygon: создание полигонов

В библиотеке Leaflet полигон представляет собой замкнутую геометрическую фигуру, задаваемую набором координат широты и долготы. Основной класс для работы с полигонами — L.polygon, который позволяет создавать как простые многоугольники, так и сложные формы с внутренними отверстиями.

Структура координат полигона

Полигон в Leaflet задаётся массивом точек:

const latlngs = [
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047]
];

Каждая точка — это пара [lat, lng]. Последняя точка автоматически соединяется с первой, формируя замкнутую фигуру.

Для более сложных форм используется массив массивов координат.

Базовое создание полигона

Создание полигона выполняется через L.polygon:

const polygon = L.polygon(latlngs, {
  color: 'blue',
  weight: 3,
  fillColor: '#3388ff',
  fillOpacity: 0.4
}).addTo(map);

Основные параметры:

  • color — цвет границы
  • weight — толщина линии
  • fillColor — цвет заливки
  • fillOpacity — прозрачность заливки

После создания полигон добавляется на карту через addTo(map).

Многоугольник с несколькими контурами

Leaflet поддерживает сложные полигоны, состоящие из нескольких внешних и внутренних контуров.

const multiPolygon = [
  [
    [51.51, -0.12],
    [51.53, -0.10],
    [51.52, -0.08]
  ],
  [
    [51.50, -0.09],
    [51.51, -0.07],
    [51.49, -0.06]
  ]
];

L.polygon(multiPolygon, { color: 'red' }).addTo(map);

Каждый вложенный массив представляет отдельный контур.

Полигон с отверстиями (holes)

Поддерживается создание «полигонов с вырезами», где внутренняя область исключается из заливки.

const outer = [
  [51.51, -0.12],
  [51.53, -0.12],
  [51.53, -0.08],
  [51.51, -0.08]
];

const hole = [
  [51.52, -0.11],
  [51.52, -0.09],
  [51.515, -0.09]
];

const polygonWithHole = L.polygon([outer, hole], {
  color: 'black',
  fillColor: 'yellow',
  fillOpacity: 0.5
}).addTo(map);

Первый массив — внешний контур, последующие — внутренние отверстия.

Работа с GeoJSON

Полигон часто создаётся через GeoJSON-структуру:

const geojsonFeature = {
  "type": "Feature",
  "geometry": {
    "type": "Polygon",
    "coordinates": [[
      [-0.12, 51.51],
      [-0.13, 51.52],
      [-0.11, 51.53],
      [-0.12, 51.51]
    ]]
  }
};

L.geoJSON(geojsonFeature, {
  style: {
    color: "green",
    weight: 2,
    fillOpacity: 0.3
  }
}).addTo(map);

Важно учитывать порядок координат GeoJSON: [lng, lat], в отличие от стандартного Leaflet.

Стилизация полигона

Параметры стиля позволяют управлять визуальным отображением:

L.polygon(latlngs, {
  stroke: true,
  color: '#ff7800',
  weight: 4,
  opacity: 0.8,
  fill: true,
  fillColor: '#fffc00',
  fillOpacity: 0.2,
  dashArray: '10, 5'
}).addTo(map);

Дополнительные параметры:

  • stroke — включение/выключение границы
  • opacity — прозрачность линии
  • dashArray — пунктирная линия

События полигона

Полигоны поддерживают стандартные события взаимодействия:

polygon.on('click', function (e) {
  console.log('Клик по полигону');
});

polygon.on('mouseover', function () {
  this.setStyle({ fillOpacity: 0.7 });
});

polygon.on('mouseout', function () {
  this.setStyle({ fillOpacity: 0.4 });
});

Доступные события включают:

  • click
  • mouseover
  • mouseout
  • dblclick
  • contextmenu

Изменение стиля после создания

Любой полигон можно динамически изменять:

polygon.setStyle({
  color: 'purple',
  fillColor: 'pink'
});

Также доступно временное скрытие:

map.removeLayer(polygon);
map.addLayer(polygon);

Получение координат

Координаты полигона доступны через:

const coords = polygon.getLatLngs();
console.log(coords);

Метод возвращает вложенную структуру массивов, соответствующую уровню сложности полигона.

Проверка попадания точки

Leaflet позволяет определить, находится ли точка внутри полигона:

const point = L.latLng(51.51, -0.1);
const inside = polygon.getBounds().contains(point);

Метод getBounds() возвращает прямоугольную область, охватывающую полигон.

Взаимодействие с редактированием

При подключении плагинов редактирования (например, Leaflet.draw) полигоны становятся изменяемыми:

polygon.editing.enable();
polygon.editing.disable();

Редактирование включает перетаскивание вершин и изменение формы.

Особенности производительности

При работе с большим количеством вершин:

  • предпочтительнее упрощать геометрию
  • использовать simplify() на этапе подготовки данных
  • избегать избыточных событий mousemove
  • применять GeoJSON для оптимизированной загрузки

Сравнение с другими геометриями

Полигон отличается от:

  • Polyline — не замкнутая линия
  • Rectangle — частный случай полигона с четырьмя углами
  • Circle — параметрическая фигура с радиусом

Полигон остаётся универсальной формой для произвольных областей на карте.

Оглавление