javascript - React map gl（空白有图层或没有图层的地图）

Question

我使用https://www.npmjs.com/package/react-map-gl包并从那里尝试实现这个自定义数据示例，但它似乎只在空白页面或地图上显示一个圆圈但没有圆圈。C

import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
import ReactMapGL from 'react-map-gl';
import React from 'react';
import { connect } from 'react-redux';
import { extraLayer } from 'Components/dataViewElements/Map/test.js';
import { fromJS } from 'immutable';

const MAPBOX_TOKEN =
    'pk.TOKEN_HERE';

const mapStyle = fromJS({
    version: 8,
    sources: {
        'mapbox-streets': {
            type: 'vector',
            url: 'mapbox://mapbox.mapbox-streets-v6',
        },
        points: {
            type: 'geojson',
            data: {
                type: 'FeatureCollection',
                features: [
                    {
                        type: 'Feature',
                        geometry: { type: 'Point', coordinates: [-122.45, 37.78] },
                    },
                ],
            },
        },
    },
    layers: [
        {
            id: 'my-layer',
            type: 'circle',
            source: 'points',
            paint: {
                'circle-color': '#f00',
                'circle-radius': 4,
            },
        },
    ],
});

class MapElement extends React.Component {
    state = {
        viewport: {
            width: '70vw',
            height: '70vh',
            latitude: -24.4698,
            longitude: 135.0251,
            zoom: 4,
        },
    };
    _onViewportChange = viewport => this.setState({ viewport });



    render() {
        const { viewport } = this.state;
        console.log(mapStyle);
        return (
            <ReactMapGL
                {...viewport}
                mapStyle={mapStyle}
                // mapStyle={mapStyle}
                mapboxApiAccessToken={MAPBOX_TOKEN}
                onViewportChange={this._onViewportChange}
            />
        );

    }
}

const mapStateToProps = (state, props) => ({});

const mapDispatchToProps = dispatch => ({});

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(MapElement);

非常感谢任何帮助，尝试解决这个问题几个小时，所以认为应该在这里发布。

标签： javascriptreactjsdictionarymapbox