Examples
3D Buildings
Stream 3D building geometry rendered by three.js via OGC 3D Tiles. The tileset loads with LOD refinement and tile-fade transitions by NASA-AMMOS 3DTilesRendererJS. Inspired by UltraGlobe rendering a 125GB Protomaps vector tile dataset in three.js.
Usage
<script setup lang="ts">
import { VMap, VControlNavigation, VControlScale } from '@geoql/v-maplibre';
import { VLayer3DTiles } from '@geoql/v-maplibre/3d-tiles';
// Peers: pnpm add three 3d-tiles-renderer \
// gaussian-splat-lite 3d-tiles-rendererjs-3dgs-plugin
const mapOptions = {
style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
center: [-75.5966, 40.0388],
zoom: 18,
pitch: 60,
bearing: -40,
maxPitch: 85,
antialias: true,
};
// Free OGC 3D Tiles 1.0 photogrammetry tileset (AGI HQ)
const tilesetUrl =
'https://pelican-public.s3.amazonaws.com/3dtiles/agi-hq/tileset.json';
</script>
<template>
<VMap :options="mapOptions" class="h-125 w-full">
<VControlNavigation position="top-right" />
<VLayer3DTiles
id="buildings"
:url="tilesetUrl"
:error-target="8"
:altitude="0"
:rotation="[90, 0, 0]"
:fade="true"
:splats="false"
@load-tileset="onLoadTileset"
/>
</VMap>
</template> Components 4
<VMap />@geoql/v-maplibre<VControlNavigation />@geoql/v-maplibre<VControlScale />@geoql/v-maplibre<VLayer3DTiles />@geoql/v-maplibre/3d-tiles
Streaming tileset…