样式

请参阅API文档中的 绘制样式 中的绘制样式获取完整的样式参考。

点

使用这种样式，所有点要素都是蓝色的并且在激活状态下有黑色光晕。及时存在其它要素，也不会渲染它们。

案例

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'
      }
    }
  ]
});

线与多边形

使用此样式，所有线和面要素在绘制时都具有红色虚线轮廓和透明填充，包括顶点。当绘制模式更改为 static 时，这些要素将以纯黑色轮廓和透明填充进行绘制。点使用相同的点过滤器，并将这些点渲染两次：一次作为较大半径的光环，另一次作为顶点插入点。

案例

new MapmostDraw({
  styles: [

    // ACTIVE (正在绘制)
    // 线条绘制
    {
        "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
        }
    },

    // 多边形填充
    {
      "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
      }
    },

    // 多边形中点
    {
     'id': 'gl-draw-polygon-midpoint',
     'type': 'circle',
     'filter': ['all',
       ['==', '$type', 'Point'],
       ['==', 'meta', 'midpoint']],
     'paint': {
       'circle-radius': 3,
       'circle-color': '#fbb03b'
      },
    },

    // 多边形轮廓描边
    // 这不会对多边形的第一条边进行样式化，而是使用线条描边样式化
    {
      "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
      }
    },

    // 顶点光晕
    {
      "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"
      }
    },
    // 顶点点
    {
      "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 (静态，已绘制)
    // 线条描边
    {
        "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
        }
    },

    // 多边形填充
    {
      "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
      }
    },

    // 多边形轮廓
    {
      "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
      }
    }
  ]
});

默认样式

绘图的默认样式如下所示。如果您想使用自定义样式覆盖默认样式，可以自定义ID以实现所需的样式效果。

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'