coloring lidar
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment