Reactjs Deck.GL ScatterplotLayer不渲染圆半径

我试着在地图上画一个圆圈（中间有一个标记）。然而，我的地图上什么也没有出现。我尝试了各种ScatterplotLayer选项并尝试了切换位置，还尝试了getPosition:（d）=>[d.坐标[0]，d.坐标[1]]等。但我的地图上没有显示任何内容

import React, { useState, useEffect, createRef } from 'react';
import MapGL, { Marker, NavigationControl, FlyToInterpolator } from "react-map-gl";
import firebase from '@services/firebase';
import DeckGL, { GeoJsonLayer, MapController, ScatterplotLayer } from "deck.gl";

// import DeckGL from '@deck.gl/react';
// import { ScatterplotLayer } from '@deck.gl/layers';

import { Avatar } from "antd";

function Map({ charities }) {

    const initViewport = {
        width: "100vw",
        height: "100vh",
        latitude: 41.5868,
        longitude: -93.625,
        zoom: 2,
    };

    const [viewport, setViewport] = useState(initViewport);

    function resize() {
        setViewport({
            ...viewport,
            width: window.innerWidth,
            height: window.innerHeight
        });
    }

    function flyTo(latitude, longitude) {
        setViewport({
            ...viewport,
            zoom: 13,
            latitude,
            longitude,
            transitionInterpolator: new FlyToInterpolator(),
            transitionDuration: 3000,
        });
    }

    useEffect(() => {
        window.addEventListener("resize", resize);
        return () => window.removeEventListener("resize", resize);
    }, []);

    const layer = new ScatterplotLayer({
        id: "scatterplot-layer",
        data: [
            {
                name: "Colma (COLM)",
                code: "CM",
                address: "365 D Street, Colma CA 94014",
                exits: 100000000,
                coordinates: [60.8938364, 9.7150779],
            },
        ],
        pickable: true,
        opacity: 0.8,
        stroked: true,
        filled: true,
        radiusScale: 6,
        radiusMinPixels: 1,
        radiusMaxPixels: 100,
        lineWidthMinPixels: 1,
        getPosition: (d) => d.coordinates,
        getRadius: (d) => Math.sqrt(d.exits),
        getFillColor: (d) => [255, 140, 0],
        getLineColor: (d) => [0, 0, 0],
        onHover: ({ object, x, y }) => {
            const tooltip = `${object.name}\n${object.address}`;
        },
    });

    return (
        <MapGL
            preventStyleDiffing={true}
            reuseMaps
            mapStyle='mapbox://styles/mapbox/streets-v9'
            mapboxApiAccessToken='MAPBOX_TOKEN'
            onViewportChange={(viewport) => setViewport(viewport)}
            {...viewport}
        >
            <DeckGL
                width='100%'
                height='100%'
                {...viewport}
                debug
                layers={[layer]}
            />
        </MapGL>
    );
}

export default Map;

import React，{useState，useffect，createRef}来自'React'；
从“react map gl”导入MapGL、{Marker、NavigationControl、FlyToInterpolator}；
从“@services/firebase”导入firebase；
从“deck.gl”导入DeckGL，{GeoJsonLayer，MapController，ScatterplotLayer}；
//从“@deck.gl/react”导入DeckGL；
//从'@deck.gl/layers'导入{ScatterplotLayer}；
从“antd”导入{Avatar}；
函数映射（{charities}）{
常量初始化视口={
宽度：“100vw”，
高度：“100vh”，
纬度：41.5868，
经度：-93.625，
缩放：2，
};
const[viewport，setViewport]=useState（initViewport）；
函数resize（）{
设置视口({
…视口，
宽度：window.innerWidth，
高度：window.innerHeight
});
}
函数flyTo（纬度、经度）{
设置视口({
…视口，
缩放：13，
纬度，
经度，
transitionInterpolator:new FlyToInterpolator（），
过渡期：3000年，
});
}
useffect（（）=>{
addEventListener（“调整大小”，调整大小）；
return（）=>window.removeEventListener（“resize”，resize）；
}, []);
常数层=新散射图层({
id:“散点图层”，
数据：[
{
名称：“Colma（COLM）”，
代码：“CM”，
地址：“加利福尼亚州科尔马市D街365号，邮编94014”，
出口：100000000，
座标：[60.8938364,9.7150779]，
},
],
pickable:是的，
不透明度：0.8，
是的，
是的，
半径刻度：6，
半径最小像素：1，
radiusMaxPixels:100，
线宽最小像素：1，
getPosition：（d）=>d坐标，
getRadius：（d）=>Math.sqrt（d.exits），
getFillColor:（d）=>[255,140,0]，
getLineColor:（d）=>[0,0,0]，
onHover:（{object，x，y}）=>{
常量工具提示=`${object.name}\n${object.address}`；
},
});
返回(
setViewport（视口）}
{…视口}
>
);
}
导出默认地图；

问题在于您没有在DeckGL组件中设置viewState。您的代码引发以下错误：

view manager.js:232数据组：缺少

viewState

或

initialViewState

试着改变

...
<DeckGL
  width='100%'
  height='100%'
  {..viewport}
  debug
  layers={[layer]}
/>
...

。。。
...

对下列事项：

...
<DeckGL
  width='100%'
  height='100%'
  viewState={viewport}
  debug
  layers={[layer]}
/>
...

。。。
...

---

希望这有帮助

你说得对！我怎么会错过呢。非常感谢你！当你在这里的时候。我想知道，您是否在react中遇到贴图盒贴图渲染滞后/缓慢的问题？我在他们的Mapbox GL JS上尝试了他们的示例地图，它比react更快捷。使用StaticMap组件应该会得到更好的结果。