---
title: Lodapi mit CesiumJS
summary: Cesium-Viewer mit Lodapi-Buildings + Terrain in ~20 Zeilen.
---
# Lodapi mit CesiumJS
[CesiumJS](https://cesium.com/platform/cesiumjs/) ist der Mainstream-3D-Globe-Renderer für Web. Lodapi exponiert alle Buildings als 3D-Tiles-1.1-Tilesets, die Cesium nativ konsumieren kann. Das DGM1-Terrain ist ebenfalls als 3D-Tiles-Mesh verfügbar (Phase 2 beta).
## Minimal-Setup
```html
```
Speichere als `index.html`, öffne in einem Browser. Du hast LoD2-Frankfurt in einem laufenden Cesium-Viewer.
## Terrain dazu
```ts
// Terrain-Mesh-Tilesets sind separate 3D-Tilesets, KEIN Cesium-Terrain-Provider.
// Building-Z ist absolut aus dem CityGML — beide Layer liegen ohne Provider-Magic
// koordinaten-korrekt übereinander.
const r2 = await fetch("https://api.lodapi.de/v1/terrain-mesh/datasets");
const { datasets } = await r2.json();
for (const t of datasets) {
const ts = await Cesium.Cesium3DTileset.fromUrl(t.tileset_url);
viewer.scene.primitives.add(ts);
}
```
## Attribution einbinden
Lodapi liefert pro Antwort einen `lodapi.attribution[]`-Block. Cesium zeigt Credits in seiner unteren Toolbar — füge die Lodapi-Quellen hinzu:
```ts
const attrs = tilesets.length > 0 ? (await fetch(
`https://api.lodapi.de/v1/tilesets?bbox=${bbox}`
)).then(r => r.json()).then(d => d.lodapi.attribution) : [];
for (const a of attrs) {
viewer.scene.creditDisplay.addStaticCredit(
new Cesium.Credit(`${a.source} (${a.license})`, true)
);
}
```
## Building anklicken → Detail-API
Cesium-3D-Tilesets unterstützen Per-Building-Picking. Die `feature.gmlid` ist als Batch-Table-Property eingebettet und matched die Lodapi-API:
```ts
viewer.screenSpaceEventHandler.setInputAction(async (movement) => {
const f = viewer.scene.pick(movement.position);
if (f instanceof Cesium.Cesium3DTileFeature) {
const gmlid = f.getProperty("gmlid");
if (!gmlid) return;
const detail = await fetch(`https://api.lodapi.de/v1/buildings/${gmlid}`).then(r => r.json());
console.log("Building:", detail.building_id, "BL:", detail.bundesland_code, "LoD:", detail.lod);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
```
## Performance-Tipps
- **`maximumScreenSpaceError`** auf 8–16 setzen (Default 16). Niedriger = mehr Detail, mehr Memory.
- **`cullWithChildrenBounds: true`** standardmäßig, lass das.
- **`preferLeaves: false`** für initial-snap-in, danach `true` für hohes Detail.
- **Mehrere BL parallel laden**: jede `tileset_url` als eigenes `Cesium3DTileset.fromUrl(...)` — keine Sammelladung nötig.
## Voller Demo-Code
Lodapi-Repo hat einen fertigen Cesium-Viewer unter [`code/demo/api-tilesets/index.html`](../../../code/demo/api-tilesets/index.html) — der gleiche Code, aber mit BL-Switcher und Inspector-Panel.
## Stolperdrähte
- **Ion-Key nicht zwingend**, aber ohne Imagery-Provider sieht der Globus leer aus. Setze `Cesium.Ion.defaultAccessToken = "..."` für hochauflösende Sat-Karten.
- **CesiumJS ≥ 1.118** für 3D-Tiles-1.1-Support (Implicit Tiling). Lodapi-Tilesets sind 1.1.
- **CORS**: `https://api.lodapi.de` erlaubt `*.lodapi.de` und `localhost:*`. Andere Origins brauchen einen Custom-Eintrag — Issue eröffnen.