How to use MapLibre GL JS with 3D Tiles (pnts)

#javascript #smartmaps #maplibre

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>