Картография 3D
в реальном времени
для React

• 

  12 700 km От глобуса к плоской карте запасной эллипсоид, умная кластеризация

• 

  9 km Маркеры и кластеры переиспользуемые DOM-узлы, разделённые по категориям

• 

  3 km Линия горизонта маркеры сохраняют экранный размер при любом наклоне

• 

  900 m Координатная сетка ложится на рельеф, толщина линии на экране постоянна

• 

  1,7 m Пешеходный режим высота глаз, гравитация, столкновения

• Фотореалистичное 3D, плоское 2D cesiumIonToken Google Photorealistic 3D Tiles через Cesium Ion, эллипсоидный глобус без токена и двумерная базовая карта от Google или с вашего сервера XYZ.
• DOM-маркеры и кластеры markersLayer() Настоящие DOM-узлы с нативными hover, фокусом и CSS-анимацией. Переиспользуются и записываются одним проходом translate3d; движущийся объект скользит, а не пересоздаётся.
• Редактор рисования draw Рамочное и лассо-выделение, маркеры изменения размера и поворота, стили по инструменту, отмена и повтор, GeoJSON на входе и на выходе.
• Живые данные по области просмотра useLiveData() Подгрузка по ограничивающему прямоугольнику при движении камеры плюс обновления в реальном времени.
• Символика MIL-STD-2525D динамический импорт SDK символики на 9 МБ загружается по требованию — он никогда не попадает в сборку, где символы не отображаются.
• Типизированные тема и подписи theme · labels Светлая и тёмная, prefers-reduced-motion соблюдается, всё переводимо. Ни одной строки и ни одного значения, зашитых в код.

• 

  Рисование и выделениемаркеры изменения размера и поворота, живая панель выделения, отмена и повтор

• 

  Палитра MIL-STD-2525Dсвой, противник, нейтральный, неизвестный — SDK загружается по требованию

• 

  Каталог и источникивключаете источник, приходят 252 точки, и кластеры перестраиваются

• 

  Светлая темаодна настройка — за ней следует весь интерфейс, включая карту

import { Map, markersLayer, type MarkerData } from '@pasquelin/map3d'

type Alert = { title: string }

const alerts: MarkerData<Alert>[] = [
  { id: 1, type: 'critical', position: { lat: 48.8566, lng: 2.3522 }, title: 'Intrusion', data: { title: 'Intrusion' } },
  { id: 2, type: 'info', position: { lat: 48.8606, lng: 2.3376 }, title: 'Patrol', data: { title: 'Patrol' } },
]

export function App() {
  return (
    <div style={{ height: '100vh' }}>
      <Map
        center={{ lat: 48.8566, lng: 2.3522 }}
        zoom={13}
        layers={[markersLayer<Alert>({ points: alerts, cluster: { enabled: true } })]}
      />
    </div>
  )
}

Дополнительные плагины — IGN Géoplateforme, Windy, планы помещений — живут в отдельном репозитории, а свой можно написать через API плагинов.