以正确的格式放置坐标

时间:2018-12-10 17:09:32

标签: javascript html react-map-gl

我正试图将来自后端的位置数据放入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
        }
    });
}

Its screen of console log lon and lat 我想像这样放置整个坐标:{lon} {lat}

It working if I will put only together specific number.

如何通过?

谢谢

1 个答案:

答案 0 :(得分:0)

根据您的代码,它似乎可以正常工作。

数组方法:

替换以下几行:

const lat = insideGeo.map(item => item.eventData.location.latitude);
const lon = insideGeo.map(item => item.eventData.location.longitude);

使用:

const coords = insideGeo.map(item => [item.eventData.location.latitude, item.eventData.location.longitude]);

您可以访问以下数字:

const lat = coords[index][0]
const lon = coords[index][1]

对象方法:

替换以下几行:

const lat = insideGeo.map(item => item.eventData.location.latitude);
const lon = insideGeo.map(item => item.eventData.location.longitude);

使用:

const coords = insideGeo.map(item => item.eventData.location);

您可以访问以下数字:

const lat = coords[index].latitude
const lon = coords[index].longitude