如何禁用kepler.gl地图的侧边面板？附代码求助

要隐藏kepler.gl的侧边面板，你可以利用官方提供的uiState配置项，这是最直接且推荐的方式，不需要额外的CSS hack。下面是具体的实现步骤和修改后的代码：

核心方案：通过uiState控制侧边面板可见性 #

kepler.gl的<KeplerGl>组件支持传入uiState属性，其中sidePanel.isVisible字段直接控制侧边面板的显示与隐藏。将其设置为false即可默认隐藏面板。

另外，为了彻底防止用户通过快捷键或其他操作打开面板，建议同时开启readOnly模式（将readOnly设为true），这样地图会处于完全只读状态，用户无法修改任何配置。

修改你的代码 #

以下是更新后的完整代码，我已经添加了必要的配置：

import React from "react";
import keplerGlReducer 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";

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 } = useSwr("covid", async () => {
    const response = await fetch(
      "https://gist.githubusercontent.com/leighhalliday/a994915d8050e90d413515e97babd3b3/raw/a3eaaadcc784168e3845a98931780bd60afb362f/covid19.json"
    );
    const data = await response.json();
    return data;
  });

  React.useEffect(() => {
    if (data) {
      dispatch(
        addDataToMap({
          datasets: {
            info: { label: "COVID-19", id: "covid19" },
            data
          },
          option: { 
            centerMap: true, 
            readOnly: true // 这里也设置为只读，和组件属性保持一致
          },
          config: {}
        })
      );
    }
  }, [dispatch, data]);

  return (
    <KeplerGl
      id="covid"
      mapboxApiAccessToken="pk.eyJ1IjoiYWxpcmF6YTcwNSIsImEiOiJjazh5d2hjb3AwOHBqM2VsY21wOHo5eXprIn0.9G5CE4KqfbvU9HQ6WBuo3w"
      width={window.innerWidth}
      height={window.innerHeight}
      // 配置uiState隐藏侧边面板
      uiState={{
        sidePanel: {
          isVisible: false
        }
      }}
      // 开启只读模式，彻底禁用编辑操作
      readOnly={true}
    />
  );
}

关键说明 #

1. uiState.sidePanel.isVisible: false：这会让侧边面板默认不显示。
2. readOnly: true：这个配置会让地图进入只读状态，用户无法打开侧边面板、修改图层配置或进行其他编辑操作，确保面板不会被意外触发显示。

如果你只是想隐藏面板但保留部分编辑功能，可以只设置uiState而不开启readOnly，但需要注意用户可能通过快捷键（比如Ctrl+E）重新打开面板，所以根据你的业务需求选择即可。

内容的提问来源于stack exchange，提问作者Ali Raza