我正在研究 kepler.gl 。我正在尝试在地图上添加另一个点并在单击按钮时更改 kepler.gl 的状态。我的意思是当我单击按钮时，另一个点会映射到 keppler.gl 地图上。赖特现在我在 kepler.gl 地图上有 4 点，这工作正常......这是地图上 4 点的代码
import React, { useState } from "react";
import keplerGlReducer, {mapStateUpdaters} from "kepler.gl/reducers";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { taskMiddleware } from "react-palm/tasks";
import { Provider, useDispatch } from "react-redux";
import KeplerGl from "kepler.gl";
import { addDataToMap } from "kepler.gl/actions";
import useSwr from "swr";
import {csv} from 'd3';
import datajson from './Data/data.json'
const reducers = combineReducers({
keplerGl: keplerGlReducer,
});
const store = createStore(reducers, {}, applyMiddleware(taskMiddleware));
export default function App() {
return (
<Provider store={store}>
<Map />
</Provider>
);
}
function Map() {
const dispatch = useDispatch();
const data=datajson;
React.useEffect(() => {
if (data) {
dispatch(
addDataToMap({
datasets: {
info: {
label: "COVID-19",
id: "covid19"
},
data
},
option: {
centerMap: true,
readOnly: false
},
config: {}
})
);
}
}, [dispatch, data]);
return (
// <button onClick ={this.handledata} >changedata</button>
<KeplerGl
id="covid"
mapboxApiAccessToken="pk.eyJ1IjoiYWxpcmF6YTcwNSIsImEiOiJjazh5d2hjb3AwOHBqM2VsY21wOHo5eXprIn0.9G5CE4KqfbvU9HQ6WBuo3w"
width={window.innerWidth}
height={window.innerHeight}
/>
);
}}
我的 data.jason 文件看起来像这样....
[
{
"id": 139010,
"state": 4,
"subState": 0,
"paid": 1,
"stateReason": "Trip finished by user",
"id_turistic": 5,
"priceFinal": 60,
"consumedFreeMinutes": 0,
"id_user": 4627,
"id_vehicle": 245,
"from": "nan",
"to": "Sol",
"batt_diff": -8,
"duracion": 412,
"fecha": "2018-09-01",
"start30": "2018-09-01 08:00:00",
"end30": "2018-09-01 08:00:00",
"distancia": 2,
"latitude": 40.0,
"longitude": -4.0
},
{
"id": 138888,
"state": 4,
"subState": 0,
"paid": 1,
"stateReason": "Trip finished by user",
"id_turistic": 5,
"priceFinal": 100,
"consumedFreeMinutes": 0,
"id_user": 4627,
"id_vehicle": 245,
"from": "Universidad",
"to": "Embajadores",
"batt_diff": -4,
"duracion": 646,
"fecha": "2018-09-01",
"start30": "2018-09-01 00:00:00",
"end30": "2018-09-01 00:00:00",
"distancia": 4,
"latitude": "40.0",
"longitude": "-4.0"
},
{
"id": 138878,
"state": 4,
"subState": 0,
"paid": 1,
"stateReason": "Trip finished by user",
"id_turistic": 5,
"priceFinal": 110,
"consumedFreeMinutes": 0,
"id_user": 10244,
"id_vehicle": 173,
"from": "Vallehermoso",
"to": "Cuatro Caminos",
"batt_diff": -7,
"duracion": 682,
"fecha": "2018-09-01",
"start30": "2018-09-01 00:00:00",
"end30": "2018-09-01 00:00:00",
"distancia": 3,
"latitude": "40.0",
"longitude": "-4.0"
},
{
"id": 138941,
"state": 4,
"subState": 0,
"paid": 0,
"stateReason": "Trip finished by user",
"id_turistic": 5,
"priceFinal": 170,
"consumedFreeMinutes": 0,
"id_user": 12133,
"id_vehicle": 207,
"from": "Justicia",
"to": "Prosperidad",
"batt_diff": -7,
"duracion": 1031,
"fecha": "2018-09-01",
"start30": "2018-09-01 02:00:00",
"end30": "2018-09-01 02:00:00",
"distancia": 5,
"latitude": "40.0",
"longitude": "-4.0"
}
]
现在我想单击按钮添加另一个点？例如，我想在单击按钮时添加该点
{
"fields": [
{
"name": "id",
"format": "",
"type": "integer"
},
{
"name": "state",
"format": "",
"type": "integer"
},
{
"name": "substate",
"format": "",
"type": "integer"
},
{
"name": "paid",
"format": "",
"type": "integer"
},
{
"name": "stateReason",
"format": "",
"type": "string"
},
{
"name": "id_turistic",
"format": "",
"type": "integer"
},
{
"name": "priceFinal",
"format": "",
"type": "integer"
},
{
"name": "consumedFreeMinutes",
"format": "",
"type": "integer"
},
{
"name": "consumed",
"format": "",
"type": "integer"
},
{
"name": "id_user",
"format": "",
"type": "integer"
},
{
"name": "id_vehicle",
"format": "",
"type": "integer"
},
{
"name": "from",
"format": "",
"type": "string"
},
{
"name": "to",
"format": "",
"type": "string"
},
{
"name": "batt_diff",
"format": "",
"type": "string"
},
{
"name": "duracion",
"format": "",
"type": "string"
},
{
"name": "fecha",
"format": "YYYY-M-D H:m:s",
"type": "timestamp"
},
{
"name": "start30",
"format": "YYYY-M-D H:m:s",
"type": "timestamp"
},
{
"name": "end30",
"format": "YYYY-M-D H:m:s",
"type": "timestamp"
},
{
"name": "distancia",
"format": "",
"type": "integer"
},
{
"name": "latitude",
"format": "",
"type": "real"
},
{
"name": "longitude",
"format": "",
"type": "real"
},
{
"name": "lo",
"format": "",
"type": "real"
}
],
"rows": [
[
139010,
4,
0,
1,
"Trip finished by user",
5,
60,
0,
4627,
245,
"nan",
"Sol",
-8,
412,
"2018-09-01",
"2018-09-01 08:00:00",
"2018-09-01 08:00:00",
2,
40.0,
-12,
40.0
],
[
138888,
4,
0,
1,
"Trip finished by user",
5,
100,
0,
4627,
245,
"Universidad",
"Embajadores",
-4,
646,
"2018-09-01",
"2018-09-01 08:00:00",
"2018-09-01 08:00:00",
4,
40.0,
0,
40.0
],
[
138878,
4,
0,
1,
"Trip finished by user",
5,
110,
0,
10244,
173,
"Vallehermoso",
"Cuatro Caminos",
-7,
682,
"2018-09-01",
"2018-09-01 08:00:00",
"2018-09-01 08:00:00",
3,
40.0,
-8.0,
40.0
],
[
138941,
4,
0,
0,
"Trip finished by user",
5,
170,
0,
12133,
207,
"Justicia",
"Prosperidad",
-7,
1031,
"2018-09-01",
"2018-09-01 08:00:00",
"2018-09-01 08:00:00",
5,
40.0,
-4.0,
40.0
]
]
}
我该怎么做有人可以帮我吗？我已经尝试过 mapstateupdataer 功能但无法获得所需的结果？