Deck.GL ScatterplotLayer 不渲染圆半径

Question

我正在尝试在地图上画一个圆圈（中心会有一个标记）。但是，我的地图上什么也没有出现。我尝试了各种 ScatterplotLayer 选项并尝试切换位置，还尝试了 getPosition: (d) => [d.coordinates[0], d.coordinates[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;

Answer 1

问题是您没有在 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]}
/>
...

希望这会有所帮助！