GeoJSON

Общая модель работы с GeoJSON в CesiumJS

GeoJSON представляет собой стандарт обмена геопространственными данными на основе JSON. В контексте CesiumJS он используется как один из ключевых форматов для отображения векторных данных на 3D-глобусе. Поддерживаются точки, линии, полигоны, мультигеометрии, а также наборы свойств, которые могут быть использованы для стилизации и интерактивности.

CesiumJS обрабатывает GeoJSON через GeoJsonDataSource, который преобразует входные данные в набор сущностей (Entity), интегрируемых в сцену через Viewer.

Основная концепция заключается в следующем:

  • GeoJSON загружается как источник данных
  • Каждая геометрия превращается в Entity
  • Свойства GeoJSON становятся доступными через properties
  • Визуализация управляется стилями данных или индивидуальными настройками Entity

Загрузка GeoJSON через GeoJsonDataSource

Центральный механизм работы с GeoJSON — GeoJsonDataSource. Он поддерживает загрузку как локальных файлов, так и удалённых ресурсов.

const viewer = new Cesium.Viewer("cesiumContainer");

const dataSource = new Cesium.GeoJsonDataSource();

viewer.dataSources.add(
  Cesium.GeoJsonDataSource.load("data/objects.geojson")
);

При загрузке создаётся набор сущностей, автоматически добавляемых в сцену. Альтернативный подход позволяет сохранить ссылку на источник:

const dataSource = await Cesium.GeoJsonDataSource.load("data/objects.geojson");
viewer.dataSources.add(dataSource);

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

Структура преобразования GeoJSON в Entity

Каждый элемент GeoJSON трансформируется в Entity:

  • Point → PointGraphics
  • LineString → PolylineGraphics
  • Polygon → PolygonGraphics
  • MultiPolygon → набор полигонов
  • FeatureCollection → коллекция Entity

Каждый Entity получает:

  • уникальный id
  • набор графических свойств
  • привязку к координатам в 3D-пространстве
  • свойства из properties

Пример доступа к сущностям:

const entity = dataSource.entities.getById("feature-1");
console.log(entity.properties.name);

Работа с координатами и системой высот

CesiumJS использует геодезическую систему координат WGS84. GeoJSON по умолчанию также использует долготу и широту, что делает интеграцию прямолинейной.

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

  • [longitude, latitude]
  • опционально [longitude, latitude, height]

Высота может быть:

  • абсолютной (над эллипсоидом)
  • привязанной к поверхности земли

Для закрепления геометрии на поверхности применяется:

dataSource.clampToGround = true;

Это особенно важно для линий и полигонов, которые должны повторять рельеф.

Стилизация GeoJSON через Color и Properties

GeoJSON свойства могут использоваться для динамической стилизации объектов.

Пример условного окрашивания:

dataSource.entities.values.forEach(entity => {
  if (entity.properties.type === "park") {
    entity.polygon.material = Cesium.Color.GREEN.withAlpha(0.5);
  } else if (entity.properties.type === "water") {
    entity.polygon.material = Cesium.Color.BLUE.withAlpha(0.5);
  }
});

Также возможно использование ColorProperty:

entity.point.color = new Cesium.Color(1.0, 0.0, 0.0, 1.0);

Применение CallbackProperty для динамики

CesiumJS позволяет изменять визуальные параметры в реальном времени через CallbackProperty.

entity.polygon.material = new Cesium.ColorMaterialProperty(
  new Cesium.CallbackProperty(() => {
    return Cesium.Color.fromRandom();
  }, false)
);

Такая конструкция применяется для:

  • анимации объектов
  • изменения состояния данных
  • визуализации потоков

Экструзия полигонов и 3D-эффекты

GeoJSON-полигоны могут быть преобразованы в объёмные объекты:

entity.polygon.extrudedHeight = 500;
entity.polygon.material = Cesium.Color.ORANGE.withAlpha(0.7);

Экструзия используется для:

  • отображения зданий
  • визуализации плотности данных
  • создания тематических карт

Дополнительно:

entity.polygon.outline = true;
entity.polygon.outlineColor = Cesium.Color.BLACK;

Оптимизация производительности при работе с GeoJSON

При больших объёмах данных важно учитывать особенности рендеринга:

  1. Использование clampToGround только при необходимости
  2. Упрощение геометрии до загрузки
  3. Разделение GeoJSON на тайлы
  4. Использование asynchronous processing

CesiumJS автоматически оптимизирует часть операций, но сложные полигоны могут существенно влиять на FPS.

События и взаимодействие с объектами GeoJSON

GeoJSON-объекты в CesiumJS поддерживают интерактивность через picking:

const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

handler.setInputAction(movement => {
  const picked = viewer.scene.pick(movement.position);
  if (Cesium.defined(picked)) {
    console.log(picked.id.properties);
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

Это позволяет:

  • получать свойства объектов
  • изменять их стиль
  • связывать с UI логикой

Фильтрация и управление видимостью

Элементы GeoJSON можно скрывать или фильтровать на основе свойств:

dataSource.entities.values.forEach(entity => {
  entity.show = entity.properties.population > 10000;
});

Также можно использовать масштабную зависимость:

entity.billboard.scaleByDistance = new Cesium.NearFarScalar(
  1000,
  1.0,
  500000,
  0.1
);

Асинхронная загрузка и потоковая обработка

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

Cesium.GeoJsonDataSource.load("large.geojson", {
  clampToGround: true
}).then(ds => {
  viewer.dataSources.add(ds);
});

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

Интеграция с другими источниками данных CesiumJS

GeoJSON часто комбинируется с:

  • CZML для временных данных
  • 3D Tiles для объёмных моделей
  • KML для совместимости с GIS-системами

Пример совместного использования:

viewer.dataSources.add(
  Cesium.KmlDataSource.load("data.kml")
);

viewer.dataSources.add(
  Cesium.GeoJsonDataSource.load("data.geojson")
);

Это создаёт многослойную модель представления данных.

Преобразование и предварительная обработка GeoJSON

Перед загрузкой в CesiumJS часто выполняется подготовка данных:

  • упрощение геометрии (Douglas-Peucker)
  • нормализация координат
  • разделение FeatureCollection
  • добавление свойств для стилизации

Оптимизированный GeoJSON снижает нагрузку на рендеринг и ускоряет инициализацию сцены.

Ограничения и особенности формата в CesiumJS

GeoJSON в CesiumJS имеет ряд ограничений:

  • отсутствует поддержка сложных 3D-моделей
  • ограниченная работа с временными рядами
  • возможные проблемы с очень большими файлами
  • упрощённая модель атрибутов по сравнению с GIS-системами

Несмотря на это, формат остаётся базовым инструментом для 2D/3D-векторной визуализации на глобусе.

Работа с пользовательскими свойствами

GeoJSON properties полностью сохраняются в Entity и доступны для логики приложения:

const value = entity.properties.getValue().population;

Эти данные могут использоваться для:

  • тематической визуализации
  • аналитических расчётов
  • построения интерфейсов

Декларативная стилизация через DataSource

CesiumJS поддерживает декларативные стили:

dataSource.entities.suspendEvents = true;

dataSource.entities.values.forEach(entity => {
  entity.polygon.material = Cesium.Color.YELLOW;
});

dataSource.entities.resumeEvents();

Такой подход снижает количество перерисовок сцены при массовых изменениях.

Использование GeoJSON в аналитических задачах

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

  • оценка плотности объектов
  • визуализация границ территорий
  • анализ распределения точек
  • построение зон влияния

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

Оглавление