单击按钮时kepler.gl的更改状态

问题描述 投票:0回答:1

我正在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函数,但无法获得所需的结果?

kepler.gl
1个回答
0
投票

我认为您尚未定义按钮处理程序。首先,需要定义它,然后可以使用新数据调度操作。

例如,如果您的render()方法中有一个带有事件处理程序的按钮。

<Button onClick={replaceData}>Replace Data</Button>

您必须将data(问题中的对象数组)分配给变量。我们称它为sampleData。这就是您的replaceData处理程序应为:

const replaceData = () => {
  const sampleData = ['your-data'];
  const config = this.getMapConfig();
  dispatch(
    addDataToMap({
      datasets: {
        info: {
          label: "Test Data",
          id: "data",
        },
        data: sampleData,
      },
      config: nycConfig,
    })
  );
};
© www.soinside.com 2019 - 2024. All rights reserved.