0

バックエンドからの位置データを react-map-gl に入れようとしていますが、小さな障害があります。

    addLines = () => {
    const geo = this.state.geo;
    const insideGeo = geo.map(dataItem => {
        const json = new Buffer(dataItem.payload, "hex").toString();
        if (json !== '')
            return JSON.parse(json);
        return json;
    }).filter(item => (item !== ''));
    const lat = insideGeo.map(item => item.eventData.location.latitude);
    const lon = insideGeo.map(item => item.eventData.location.longitude);
    console.log('Lat:', lat[4]);
    console.log('Lon:', lon[4]);
    const map = this.refs.map.getMap()
    map.addLayer({
        "id": "route",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [
                            lon[4], lat[4]
                        ],
                        [
                            lon[5], lat[5]
                        ],
                    ]
                }
            }
        },
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": "#18c3ea",
            "line-width": 3
        }
    });
}

コンソールログの経度と緯度の画面 全体の座標を次のように配置したい: {lon} {lat}

特定の数だけまとめるとうまくいきます。

渡す方法は?

ありがとう

4

1 に答える 1