deck.gl + react-map-gl不会呈现CompositeLayer

Question

我正在尝试从https://uber.github.io/deck.gl/#/documentation/developer-guide/writing-custom-layers/composite-layers文档中实现完全相同的示例，但是不会呈现。所以，再次，我需要您的帮助真棒社区：-）

这是我的Composite组件：

import { CompositeLayer, ScatterplotLayer } from 'deck.gl';

export default class ScatterplotLayerWithOutline extends CompositeLayer {
    renderLayers() {
        const { updateTriggers } = this.props;

        return [
            new ScatterplotLayer({
                ...this.props,
                id: 'fill',
                getColor: this.props.getFillColor,
                outline: false,
                updateTriggers: {
                    ...updateTriggers,
                    getColor: updateTriggers.getFillColor,
                },
            }),
            new ScatterplotLayer({
                ...this.props,
                id: 'outline',
                getColor: this.props.getStrokeColor,
                outline: true,
                updateTriggers: {
                    ...updateTriggers,
                    getColor: updateTriggers.getStrokeColor,
                },
            }),
        ];
    }
}

ScatterplotLayerWithOutline.layerName = 'ScatterplotLayerWithOutline';

ScatterplotLayerWithOutline.defaultProps = {
    ...ScatterplotLayer.defaultProps,
    getFillColor: d => [255, 255, 0],
    getStrokeColor: d => [255, 140, 0]
}

这是Map.jsx，用于渲染具有所有图层的地图：

import React, { Component } from 'react';
import MapGL, { NavigationControl, Marker } from 'react-map-gl';
import DeckGL, { LineLayer } from 'deck.gl';

import ScatterplotLayerWithOutline from './ScatterplotLayerWithOutline';
import MarkerSvg from './MarkerSvg';

import 'mapbox-gl/dist/mapbox-gl.css';

const sourcePosition = [-71.0589, 42.3601];
const targetPosition = [-74.4589, 43.4601];

export default class Map extends Component {
    state = {
        viewport: {
            mapboxApiAccessToken: 'pk.eyJ1IjoiZGlzY29tYXJyYSIsImEiOiJjaml1M3BoN3oxeWd2M3Z0OXlwajc3Y2gxIn0.JSSzF0Yr3oXm5UcNg6p-rA',
            width: 1000,
            height: 800,
            latitude: 42.3601,
            longitude: -71.0589,
            zoom: 6,
            attributionControl: false,
        },
    };

    render() {
        return (
            <div className="map">
                <MapGL
                    {...this.state.viewport}
                    onViewportChange={viewport => this.setState({ viewport })}
                >
                    <div style={{ position: 'absolute', left: 10, top: 10 }}>
                        <NavigationControl onViewportChange={viewport => this.setState({ viewport })} />
                    </div>
                    <Marker latitude={sourcePosition[1]} longitude={sourcePosition[0]} offsetLeft={-25} offsetTop={-50}>
                        <MarkerSvg color="green"/>
                    </Marker>
                    <Marker latitude={targetPosition[1]} longitude={targetPosition[0]} offsetLeft={-25} offsetTop={-50}>
                        <MarkerSvg color="red"/>
                    </Marker>
                    <DeckGL {...this.state.viewport}>
                        <LineLayer
                            id="lineLayer"
                            getStrokeWidth={12}
                            getColor={[120, 120, 240]}
                            opacity={0.2}
                            data={[
                                {
                                    sourcePosition,
                                    targetPosition,
                                }
                            ]}
                        />
                        <ScatterplotLayerWithOutline
                            id="sourceAreaLayer"
                            data={[
                                {
                                    coordinates: sourcePosition,
                                }
                            ]}
                            strokeWidth={2}
                            opacity={0.5}
                            radiusScale={1}
                            radiusMinPixels={1}
                            getPosition={d => d.coordinates}
                            getRadius={100000}
                            getFillColor={[255, 140, 0]}
                            getStrokeColor={[2, 100, 100]}
                        />
                    </DeckGL>
                </MapGL>
            </div>
        );
    }
}

我这里缺少什么吗？关于如何实际显示CompositeLayer的任何想法？