如何在地图上显示 3s 平面中的一条线？

Question

我想在 3d 平面中显示一些线，如下图所示。

目前我正在使用 mapbox-gl-js 在我的应用程序中显示地图。

我想做的是mapbox-gl-js，但是mapbox不支持这个功能。有什么方法可以在 mapbox 中实现此功能，或者是否有支持此功能的库？

Answer 1

如果您想混合使用 3D 和 mapbox 自由绘制一些 3D 线条，我建议您使用最新版本的 threebox 一个 three.js mapbox 插件。

您将可以像这样绘制带有起点和终点的不同的矩形或曲线...

定义线条几何形状后，只需在页面中添加几行代码即可添加它们：

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