如何在React-MapBox-GL中添加GeoJson图层

Question

首先，感谢您阅读我的问题并尝试帮助我并为我的英语道歉。

在一个react组件中我输入并输入添加文件和上传geojson文件。在我上传了URL（已启用CORS）并显示图层来创建源图层后，但是当我移动鼠标并将鼠标悬停在要素上时，该功能没有id和状态为空。但是，如果我添加一个矢量图层，我移动鼠标悬停在功能上有id和状态。

我发现信息，如果没有显示id是因为我没有正确添加geojson图层。

Info1

像这样使用map.setFeatureState（）的示例https://www.mapbox.com/mapbox-gl-js/example/hover-styles/要求用户在其geojson或矢量切片源中包含整数父id值。

Info2

state（Object）一组键值对。值应该是有效的JSON类型。此方法需要数据集上的feature.id属性。对于没有要素ID的GeoJSON源，请在GeoJSONSourceSpecification中设置generateIds选项以自动分配它们。此选项根据源数据中的要素索引分配ID。如果使用map.getSource（'some id'）。setData（..）更改要素数据，则可能需要重新应用状态，并考虑更新的id值。

REACT Mapbox Documentation

这是我的代码：

<MapBox
    style={this.props.mapStyle}
    center={this.props.viewport.center}
    zoom={this.props.viewport.mapZoom}
    pitch={this.props.viewport.pitch}
    minZoom={this.props.viewport.minZoom}
    maxZoom={this.props.viewport.maxZoom}
    onZoom={this.handleZoom}
    onMoveEnd={this.handleMove}
    onMouseMove={this.handleOnMouseMove}
    onMouseDown={this.handleOnMouseDown.bind(this)}
    onMouseUp={this.handleOnMouseUp.bind(this)}
    onStyleLoad={this.handleLoad}
    onError={this.handleError}
    containerStyle={{
       position: 'relative',
       height: '100vh',
       width: this.props.rightDrawer.visible ? 'calc(100vw - 300px)' : '100vw'
}}>

{/* Option 1 */}
{this.state.mapLoaded && this.props.mapGLlayers &&
    this.props.mapGLlayers.map((l, index) => {
        return (
            <div key={index}>                                
                {l.name && l.redraw && l.redraw === true && <Source id={"sourceId_" + l.id} tileJsonSource={l.source} onSourceLoaded={this.handleSourceLoaded} />}                                            
                {l.redraw && l.redraw === true && <Layer type={l.type} id={l.id} sourceId={l.name ? "sourceId_" + l.id : l['source'] ? l['source'] : undefined}
                    sourceLayer={l['source-layer'] ? l['source-layer'] : undefined}
                    filter={l.filter ? l.filter : undefined}
                    paint={l.paint ? l.paint : undefined}
                    layout={l.layout ? l.layout : undefined}
                    before={l.before ? l.before : undefined}
                />}
            </div>
        );
    })
}
</MapBox>



<MapBox
    style={this.props.mapStyle}
    center={this.props.viewport.center}
    zoom={this.props.viewport.mapZoom}
    pitch={this.props.viewport.pitch}
    minZoom={this.props.viewport.minZoom}
    maxZoom={this.props.viewport.maxZoom}
    onZoom={this.handleZoom}
    onMoveEnd={this.handleMove}
    onMouseMove={this.handleOnMouseMove}
    onMouseDown={this.handleOnMouseDown.bind(this)}
    onMouseUp={this.handleOnMouseUp.bind(this)}
    onStyleLoad={this.handleLoad}
    onError={this.handleError}
    containerStyle={{
       position: 'relative',
       height: '100vh',
       width: this.props.rightDrawer.visible ? 'calc(100vw - 300px)' : '100vw'
}}>

{/* Option 2 */}
{this.state.mapLoaded && this.props.mapGLlayers &&
    this.props.mapGLlayers.map((l, index) => {
        return (
            <div key={index}>  
                {   (isGeoJson) ? 
                    (l.name && l.redraw && l.redraw === true && <Source id={"sourceId_" + l.id} geoJsonSource={{ type: l.source.type, data: l.source.data}} onSourceLoaded={this.handleSourceLoaded} />) :
                    (l.name && l.redraw && l.redraw === true && <Source id={"sourceId_" + l.id} tileJsonSource={l.source} onSourceLoaded={this.handleSourceLoaded} />) 
                }                                          
                {l.redraw && l.redraw === true && <Layer type={l.type} id={l.id} sourceId={l.name ? "sourceId_" + l.id : l['source'] ? l['source'] : undefined}
                    sourceLayer={l['source-layer'] ? l['source-layer'] : undefined}
                    filter={l.filter ? l.filter : undefined}
                    paint={l.paint ? l.paint : undefined}
                    layout={l.layout ? l.layout : undefined}
                    before={l.before ? l.before : undefined}
                />}
            </div>
        );
    })
}

Answer 1

谢谢你的帮助。

我找到了解决方案。添加图层时，可以在源中添加属性，为图层的每个要素生成和标识。

generateId

可选的布尔值。默认为false。是否为geojson功能生成id。启用后，将根据features数据中的索引自动分配feature.id属性，覆盖以前的任何值。

export const generateLayerFromFile = (layer) => {
    return {
        "id": `${uniqid()}`,
        "order": Number(layer.order),
        "layer": Object.assign({}, layer),
        "name": `${layer.name}`,
        "type": `${layer.type}`,
        "source": {
            "type": String(layer.layer.source.type),
            "data": String(layer.layer.source.url),
            "generateId: true,
        },
        "paint": (layer.paint) ? JSON.parse(layer.paint) : undefined,
        "layout": (layer.layout) ? JSON.parse(layer.layout) : undefined,
        "filter": (layer.filter) ? JSON.parse(layer.filter) : undefined
    };
};