javascript - 多边形选择改变颜色

Question

有什么方法可以更改 mapbox 绘图工具的默认颜色，我想用绿色而不是默认的橙色绘制多边形。像

var draw = new MapboxDraw({
显示控件默认值:false，
控制:{
多边形:真实，
垃圾:真实
}
特性: {
颜色:绿色
}
});
map.addControl(绘制)；


Answer 1

你可以像这样添加一个样式参数:

const mapDraw = new MapboxDraw({ styles: [
  // ACTIVE (being drawn)
  // polygon fill
  {
    "id": "gl-draw-polygon-fill",
    "type": "fill",
    "filter": \["all", \["==", "$type", "Polygon"\], \["!=", "mode", "static"\]\],
    "paint": {
      "fill-color": "#D20C0C",
      "fill-outline-color": "#D20C0C",
      "fill-opacity": 0.1
    }
  },
  // polygon outline stroke
  // This doesn't style the first edge of the polygon, which uses the line stroke styling instead
  {
    "id": "gl-draw-polygon-stroke-active",
    "type": "line",
    "filter": \["all", \["==", "$type", "Polygon"\], \["!=", "mode", "static"\]\],
    "layout": {
      "line-cap": "round",
      "line-join": "round"
    },
    "paint": {
      "line-color": "#D20C0C",
      "line-dasharray": \[0.2, 2\],
      "line-width": 3
    }
  },
  // vertex points
  {
    "id": "gl-draw-polygon-and-line-vertex-active",
    "type": "circle",
    "filter": \["all", \["==", "meta", "vertex"\], \["==", "$type", "Point"\], \["!=", "mode", "static"\]\],
    "paint": {
      "circle-radius": 3,
      "circle-color": "#D20C0C",
    }
  }
] })]