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

Question

I want to display some lines in 3d plane, just like below 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?

Answer 1

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...

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();
                }
            });
        });