Свои данные
Здания и рельеф
Здания карты и поверхность земли из модели высот решают разные задачи.
Здания карты
Объёмные здания начинают загружаться с масштаба 16. Наклон камеры показывает высоту и фасады. Для общего плана оставляйте меньший масштаб.
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) {
map.jumpTo({
center: [71.43045, 51.12829],
zoom: 16.5,
pitch: 48,
bearing: -25,
});
}
map.once("load", async () => {
const cleanup = await setupExample(map, sdk);
if (cleanup) map.once("remove", cleanup);
});
Поверхность из DEM
DEM — сетка высот в метрах. setTerrain укладывает подложку на эту поверхность. Камера учитывает высоту в своём центре, чтобы при приближении не уходить под землю.
exaggeration=1 сохраняет исходные высоты. Покрытие ограничено bounds файла; за его пределами высота не задана.
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 dem = await sdk.loadGeoTIFF(
"https://developer.umap.kz/examples/almaty-dem.tif",
{
maxSize: 256,
band: 0,
},
);
map.setTerrain(dem, { exaggeration: 1 });
map.jumpTo({ center: [77.13, 43.2], zoom: 11, pitch: 50, bearing: 180 });
return () => {
map.setTerrain(null);
};
}
map.once("load", async () => {
const cleanup = await setupExample(map, sdk);
if (cleanup) map.once("remove", cleanup);
});