Kepler GL多边形图层不显示问题求助（React项目）

1. 依赖版本不匹配 #

• 检查kepler.gl及关联依赖（@deck.gl/core、@deck.gl/layers等）的版本是否与官方Demo一致。版本差异可能导致图层配置项不兼容，比如旧版本不支持部分多边形图层属性。
• 执行命令npm list kepler.gl @deck.gl/core查看当前版本，对比官方示例的依赖版本，必要时升级或降级到匹配版本。

2. 地图配置加载不完整 #

• 从官方导出的JSON包含完整的图层样式配置，需确保项目中完整导入整个配置文件，而非仅提取数据部分。
• 错误做法：只导入datasets字段忽略config中的图层设置；正确做法直接将导出的JSON传入KeplerGl组件的mapConfig属性：

import mapConfig from './exported-map.json';

<KeplerGl
  id="polygon-map"
  mapboxApiAccessToken={YOUR_MAPBOX_TOKEN}
  mapConfig={mapConfig}
/>

3. 图层类型与数据格式不兼容 #

• 确认导出配置中多边形图层的layer.type是否为当前项目Kepler GL版本支持的类型（如filled-polygon或polygon），版本不兼容会导致图层无法渲染且配置项缺失。
• 检查导入的GeoJSON数据：确保geometry.type为Polygon或MultiPolygon，数据格式错误会导致Kepler GL无法识别为多边形图层，进而不显示对应的Fill Color、Height配置项。

4. Redux Store配置错误 #

• 确保Kepler GL的Reducer正确注册，且Store配置符合官方要求，缺少必要中间件会导致图层配置无法正常加载：

import { createStore, combineReducers, applyMiddleware } from 'redux';
import keplerGlReducer from 'kepler.gl/reducers';
import { taskMiddleware } from 'react-palm/tasks';

const rootReducer = combineReducers({
  keplerGl: keplerGlReducer
});

export const store = createStore(
  rootReducer,
  applyMiddleware(taskMiddleware)
);

5. 地图容器样式缺失 #

• 检查Kepler GL组件的容器是否设置了明确的宽高，容器高度为0时图层会渲染但不可见：

.kepler-gl-wrapper {
  width: 100%;
  height: 80vh;
}

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