如何在 Deck 中显示建筑楼层。gl/react-map-gl

Question

所以我目前正在研究 Deck.gl 和 React，我需要加载一个 geojson 文件，该文件有一个名为 "floors" 的附加属性或类似的东西，它告诉有多少楼层大楼有。

有没有什么方法可以水平挤出一点点交替的地板，使其看起来像这张图片中的一些建筑物的地板边缘（尽管它们中的大多数只是在顶部变得更薄）。我尝试搜索 deck.gl 但没有这样的东西。我抬头发现 MapBox-gl-js 有一个叫做 extrusion-base-height 的东西，它可以让你在另一个多边形之上添加多边形，但是没有水平挤压使 1 层更薄然后恢复到原始大小这样的东西。每当新楼层开始时，这都会让步。

我已经搜索了 deck.gl 的文档，但找不到任何关于水平拉伸或从另一种意义上改变多边形 area/size 的内容，以便我可以在同一位置绘制多个大小的多边形.

我正在尝试的另一张清晰图片

我想做的事情。

红色多边形是倾斜的。需要让它的朝向和绿色的一样，同时缩小面积。
将红色多边形底部移动到绿色多边形的顶部。

我使用的测试数据如下，

var offset = 0.00001;
    var data = [{
        polygon: [
                    [-77.014904,38.816248],
                    [-77.014842,38.816395],
                    [-77.015056,38.816449],
                    [-77.015117,38.816302],
                    [-77.014904,38.816248]                      
                ],
        height: 30
    },
    {
        polygon: [
                    [-77.014904 + offset ,38.816248],
                    [-77.014842 - offset, 38.816395 - offset],
                    [-77.015056 - offset, 38.816449 - offset],
                    [-77.015117 + offset, 38.816302],
                    [-77.014904 + offset, 38.816248]
                ],          
        height: 40
    }

    ];

编辑：- 我认为正确的方法是将 longitude/latitude 转换为笛卡尔坐标，将向量获取到多边形的 4 个角，将向量按偏移量向中心移动，然后转换背部。但这只适用于 quad/rectangle 多边形，对于由多个四边形组成的建筑物，我需要另一种方法。

Answer 1

如果我没理解错的话，你的问题可以归结为：给定一个多边形（建筑物下部的足迹），生成同一个多边形的略小版本，以它为中心。

幸运的是，使用 Turf 的 transformScale 方法非常简单。

所以你的步骤是：

将多边形数据转换为 GeoJSON。（我假设你有一些机制要做，以便首先在 Mapbox-GL-JS 中显示它。）
使用 turf.transformScale(base, 0.9)
添加新多边形 map.addSource
用map.addLayer显示新的多边形，根据需要设置挤压基础高度等。

如何在 Deck 中显示建筑楼层。gl/react-map-gl

How to show building floors in Deck.gl/react-map-gl

mapbox-gl-js

deck.gl

react-map-gl