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);

来源：https://stackoverflow.com/questions/45022206/polygon-selection-change-color