Question

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

我在React组件中输入了添加文件并上传geojson文件的位置。在创建带有已上传网址的源图层（启用了CORS）并显示图层之后，但是当我将鼠标悬停在功能上时，该功能没有ID并且状态为空。但是，如果我添加一个矢量层，然后将鼠标悬停在具有ID和状态的功能上。

我找到了信息，如果没有显示ID，则是因为我没有正确添加geojson图层。

Info1

使用类似https://www.mapbox.com/mapbox-gl-js/example/hover-styles/这样的map.setFeatureState（）的示例要求用户在其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功能。启用后，feature.id属性将为自动   根据其在features数组中的索引分配，覆盖任何   以前的值。

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
    };
};

如何在React-MapBox-GL

1 个答案: