样式

See [API.md#styling-draw] for a complete styling reference.

点

With this style, all Point features are blue and have a black halo when active. No other features are rendered, even if they are present.

new MapmostDraw({
  styles: [
    {
      'id': 'highlight-active-points',
      'type': 'circle',
      'filter': ['all',
        ['==', '$type', 'Point'],
        ['==', 'meta', 'feature'],
        ['==', 'active', 'true']],
      'paint': {
        'circle-radius': 7,
        'circle-color': '#000000'
      }
    },
    {
      'id': 'points-are-blue',
      'type': 'circle',
      'filter': ['all',
        ['==', '$type', 'Point'],
        ['==', 'meta', 'feature'],
        ['==', 'active', 'false']],
      'paint': {
        'circle-radius': 5,
        'circle-color': '#000088'
      }
    }
  ]
});

线与多边形

With this style, all line and polygon features are have dashed red outline and transparent fill while being drawn, including the point vertices. When the Draw mode is changed the 'static', these features will be drawn with solid black outline and transparent fill. Point vertices use the same point filter, and render these points twice: once as a larger-radius halo, and again as the vertex inset point.

new MapmostDraw({
  styles: [
    // ACTIVE (being drawn)
    // line stroke
    {
        "id": "gl-draw-line",
        "type": "line",
        "filter": ["all", ["==", "$type", "LineString"], ["!=", "mode", "static"]],
        "layout": {
          "line-cap": "round",
          "line-join": "round"
        },
        "paint": {
          "line-color": "#D20C0C",
          "line-dasharray": [0.2, 2],
          "line-width": 2
        }
    },
    // 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 mid points
    {
    'id': 'gl-draw-polygon-midpoint',
    'type': 'circle',
    'filter': ['all',
      ['==', '$type', 'Point'],
      ['==', 'meta', 'midpoint']],
    'paint': {
      'circle-radius': 3,
      'circle-color': '#fbb03b'
    },
    // 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": 2
      }
    },
    // vertex point halos
    {
      "id": "gl-draw-polygon-and-line-vertex-halo-active",
      "type": "circle",
      "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
      "paint": {
        "circle-radius": 5,
        "circle-color": "#FFF"
      }
    },
    // 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",
      }
    },

    // INACTIVE (static, already drawn)
    // line stroke
    {
        "id": "gl-draw-line-static",
        "type": "line",
        "filter": ["all", ["==", "$type", "LineString"], ["==", "mode", "static"]],
        "layout": {
          "line-cap": "round",
          "line-join": "round"
        },
        "paint": {
          "line-color": "#000",
          "line-width": 3
        }
    },
    // polygon fill
    {
      "id": "gl-draw-polygon-fill-static",
      "type": "fill",
      "filter": ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]],
      "paint": {
        "fill-color": "#000",
        "fill-outline-color": "#000",
        "fill-opacity": 0.1
      }
    },
    // polygon outline
    {
      "id": "gl-draw-polygon-stroke-static",
      "type": "line",
      "filter": ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]],
      "layout": {
        "line-cap": "round",
        "line-join": "round"
      },
      "paint": {
        "line-color": "#000",
        "line-width": 3
      }
    }
  ]
});

默认样式

The default style for drawing is as follows,If you want to override the default style with a custom style, you can customize the ID to achieve the desired styling effect.

id	type	mode	active	meta	paint	layout
gl-draw-polygon-midpoint	Point			midpoint	'circle-radius': 3,'circle-color':'#fbb03b'
gl-draw-polygon-and-line-vertex-stroke-inactive	Point	static		vertex	'circle-radius': 5,'circle-color': '#fff'
gl-draw-polygon-and-line-vertex-inactive	Point	static		vertex	'circle-radius': 3,'circle-color': '#fbb03b'
gl-draw-point-point-stroke-inactive	Point	static	false	feature	'circle-radius': 5,'circle-opacity': 1,'circle-color': '#fff'
gl-draw-point-inactive	Point	static	false	feature	'circle-radius': 3, 'circle-color': '#3bb2d0'
gl-draw-point-stroke-active	Point		true	midpoint	'circle-radius': 7,'circle-color': '#fff'
gl-draw-point-active	Point		true	midpoint	'circle-radius': 5,'circle-color': '#fbb03b'
gl-draw-point-static	Point	static			'circle-radius': 5,'circle-color': '#404040'
gl-draw-line-inactive	LineString	static	false		'line-color': '#3bb2d0','line-width': 2	'line-cap': 'round','line-join': 'round'
gl-draw-line-active	LineString		true		'line-color': '#fbb03b','line-dasharray': [0.2, 2],'line-width': 2	'line-cap': 'round','line-join': 'round'
gl-draw-line-static	LineString	static			'circle-radius': 5,'circle-color': '#404040'
gl-draw-polygon-fill-inactive	Polygon	static	false		'fill-color': '#3bb2d0','fill-outline-color': '#3bb2d0', 'fill-opacity': 0.1
gl-draw-polygon-fill-active	Polygon		true		'fill-color': '#fbb03b','fill-outline-color': '#fbb03b','fill-opacity': 0.1
gl-draw-polygon-stroke-inactive	Polygon	static	false		'line-color': '#3bb2d0','line-width': 2	'line-cap': 'round','line-join': 'round'
gl-draw-polygon-stroke-active	Polygon		true		'line-color': '#fbb03b','line-dasharray': [0.2, 2],'line-width': 2	'line-cap': 'round','line-join': 'round'
gl-draw-polygon-fill-static	Polygon	static			'fill-color': '#404040','fill-outline-color': '#404040','fill-opacity': 0.1
gl-draw-polygon-stroke-static	Polygon	static			'line-color': '#404040','line-width': 2	'line-cap': 'round','line-join': 'round'