我正试图将来自后端的位置数据放入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.
如何通过?
谢谢
答案 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