Свои данные

Изображение на карте

Привяжите схему площадки или географический растр к координатам.

Схема мероприятия

Нужны изображение и координаты его четырёх углов: левый верхний, правый верхний, правый нижний, левый нижний. Схема в примере учебная; замените её планом своей территории.

import * as sdk from "@umap-llc/map-react";

// HTML: <div id="map" style="height:480px;position:relative"></div>
const map = sdk.createMap({
  container: "map",
  style: "YOUR_STYLE_URL",
  accessToken: "YOUR_ACCESS_TOKEN",
  center: [71.423, 51.128],
  zoom: 14,
});

async function setupExample(map, sdk, report = console.log) {
  const image = new Image();
  image.crossOrigin = "anonymous";
  image.src = "https://developer.umap.kz/examples/data/site-plan.svg";
  await image.decode();
  map.addLayer(
    new sdk.ImageLayer({
      id: "site-plan",
      image,
      coordinates: [
        [71.416, 51.093],
        [71.422, 51.093],
        [71.422, 51.09],
        [71.416, 51.09],
      ],
      opacity: 0.95,
    }),
  );
  map.fitBounds(
    [
      [71.414, 51.089],
      [71.424, 51.094],
    ],
    { padding: 45, maxZoom: 16 },
  );
  report("Учебная схема мероприятия");
}

map.once("load", async () => {
  const cleanup = await setupExample(map, sdk);
  if (cleanup) map.once("remove", cleanup);
});
Скачать SVG схемы ↗

GeoTIFF и COG

GeoTIFF хранит геопривязку внутри файла. Для JavaScript loadGeoTIFF возвращает width, height, values, bounds, crs и image. EPSG:4326 и EPSG:3857 распознаются автоматически; для другого CRS сначала перепроецируйте данные.

Для модели высот используйте setTerrain, а не изображение. Во Flutter DEM загружается через setTerrainFromGeoTIFF. maxSize в JavaScript ограничивает размер читаемой сетки.

Модель высот и рабочий пример →