MapBox的Polygon与Trash控件按钮显示空白但功能正常问题

问题根源 #

按钮功能正常但图标空白，本质是没加载Mapbox Draw的配套CSS样式——控件的多边形、删除图标依赖内置的CSS样式（字体图标或SVG背景），缺失样式就只会显示空白按钮。

修复方法 #

1. 引入Mapbox Draw样式文件 #

根据你的项目类型选择对应方式：

• 静态HTML项目：在HTML头部添加样式链接（版本号要和你使用的mapbox-gl-draw JS版本一致）：

<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.3/mapbox-gl-draw.css" type="text/css">

• 框架项目（Vue/React等）：如果是通过npm安装的mapbox-gl-draw，直接在入口文件里引入样式：

import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';

2. 确认初始化代码 #

你当前的初始化代码逻辑没问题，保持即可：

this.draw = new MapboxDraw({
    userProperties: true,
    displayControlsDefault: false,
    controls: {
      combine_features: false,
      uncombine_features: false,
      polygon: true,
      trash: true
    }
});
this.map.addControl(this.draw, 'top-left');

加载样式后，控件就会正常显示多边形和删除图标，功能不受影响。

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