mapbox控件-@mapbox/mapbox-gl-draw使用（vue3）

1 安装

yarn add @mapbox/mapbox-gl-draw

2 引用

import MapboxDraw from "@mapbox/mapbox-gl-draw"
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'

3 地图使用

MapboxDraw.ts

import MapboxDraw from "@mapbox/mapbox-gl-draw"
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'

export const mapboxDraw = new MapboxDraw({
    displayControlsDefault: false,
// Select which mapbox-gl-draw control buttons to add to the map.
    controls: { // 具体工具
        point: true,
        line_string: true,
        polygon: true,
        trash: true
    },
// Set mapbox-gl-draw to draw by default.
// The user does not have to click the polygon control button first.
    defaultMode: 'draw_line_string',
    // 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
    //     }
    //   }
    // ]
})

import { mapboxDraw } from "./mapboxDraw"
map.addControl(mapboxDraw, 'top-left')

4 触发的事件

  map.on('draw.create', function (e) {
    console.log('draw.create', e.features)
  })

  map.on('draw.delete', function (e) {
    console.log('draw.delete',e.features)
  })

  map.on('draw.combine', function (e) {
    console.log('draw.combine', e.features)
  })

  map.on('draw.uncombine', function (e) {
    console.log('draw.uncombine', e.features)
  })

  map.on('draw.update', function (e) {
    console.log('draw.update', e.features)
  })

  map.on('draw.selectionchange', function (e) {

    console.log('draw.selectionchange', e.features)

  })

  map.on('draw.modechange', function (e) {
    console.log('draw.modechange', e.features)
  })

  map.on('draw.render', function (e) {
    console.log('draw.render', e.features)
  })

  map.on('draw.actionable', function (e) {
    console.log('draw.actionable', e.features)
  })