Reputation: 468

Mapbox GL JS - How to add a point cloud layer

I have point cloud data which I would like to render on Mapbox gl js. I've found an example here that uses the deck gl tool to achieve this:

    <html>
    <head>
      <title>Deckgl RGB PointCloud + Mapbox</title>
      <script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>
      <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js"></script>
      <link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css">
      <style>
        body {
          background-color: #000000;
          margin: 0;
        }
        #map {
          height: 100vh;
          width: 100%;
          margin: 0 auto;
        }
      </style>
    </head>

    <body>
    <div id="map"></div>
    </body>
    <script type="text/javascript">

      const { MapboxLayer, PointCloudLayer } = deck;
    //REPLACE WITH YOUR MAPBOX ACCESS TOKEN
      mapboxgl.accessToken = 'your token here';

      const map = new mapboxgl.Map({
        container: 'map',
    //REPLACE THIS WITH THE MAPBOX STYLE URL OF YOUR CHOICE   
        style: 'mapbox://styles/allanwalker/cjpn18pta036u2roe5ootbwwp?fresh=true',
        center: [-122.476622, 37.817516],
        zoom: 15.40,
        bearing: -34.40,
        pitch: 60
      });

      map.on('style.load', () => {
        map.addLayer(new MapboxLayer({
          id: 'deckgl-PointCloudLayer',
          type: PointCloudLayer,
    //REPLACE THIS WITH THE URL OF THE FILE
          data: 'array.json',
          getPosition: d => [d[0], d[1], d[2]],
          getColor: d => [d[3], d[4], d[5]],
          sizeUnits: 'meters',
          pointSize: 0.75,
          opacity: 1
        }));
      });

    </script>
    </html>

but the problem with this example is that the imported data are in json format (code found in this article. Scroll to bottom to see the end result).

The data I have however are in .ply and .tif format.

My question is, using the given example, how could I import my data, either in .ply or .tif format?

Upvotes: 2