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

Question

我正在研究 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 功能，但无法获得预期的结果？

Answer 1

我认为您还没有定义按钮事件处理程序。首先，您需要定义它，然后您可以使用新数据调度操作。

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

<Button onClick={addData}>Add Data</Button>

更新： 在地图上附加现有数据集。您必须从 kepler/actions 导入一个新动作并发送它。

import {updateMap} from 'kepler.gl/actions'

const addData= () => {
 const data = {latitude: 37.75043, longitude: -122.34679, width: 800, height: 1200}; 
 dispatch(updateMap(data));
};

您必须将 data（您问题中的对象数组）分配给一个变量。我们称它为 sampleData。这就是你的 replaceData 处理程序应该是这样的：

const addData= () => {
  const sampleData = ['your-new-data-set'];
  const config = this.getMapConfig();
   dispatch(
        addDataToMap({
          datasets: {
            info: {
              label: "COVID-19",
              id: "covid19"
            },
            sampleData
          },
          option: {
            centerMap: true,
            readOnly: false
          },
          config: {}
        })
      );
};

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

changing state of kepler.gl on a button click

kepler.gl