Here is the code.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
<script src="https://unpkg.com/@loaders.gl/3d-tiles@^2.3.0/dist/dist.min.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet"></link>
<style>
#cesiumContainer { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0;
overflow: hidden; padding: 0; font-family: sans-serif; }
html { height: 100%; }
body { padding: 0; margin: 0; overflow: hidden; height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new maplibregl.Map({
container: document.body,
style: 'https://optgeo.github.io/optbv-intl/optbv-intl-dev.json',
hash: true,
attributionControl: false
})
const searchParams = new URLSearchParams(window.location.search)
let url = searchParams.get('tileset') || 'https://d21pj9gigeop84.cloudfront.net/data/point-cloud/lp-2022/22302_kawazu-cho/tileset.json'
map.on('load', () => {
const { MapboxLayer, Tile3DLayer } = deck
const layer = new MapboxLayer({
id: '3d',
type: Tile3DLayer,
pointSize: 1.6,
data: url,
loader: Tiles3DLoader
})
map.addLayer(layer)
})
</script>
</body>
</html>
Top comments (0)