Search code examples
reactjsmapboxreact-map-gl

How to display a line in 3s plane on map?

I want to display some lines in 3d plane, just like below image.

flight image

Currently i am using mapbox-gl-js to display map in my application.

I want to do this is mapbox-gl-js, but mapbox doesn't supports this feature. Is there any way to achive this feature in mapbox or is there any library which supports this feature?

Solution

  • If you want to mix 3D and mapbox to draw freely some 3D lines, I would recommend you to use the latest version of threebox a three.js plugin for mapbox.

    You'll able to draw different rect or curved lines with origin destination like this... enter image description here

    Once you define your line geometries, you can add them with only a few lines of code in your page:

            map.on('style.load', function() {

            map.addLayer({
                id: 'custom_layer',
                type: 'custom',
                renderingMode: '3d',
                onAdd: function(map, mbxContext){

                    tb = new Threebox(
                        map, 
                        mbxContext,
                        {defaultLights: true}
                    );

                    for (line of lines) {
                        var lineOptions = {
                            geometry: line,
                            color: (line[1][1]/180) * 0xffffff, // color based on latitude of endpoint
                            width: Math.random() + 1 // random width between 1 and 2
                        }

                        lineMesh = tb.line(lineOptions);

                        tb.add(lineMesh)
                    }

                },
                
                render: function(gl, matrix){
                        tb.update();
                }
            });
        });