Polygon Selection change color

问题:

is there any way to change the default color of the mapbox draw tool, i'd like to draw polygons with green color instead of the default orange. something like

var draw = new MapboxDraw({ displayControlsDefault: false, controls: { polygon: true, trash: true } properties: { color: green } }); map.addControl(draw);

回答1:

You can add a styles parameter like this:

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",
    }
  }
] })]

回答2:

just for clarification, if you use this method, and want to draw points as well as polygons, you have to define them;

const mapDraw = new MapboxDraw({
  displayControlsDefault: false,
  controls: {
    polygon: true,
    point: true,
    trash: true
  },
  styles: [{
      "id": "gl-draw-polygon-fill",
      "type": "fill",
      "paint": {
        "fill-color": "#0BD1C3",
        "fill-outline-color": "#D20C0C",
        "fill-opacity": 0.1
      }
    },
    //*** HERE YOU DEFINE POINT STYLE *** //
    {
      "id": "gl-draw-point",
      "type": "circle",
      "paint": {
        "circle-radius": 5,
        "circle-color": "#ff0202"
      }
    } //**********************************//
    ,
    {
      "id": "gl-draw-polygon-stroke-active",
      "type": "line",
      "layout": {
        "line-cap": "round",
        "line-join": "round"
      },
      "paint": {
        "line-color": "#D20C0C",
        "line-dasharray": [0.2, 2],
        "line-width": 3
      }
    },
    {
      "id": "gl-draw-polygon-and-line-vertex-active",
      "type": "circle",
      "filter": ["all", ["==", "meta", "vertex"],
        ["==", "$type", "Point"],
        ["!=", "mode", "static"]
      ],
      "paint": {
        "circle-radius": 3,
        "circle-color": "#470CD1",
      }
    }
  ]
})
map.addControl(mapDraw);