Класс GeoJSON

Класс L.GeoJSON в Leaflet представляет собой специализированный слой для работы с данными формата GeoJSON и является одним из ключевых механизмов интеграции геоданных в веб-карты. Он обеспечивает преобразование структурированных географических объектов в визуальные слои карты, автоматически интерпретируя типы геометрии, свойства объектов и координаты.

GeoJSON представляет собой формат обмена географическими данными, основанный на JSON. Базовая структура включает несколько основных типов объектов:

  • Feature — географический объект с геометрией и набором свойств
  • FeatureCollection — коллекция объектов Feature
  • Геометрии: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon

Пример базового объекта:

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [37.62, 55.75]
  },
  "properties": {
    "name": "Москва"
  }
}

Класс L.GeoJSON принимает такие структуры и преобразует их в соответствующие слои карты.

Создание слоя GeoJSON

Инициализация слоя выполняется через L.geoJSON:

const geojsonLayer = L.geoJSON(data).addTo(map);

Где data — объект GeoJSON или массив объектов. При добавлении слоя на карту происходит автоматическая обработка всех Feature и создание соответствующих векторных объектов.

Обработка геометрий

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

  • Point → маркер (L.Marker)
  • LineString → линия (L.Polyline)
  • Polygon → многоугольник (L.Polygon)

Пример обработки точек:

const points = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [30.31, 59.93]
      },
      properties: {
        title: "Санкт-Петербург"
      }
    }
  ]
};

L.geoJSON(points).addTo(map);

Опция pointToLayer

По умолчанию точки отображаются как стандартные маркеры. Для изменения поведения используется pointToLayer, позволяющая заменить маркер на кастомный слой.

L.geoJSON(data, {
  pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng, {
      radius: 8,
      fillColor: "#3388ff",
      color: "#000",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.8
    });
  }
}).addTo(map);

Данный механизм используется для стилизации точечных данных и создания тематических карт.

Опция style

Для геометрий типа LineString и Polygon применяется функция style, задающая визуальные параметры.

L.geoJSON(data, {
  style: function (feature) {
    return {
      color: "#ff7800",
      weight: 3,
      opacity: 0.7
    };
  }
}).addTo(map);

Параметр feature позволяет изменять стиль в зависимости от свойств объекта.

Обработка событий через onEachFeature

Функция onEachFeature позволяет привязывать обработчики событий и всплывающие окна к каждому объекту.

L.geoJSON(data, {
  onEachFeature: function (feature, layer) {
    if (feature.properties && feature.properties.name) {
      layer.bindPopup(feature.properties.name);
    }

    layer.on("click", function () {
      console.log(feature.properties);
    });
  }
}).addTo(map);

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

Фильтрация объектов через filter

Опция filter позволяет ограничивать набор отображаемых объектов.

L.geoJSON(data, {
  filter: function (feature) {
    return feature.properties.population > 1000000;
  }
}).addTo(map);

Функция возвращает булево значение, определяющее включение объекта в слой.

Методы слоя GeoJSON

addData

Позволяет динамически добавлять новые объекты:

geojsonLayer.addData(newFeature);

Поддерживает как Feature, так и FeatureCollection.

clearLayers

Удаляет все ранее добавленные объекты:

geojsonLayer.clearLayers();

Используется при полной перезагрузке данных.

getBounds

Возвращает границы всех объектов слоя:

const bounds = geojsonLayer.getBounds();
map.fitBounds(bounds);

Взаимодействие с событиями карты

GeoJSON-слои интегрируются с системой событий карты Leaflet. Каждый объект поддерживает стандартные события:

  • click
  • mouseover
  • mouseout
  • dblclick
L.geoJSON(data, {
  onEachFeature: function (feature, layer) {
    layer.on({
      mouseover: function () {
        layer.setStyle({ color: "red" });
      },
      mouseout: function () {
        layer.setStyle({ color: "blue" });
      }
    });
  }
}).addTo(map);

Работа с вложенными структурами

GeoJSON поддерживает сложные структуры, включая FeatureCollection с различными типами геометрий. L.GeoJSON рекурсивно обходит структуру и создаёт соответствующие слои.

При обработке Multi-геометрий (например, MultiPolygon) создаётся набор вложенных слоёв, объединённых в один логический объект.

Производительность при больших наборах данных

При работе с тысячами объектов возникают ограничения производительности, связанные с DOM и SVG/Canvas рендерингом. Основные подходы оптимизации:

  • использование filter для уменьшения количества объектов
  • применение кластеризации маркеров (через плагины Leaflet)
  • упрощение геометрий (simplification)
  • переход на Canvas-рендеринг вместо SVG
L.geoJSON(largeDataset, {
  renderer: L.canvas()
}).addTo(map);

Обновление данных слоя

Для обновления данных обычно применяется комбинация методов:

geojsonLayer.clearLayers();
geojsonLayer.addData(updatedData);

Такой подход обеспечивает полную замену содержимого слоя без пересоздания объекта карты.

Вложенные свойства и доступ к атрибутам

Свойства объектов доступны через feature.properties. Эти данные не влияют на геометрию, но активно используются для визуализации и логики:

L.geoJSON(data, {
  onEachFeature: function (feature, layer) {
    const props = feature.properties;
    layer.bindPopup(
      "Название: " + props.name + "<br>" +
      "Тип: " + props.type
    );
  }
});

Комбинирование с другими слоями Leaflet

GeoJSON-слои могут использоваться совместно с другими слоями:

  • тайловыми слоями (L.tileLayer)
  • векторными слоями
  • группами слоёв (L.layerGroup)
const base = L.tileLayer(urlTemplate);

const overlay = L.geoJSON(data);

L.layerGroup([base, overlay]).addTo(map);

Преобразование координат

Leaflet ожидает координаты в порядке [longitude, latitude], что соответствует спецификации GeoJSON. При нарушении порядка объекты отображаются некорректно, что особенно критично при работе с внешними API.

Расширяемость через пользовательские функции

L.GeoJSON поддерживает глубокую кастомизацию через функции:

  • pointToLayer
  • style
  • onEachFeature
  • coordsToLatLng (переопределение преобразования координат)
L.geoJSON(data, {
  coordsToLatLng: function (coords) {
    return new L.LatLng(coords[1], coords[0]);
  }
}).addTo(map);

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

Оглавление