如何使用 Deck.gl 显示多个 PathLayer

Question

我对 React Js 和 DeckGL 不太熟悉。我正在尝试在交互式地图上显示 PathLayer class 的几个对象。单个对象显示没有问题，但是当有多个对象时，就不行了：

    const token = global.REACT_APP_TOKEN;

    const initialViewState = {
        longitude: 37.6205569,
        latitude: 55.746277,
        zoom: 11
    };

    class ParkingOnMap extends Component {
        state = {
            features: []
        };

        async componentDidMount() {
            const body = await (await fetch(global.path + `/featuresOnlyIDAndCoordinates`)).json();
            this.setState({features: body});
        }

        render() {
            const {features} = this.state;
            const data = [{
                name: "random-name",
                color: [245, 49, 49],//[101, 147, 245],

                path: [[37.639533, 55.7841708], [37.639533, 55.7842522], [37.6398898, 55.7843533], [37.6399059, 55.7846172]],
              //path: features.map(c => {return (c.coordinates)})

        }];

        console.log(data.map(c => {return c.path}));
        console.log(features);

        // below, add whatever layers you need to overlay on your map
        const layer = [
            new PathLayer({
                id: 'path-layer',
                data,
                //data: coordinates,
                getPath: data => data.path,
                getWidth: data => 4,
                getColor: data => data.color,
                widthMinPixels: 4
            })
        ];

        return (
            <div className="App">
                <AppNavbar/>
                <Button onClick={this.setUserLocation}>My Location</Button>
                <div className="map">
                    {<React.Fragment>
                        <DeckGL
                            initialViewState={initialViewState}
                            controller={true}
                            layers={layer}
                        >
                            <StaticMap
                                mapStyle="mapbox://styles/mapbox/streets-v11"
                                mapboxApiAccessToken={token}
                            />
                        </DeckGL>
                    </React.Fragment>}
                </div>
            </div>
        )
    }
}

export default withRouter (ParkingOnMap);

这是一个具有一个坐标数组的工作示例：

path: [[37.639533, 55.7841708], [37.639533, 55.7842522], [37.6398898, 55.7843533], [37.6399059, 55.7846172]]

这部分不起作用：

path: features.map(c => {return (c.coordinates)})

在第二种情况下，数据表示 json 个对象的数组，例如：

[{"id":"3020148","coordinates":[[37.5948822,55.7154477],[37.595188,55.7157046]]},{"id":"3020149","coordinates":[[37.5954187,55.7158979],[37.5963521,55.7166594]]}, ....etc.

我不知道如何遍历 DeckGL 渲染中的所有对象。 documentation 说这很简单。

Answer 1

路径数据需要一个数组。如果你想查看许多路径。更改您的数据

之前

路径：[[37.639533, 55.7841708], [37.639533, 55.7842522], [37.6398898, 55.7843533], [37.6399059, 55.7846172]]

之后路径：[37.639533, 55.7841708, 37.639533, 55.7842522, 37.6398898, 55.7843533, 37.6399059, 55.7846172]

Answer 2

我考虑过像Leaflet这样最简单最原生的解决方案。

如何使用 Deck.gl 显示多个 PathLayer

How to display multiple PathLayer with Deck.gl

javascript

reactjs

deck.gl