来自react-leaflet的GeoJSON不会在地图上渲染图层

Question

我有一个运行在我的localhost上的GeoServer，我也有一个反应应用程序，它使用一个WFS服务来获得一个GeoJSON数据，在地图上呈现为一个层。

这些是我对package.json的依赖项

"axios": "^0.19.0",
"leaflet": "^1.5.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-leaflet": "^2.4.0",
"react-scripts": "3.0.1"

这是我的react应用程序中的HomePage.js

// @packages
import React, { PureComponent } from 'react';
import axios from 'axios';

import {
    GeoJSON,
    Map,
    TileLayer
} from 'react-leaflet';

// @constants
const GEOSERVER = 'http://localhost:8080/geoserver/wfs';

const REQUEST_PARAMS = {
    outputFormat: 'application/json',
    maxFeatures: 250,
    request: 'GetFeature',
    service: 'WFS',
    typeName: 'gaia:mining_titles',
    version: '1.0.0'
};

class HomePage extends PureComponent {
    constructor() {
        super();
        this.map = null;
        this.state = {
            center: [6.217679, -75.570648],
            data: null,
            zoom: 8
        };
        this.handleOnMapMounted = this.handleOnMapMounted.bind(this);
    }

    componentDidMount() {
        axios.get(GEOSERVER, { params: REQUEST_PARAMS })
            .then(({ data }) => this.setState({ data }))
            .catch(error => Promise.reject(error));
    }

    handleOnMapMounted(evt) {
        this.map = evt ? evt.leafletElement : null;
    }

    render() {
        const {
            center,
            data,
            zoom
        } = this.state;

        return(
            <Map
                center={center}
                id="home-page-map"
                ref={this.handleOnMapMounted}
                zoom={zoom}
            >
                <TileLayer
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                />
                <GeoJSON data={data} />
            </Map>
        )
    }
}

export default HomePage;

当调用componentDidMount时，数据设置在状态上，但不呈现任何内容，也不显示错误，只是什么都没有发生。

我已经通过GeoServer在web.xml上启用了CORS配置

Answer 1

你的问题对我让代码正常工作有很大帮助，所以试着回馈一下：

我认为您需要向GeoJSON层添加一个键，请在此处查看答案：https://stackoverflow.com/a/46593710/7392069

对于我使用的WFS，我还必须将投影添加到请求参数中，因为默认情况下使用了另一个本地EPSG代码：

srsName:'EPSG:4326'

您可能还需要添加样式，但至少在我的示例中，mapserver应用了标准样式，因此这应该是可选的：

    style = (feature) => {
      return {
        // fillColor: '',
        weight: 3,
        opacity: 1,
        color: 'red',
        dashArray: '3',
        fillOpacity: 0.0
      };
    }

和

                <GeoJSON
                    key={hash(blah)}
                    data={this.state.data}
                    style={this.style}
                />