html - 在开普勒 gl 点图上默认显示图例

Question

我想将使用开普勒 gl 完成的点图导出到交互式 html 文件。默认情况下，该交互式 html 文件应具有可见的图例（颜色键）。我的意思是我不应该点击显示图例按钮来查看地图上颜色的含义 - 导出后默认情况下显示图例应该是可见的和固定的。这可能吗？谁能指导我如何实现这一目标？

Answer 1

我不确定html导出的东西，我也不确定你的意思是如何使用演示，基本上使用前端 (GUI) 或 API 组件。

由于我使用默认打开了图例react，因此我将讨论它。

/* store.js */
// some of your import
import { createStore, applyMiddleware } from "redux";
import keplerGlReducer, { uiStateUpdaters } from 'kepler.gl/reducers';
import { taskMiddleware } from "react-palm/tasks";
// rest of them

const customizedKeplerGlReducer = keplerGlReducer
  .initialState({
    uiState: {
      mapControls: {
        ...uiStateUpdaters.DEFAULT_MAP_CONTROLS,
        mapLegend: {
          show: true,
          active: false
        },
        /* another map controls */
        //toggle3d: {
        //  show: true
        //},
      }
    }
  });

export default createStore(customizedKeplerGlReducer, {}, applyMiddleware(taskMiddleware));

这样，您的图例将默认打开（单击），除非这不是您要求的。

kepler.gl的完整示例