如何在Deck.gl/react-map-gl

Question

因此，我目前正在Deck.gl和React上工作，我需要加载一个geojson文件，该文件具有一个名为“ floors”或其他类似名称的属性，可以指示建筑物的楼层数。

有没有办法将水平交替的地板稍微挤出一点，使其看起来像该图像中某些建筑物的地板边缘（尽管大多数建筑物的顶部变薄）。我尝试搜索deck.gl，但是没有这样的东西。我抬头看了一下，发现MapBox-gl-js有一个称为“挤压基础高度”的东西，它可以让您在另一个之上添加多边形，但是没有诸如水平拉伸以使一层变薄然后再回到原始大小的事情。每当新的地板开始时，这都会给与优势。

我已经对deck.gl的文档进行了搜索，但是在水平拉伸或以其他方式改变多边形的面积/尺寸时找不到任何东西，因此我可以在同一位置绘制多个尺寸的多边形。

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

我想做的事。

1. 红色多边形倾斜。需要使其方向与绿色方向相同，并同时缩小其面积。

2. 将红色多边形的底部移至绿色多边形的顶部。

我正在使用的测试数据如下

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
    }

    ];

编辑：-我认为正确的方法是将经度/纬度转换为笛卡尔坐标，将矢量转换到多边形的4个角，然后将矢量平移到偏移量向中心的方向，然后再转换回去。但这仅适用于四边形/矩形多边形，对于由多个四边形组成的建筑物，我需要另一种方法。

Answer 1

如果我的理解正确，那么您的问题归结为：给定多边形（建筑物下部的脚印），生成一个稍小的版本的同一多边形，居中。

幸运的是，使用Turf的transformScale方法确实很容易。

所以您的步骤将是：

1. 将多边形数据转换为GeoJSON。 （我假设您有某种方法可以执行，以便首先在Mapbox-GL-JS中显示它。）
2. 使用turf.transformScale(base, 0.9)
生成较小的多边形
3. 使用map.addSource添加新的多边形
4. 使用map.addLayer显示新的多边形，并根据需要设置拉伸基准高度等。