mapbox-gl-draw 自定义绘制样式

1. 创建 theme.js 文件
   拷贝 node_modules/mapbox-gl-draw/src/lib/theme.js 文件 此文件是绘制时显示的样式图层

   // 注释掉的是原来的样式  新加的是红色
   module.exports = [
     // 面 绘制结束填充样式
     {
       'id': 'gl-draw-polygon-fill-inactive',
       'type': 'fill',
       'filter': ['all',
         ['==', 'active', 'false'],
         ['==', '$type', 'Polygon'],
         ['!=', 'mode', 'static']
       ],
       'paint': {
         // 'fill-color': '#3bb2d0',
         'fill-color': '#ff0000',
         // 'fill-outline-color': '#3bb2d0',
         'fill-outline-color': '#ff0000',
         'fill-opacity': 0.1
       }
     },
     // 面 绘制时填充样式
     {
       'id': 'gl-draw-polygon-fill-active',
       'type': 'fill',
       'filter': ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
       'paint': {
         // 'fill-color': '#fbb03b',
         'fill-color': '#ff0000',
         // 'fill-outline-color': '#fbb03b',
         'fill-outline-color': '#ff0000',
         'fill-opacity': 0.1
       }
     },
     // 线上扩展点位样式
     {
       'id': 'gl-draw-polygon-midpoint',
       'type': 'circle',
       'filter': ['all',
         ['==', '$type', 'Point'],
         ['==', 'meta', 'midpoint']],
       'paint': {
         // 'circle-radius': 3,
         'circle-radius': 5,
         // 'circle-color': '#fbb03b'
         'circle-color': '#ff0000'
       }
     },
     // 面 绘制结束后轮廓线
     {
       'id': 'gl-draw-polygon-stroke-inactive',
       'type': 'line',
       'filter': ['all',
         ['==', 'active', 'false'],
         ['==', '$type', 'Polygon'],
         ['!=', 'mode', 'static']
       ],
       'layout': {
         'line-cap': 'round',
         'line-join': 'round'
       },
       'paint': {
         // 'line-color': '#3bb2d0',
         'line-color': '#ff0000',
         // 'line-width': 2
         'line-width': 3
       }
     },
     // 面 绘制中虚线
     {
       'id': 'gl-draw-polygon-stroke-active',
       'type': 'line',
       'filter': ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
       'layout': {
         'line-cap': 'round',
         'line-join': 'round'
       },
       'paint': {
         // 'line-color': '#fbb03b',
         'line-color': '#ff0000',
         // 'line-dasharray': [0.2, 2],
         'line-dasharray': [2, 2],
         // 'line-width': 2
         'line-width': 3
       }
     },
     // 线 绘制双击结束后显示
     {
       'id': 'gl-draw-line-inactive',
       'type': 'line',
       'filter': ['all',
         ['==', 'active', 'false'],
         ['==', '$type', 'LineString'],
         ['!=', 'mode', 'static']
       ],
       'layout': {
         'line-cap': 'round',
         'line-join': 'round'
       },
       'paint': {
         // 'line-color': '#3bb2d0',
         'line-color': '#ff0000',
         // 'line-width': 2
         'line-width': 3
       }
     },
     // 线 绘制中虚线
     {
       'id': 'gl-draw-line-active',
       'type': 'line',
       'filter': ['all',
         ['==', '$type', 'LineString'],
         ['==', 'active', 'true']
       ],
       'layout': {
         'line-cap': 'round',
         'line-join': 'round'
       },
       'paint': {
         // 'line-color': '#fbb03b',
         'line-color': '#ff0000',
         // 'line-dasharray': [0.2, 2],
         'line-dasharray': [2, 2],
         // 'line-width': 2
         'line-width': 3
       }
     },
     // 线 节点外圈
     {
       'id': 'gl-draw-polygon-and-line-vertex-stroke-inactive',
       'type': 'circle',
       'filter': ['all',
         ['==', 'meta', 'vertex'],
         ['==', '$type', 'Point'],
         ['!=', 'mode', 'static']
       ],
       'paint': {
         // 'circle-radius': 5,
         'circle-radius': 7,
         'circle-color': '#fff'
       }
     },
     // 线 节点内圈
     {
       'id': 'gl-draw-polygon-and-line-vertex-inactive',
       'type': 'circle',
       'filter': ['all',
         ['==', 'meta', 'vertex'],
         ['==', '$type', 'Point'],
         ['!=', 'mode', 'static']
       ],
       'paint': {
         // 'circle-radius': 3,
         'circle-radius': 5,
         // 'circle-color': '#fbb03b'
         'circle-color': '#ff0000'
       }
     },
     // 点 绘制结束后显示 外圈
     {
       'id': 'gl-draw-point-point-stroke-inactive',
       'type': 'circle',
       'filter': ['all',
         ['==', 'active', 'false'],
         ['==', '$type', 'Point'],
         ['==', 'meta', 'feature'],
         ['!=', 'mode', 'static']
       ],
       'paint': {
         // 'circle-radius': 5,
         'circle-radius': 6,
         'circle-opacity': 1,
         'circle-color': '#fff'
       }
     },
     // 点 绘制结束后显示 内圈
     {
       'id': 'gl-draw-point-inactive',
       'type': 'circle',
       'filter': ['all',
         ['==', 'active', 'false'],
         ['==', '$type', 'Point'],
         ['==', 'meta', 'feature'],
         ['!=', 'mode', 'static']
       ],
       'paint': {
         // 'circle-radius': 3,
         'circle-radius': 4,
         // 'circle-color': '#3bb2d0'
         'circle-color': '#ff0000'
       }
     },
     // 点线面上选中点位 外圈
     {
       'id': 'gl-draw-point-stroke-active',
       'type': 'circle',
       'filter': ['all',
         ['==', '$type', 'Point'],
         ['==', 'active', 'true'],
         ['!=', 'meta', 'midpoint']
       ],
       'paint': {
         // 'circle-radius': 7,
         'circle-radius': 9,
         'circle-color': '#fff'
       }
     },
     // 点线面上选中点位 内圈
     {
       'id': 'gl-draw-point-active',
       'type': 'circle',
       'filter': ['all',
         ['==', '$type', 'Point'],
         ['!=', 'meta', 'midpoint'],
         ['==', 'active', 'true']],
       'paint': {
         // 'circle-radius': 5,
         'circle-radius': 7,
         'circle-color': '#ff0000'
       }
     },
     {
       'id': 'gl-draw-polygon-fill-static',
       'type': 'fill',
       'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
       'paint': {
         'fill-color': '#404040',
         'fill-outline-color': '#404040',
         'fill-opacity': 0.1
       }
     },
     {
       'id': 'gl-draw-polygon-stroke-static',
       'type': 'line',
       'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
       'layout': {
         'line-cap': 'round',
         'line-join': 'round'
       },
       'paint': {
         'line-color': '#404040',
         'line-width': 2
       }
     },
     {
       'id': 'gl-draw-line-static',
       'type': 'line',
       'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'LineString']],
       'layout': {
         'line-cap': 'round',
         'line-join': 'round'
       },
       'paint': {
         'line-color': '#404040',
         'line-width': 2
       }
     },
     {
       'id': 'gl-draw-point-static',
       'type': 'circle',
       'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Point']],
       'paint': {
         'circle-radius': 5,
         'circle-color': '#404040'
       }
     }
   ];
   
   

2. 使用修改后的样式文件

   import MapboxDraw from "mapbox-gl-draw";
   import theme from '@/utils/theme.js'
   
   MapDraw = new MapboxDraw({
       displayControlsDefault: false,
       controls: {
         point: true, // 启用绘制点
         line_string: true,
         polygon: true,
         trash: true,
       },
       styles: theme // 使用修改后的样式文件
     })
   

3. 动态修改图层样式

   // 可以使用mapbox此方法动态修改图层样式
   map.setPaintProperty('gl-draw-polygon-fill-inactive', 'fill-color', '#faafee');