如何通过代码在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: true，readOnly: false }，将readonly设置为true，结果kepler.gl的侧面板将消失，用户只能像这样读取地图：{ centerMap: true，readOnly: true }，另一个问题的答案是...无论你想通过kepler.gl面板做什么，通过pannael设置所有标准，然后导出地图(这是kepler.gl面板右上角的选项)，方法是自动调用html文件下载到你的pc和html文件中，并将其粘贴到function Map() { const调度= useDispatch()；

const data=datajson；

React.useEffect(() => { if ( data ) { addDataToMap({数据集：{ info：{标签：“新冠肺炎”，id："covid19“}，data }，option：{ centerMap: true，readOnly: false }，config：{//在这里粘贴刚从html文件中获取的配置} } )；} }，dispatch，data)；

return (

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

/>

)；}}您可以通过代码控制kepler.gl，而无需向用户显示kepler.gl面板