изменение состояния kepler.gl по нажатию кнопки - PullRequest
Новая
       34

изменение состояния kepler.gl по нажатию кнопки

0 голосов
/ 20 апреля 2020

Я работаю над kepler.gl. Я пытаюсь добавить еще одну точку на карте и изменить состояние kepler.gl по нажатию кнопки. Я имею в виду, когда я нажимаю кнопку, на карте keppler.gl отображается другая точка. сейчас у меня 4 точки на карте kepler.gl, и все работает нормально ... вот код 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, но не смог получить желаемых результатов?

1 Ответ

0 голосов
/ 20 апреля 2020

Я думаю, вы не определили обработчик события кнопки. Сначала вам нужно определить его, а затем вы можете отправить действие с новыми данными.

Например, если у вас есть кнопка с обработчиком событий внутри вашего 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: {}
        })
      );
};
...