0

我正在研究 kepler.gl .. 我想通过代码而不是右上角出现的 kepler.gl 面板应用过滤器和时间可视化.. 我们可以从代码中控制它吗？以及如何通过代码删除右上角出现的 kepler.gl 菜单框我不希望我的客户看到该面板这是我在开普勒地图上显示我的数据的代码

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}

    />

  );
  }}```
can anyone pls help me how t do this?
4

1 回答 1

0

是的，通过 kepler.gl 面板进行所有设置，我们还可以从代码中控制它，只需要启用只读选项选项：{ centerMap: true, readOnly: false }，将只读设置为 true，结果是 kepler.gl 的侧面板将消失，用户只能像这个选项一样阅读地图：{ centerMap: true, readOnly: true }，另一个问题的答案是......做任何你想做的事情，通过 kepler.gl 面板设置所有的设置pannael 然后导出地图（这是 kepler.gl 面板右上角的选项），方法是自动将所有 html 文件下载到您的电脑中，并在该 html 文件中处理配置并将其粘贴到那里 function Map() { const dispatch =使用调度（）；

常量数据=数据json；

React.useEffect(() => { if (data) { dispatch( addDataToMap({ datasets: { info: { label: "COVID-19", id: "covid19" }, data }, option: { centerMap: true, readOnly: false }, config: {//这里粘贴你刚刚从 html 文件中获取的配置 } }) ); } }, [dispatch, data]);

返回 （

// <button onClick ={this.handledata} >changedata</button>
<KeplerGl
  id="covid"
  mapboxApiAccessToken="pk.eyJ1IjoiYWxpcmF6YTcwNSIsImEiOiJjazh5d2hjb3AwOHBqM2VsY21wOHo5eXprIn0.9G5CE4KqfbvU9HQ6WBuo3w"
  width={window.innerWidth}
  height={window.innerHeight}

/>

); }}`` 这就是您可以通过代码控制 kepler.gl 而不向用户显示 kepler.gl 面板的方式

于 2020-07-14T12:32:29.860 回答