React Mapbox GL Draw 如何为DrawControl配置controls属性的控件值

核心逻辑说明 #

controls为可选的布尔值对象类型，因为配置了displayControlsDefault={false}会全局关闭所有默认内置控件，需要在controls对象里显式写入需要开启的控件开关状态；未写入的控件会保持全局关闭状态，无需把类型定义里的所有控件属性都补全。

可直接落地的代码替换 #

把你原有代码里空的controls = {}替换为带目标配置的对象即可，注意键名严格使用下划线格式，和类型定义保持一致，不要用驼峰命名：

<DrawControl
  onDrawCreate={onDrawCreate}
  onDrawUpdate={onDrawUpdate}
  displayControlsDefault={false}
  controls={{
    // 开启两个目标控件
    combine_features: true,
    uncombine_features: true,
    // 按需补充其他需要的控件配置，例如 polygon: true 开启多边形绘制、trash: true 开启删除按钮
  }}
/>

常见问题排查 #

• 出现TS类型报错：检查controls内的键名是否和给定的类型定义完全匹配，禁止传入类型定义外的自定义键值
• 控件不渲染：这两个组合/拆分功能默认是关闭状态，即使不设displayControlsDefault={false}，也必须在controls里显式设为true才会展示
• 多余控件误展示：不需要的控件不要在controls里写对应属性即可，保持默认关闭状态

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