Как добавить слой GeoJson в React-MapBox-GL - PullRequest
Новая
       19

Как добавить слой GeoJson в React-MapBox-GL

1 голос
/ 05 апреля 2019

Прежде всего, поблагодарите за чтение моего вопроса и попробуйте помочь мне и извиниться за мой английский.

В компоненте «Реакция», который у меня есть, и введите, где добавить файлы и загрузить файл геоджона. После того, как я создаю исходный слой с загруженным URL-адресом (CORS включены) и показываю слой, но когда я перемещаю мышь и наведите курсор мыши на объект, у этого объекта не будет идентификатора, а состояние будет пустым. Однако, если я добавлю векторный слой и наведу указатель мыши на объект, у которого есть идентификатор и состояние.

Я нашел информацию, и если не показывать идентификатор, это потому, что я не правильно добавил слой геойсон.

Info1

В примерах с использованием map.setFeatureState (), подобных этой https://www.mapbox.com/mapbox-gl-js/example/hover-styles/, требуется, чтобы пользователь включал целочисленное значение родительского идентификатора в свой источник геозон или векторных листов.

Инфо2

state (Object) Набор пар ключ-значение. Значения должны быть действительными типами JSON. Этот метод требует атрибут feature.id для наборов данных. Для источников GeoJSON без идентификаторов объектов установите параметр generateIds в спецификации GeoJSONSourceSpecification, чтобы автоматически назначать их. Эта опция назначает идентификаторы на основе индекса объекта в исходных данных. Если вы изменяете данные объекта с помощью map.getSource ('some id'). SetData (..), вам может потребоваться повторно применить состояние с учетом обновленных значений id.

REACT Документация 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 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>
        );
    })
}

1 Ответ

0 голосов
/ 07 апреля 2019

Спасибо за вашу помощь.

Я нашел решение.Когда вы добавляете слой, вы можете добавить свойство в источнике, которое генерирует и идентифицирует для каждого объекта слоя.

generateId

Необязательный логический.По умолчанию false.Следует ли генерировать идентификаторы для функций геойсона.При включении свойство 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
    };
};
...