地图上没有显示六边形项目，相机地图没有旋转

如何解决地图上没有显示六边形项目，相机地图没有旋转

我尝试使用 React 将数据显示到六边形热图视图中，react-map-gl 用于地图层，deck.gl 用于数据层。这是示例 https://deck.gl/examples/hexagon-layer/。

此外，我尝试旋转相机地图以及像 https://docs.mapbox.com/mapbox-gl-js/example/animate-camera-around-point/ 这样的点。

根据此处的文档 https://deck.gl/docs/api-reference/aggregation-layers/hexagon-layer#elevationaggregation，我已经将 getPosition 和 getElevationValue 用于 HexagonLayer 组件，但六边形项目未显示在地图上如下面的屏幕截图所示。
根据 http://visgl.github.io/react-map-gl/docs/advanced/viewport-transition 处的文档，我还尝试使用 transitionDuration、transitionInterpolator 和 LinearInterpolator 旋转相机地图，但相机地图仍然没有不旋转。

浏览器控制台中没有错误或警告。

示例数据：

[
    {
        "id": 5226,"lat": -6.107405,"lng": 106.777575,"speed": 9,},...
]

代码：

import React,{ useState } from 'react'
import ReactMapGL,{ LinearInterpolator } from 'react-map-gl'
import {AmbientLight,PointLight,LightingEffect} from '@deck.gl/core'
import {HexagonLayer} from '@deck.gl/aggregation-layers'
import DeckGL from '@deck.gl/react'
import { rowList } from './formatSampleData'

const MAPBox_TOKEN = ''

const ambientLight = new AmbientLight({
    color: [255,255,255],intensity: 1.0
})

const pointLight1 = new PointLight({
    color: [255,intensity: 0.8,position: [-0.144528,49.739968,80000]
})

const pointLight2 = new PointLight({
    color: [255,position: [-3.807751,54.104682,8000]
})

const lightingEffect = new LightingEffect({ambientLight,pointLight1,pointLight2})

const material = {
    ambient: 0.64,diffuse: 0.6,shininess: 32,specularColor: [51,51,51]
}

const INITIAL_VIEW_STATE = {
    latitude: -6.2088,longitude: 106.8456,zoom: 5,pitch: 40.5,bearing: -27
}

const MAP_STYLE = 'mapBox://styles/mapBox/dark-v9'

export const colorRange = [
  [1,152,189],[73,227,206],[216,254,181],[254,237,177],173,84],[209,55,78]
]

function getTooltip({object}) {
    if (!object) {
        return null
    }
    const lat = object.position[1]
    const lng = object.position[0]
    const count = object.points.length

    return `\
        latitude: ${Number.isFinite(lat) ? lat.toFixed(6) : ''}
        longitude: ${Number.isFinite(lng) ? lng.toFixed(6) : ''}
        ${count} Accidents`
}

export default function HexagonalHeatmap2({
    radius = 1000,upperpercentile = 100,coverage = 1
}) {
    const [viewport,setViewport] = useState({
        latitude: -6.2088,width: '100vw',height: '100vh',bearing: -27
    })
    
    const layers = [
        new HexagonLayer({
            id: 'heatmap',colorRange,coverage,rowList,elevationRange: [0,3000],elevationScale: rowList && rowList.length ? 50 : 0,extruded: true,getPosition: item => [item['lat'],item['lng']],getElevationValue: item => item['speed'],pickable: true,radius,upperpercentile,material,transitions: {
                elevationScale: 3000
            }
        })
    ]

    return (
        <DeckGL
            layers={layers}
            effects={[lightingEffect]}
            initialViewState={INITIAL_VIEW_STATE}
            controller={true}
            // getTooltip={getTooltip}
        >
            <ReactMapGL
                {...viewport}
                mapBoxApiAccesstoken={MAPBox_TOKEN}
                mapStyle={MAP_STYLE}
                onViewportChange={viewport => {
                    setViewport(viewport)
                }}
                transitionDuration={10000}
                transitionInterpolator={new LinearInterpolator([{ around: [-6.2088,106.8456]}])}
            />
        </DeckGL>
    )
}

我从这个文档中看到 https://deck.gl/docs/api-reference/aggregation-layers/hexagon-layer#elevationaggregation 经纬度被交换了。因此，我尝试将 getPosition 值的 lat 和 long 交换到此

getPosition: item => [item['lng'],item['lat']],

但仍然没有在地图上显示六边形项目。

代码有什么问题或遗漏了什么？