如何通过代码在 kepler.gl 中应用过滤器、时间可视化？

Question

我正在研究 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?

Answer 1

是的，所有设置都通过 kepler.gl 面板，我们也可以通过代码控制，只需要启用只读选项选项： { centerMap: 是的，只读：假 }, 将 readonly 设置为 true，结果 kepler.gl 的侧面板将消失，用户只能像这样阅读地图选项： { centerMap: 是的，只读：真 }, 而另一个问题的答案是...... 通过 kepler.gl pannel 做任何你想做的事通过 pannael 设置所有的 stting 然后导出地图（这是 kepler.gl pannel 右上角的选项）通过自动执行 html 文件在您的电脑中下载并在 html 文件中复制配置并将其粘贴到那里功能地图（）{ const dispatch = useDispatch();

常量数据=datajson；

React.useEffect(() => { 如果（数据）{ 派遣（ addDataToMap({ 数据集：{ 信息：{ 标签：“COVID-19”，编号：“covid19” }, 数据 }, 选项： { centerMap: 是的，只读：假 }, config: {//这里粘贴你刚从 html 文件中得到的配置 } }) ); } }, [调度, 数据]);

return (

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

/>

); }}`` 这就是您如何通过代码控制 kepler.gl 而无需向用户显示 kepler.gl 面板

如何通过代码在 kepler.gl 中应用过滤器、时间可视化？

How to apply filter , time visualization in kepler.gl Through code?

kepler