Map Draw (@mapbox-web/draw)

Introduction

The @mapbox-web/draw library extends mapbox-gl-draw and supports the drawing of the following graphics:

1. Text

• 'draw_text': 'Text'

2. Lines

• 'draw_line_string': 'Line'
• 'draw_curve': 'Curve'
• 'draw_arc': 'Arc'

3. Areas

• 'draw_polygon': 'Polygon'
• 'draw_circle': 'Circle'
• 'draw_ellipse': 'Ellipse'
• 'draw_rectangle': 'Rectangle'
• 'draw_sector': 'Sector'
• 'draw_lune': 'Lune'
• 'draw_closed_curve': 'Closed Curve'

4. Arrows

• 'draw_fine_arrow': 'Thin Straight Arrow'
• 'draw_assault_direction': 'Assault Direction'
• 'draw_double_arrow': 'Pincer Attack'
• 'draw_attack_arrow': 'Attack Arrow'
• 'draw_tailed_attack_arrow': 'Tailed Attack Arrow'
• 'draw_squad_combat': 'Squad Combat'

5. Images

• 'draw_image': 'PNG Image'

Installation

npm install @mapbox-web/draw
yarn add @mapbox-web/draw
pnpm add @mapbox-web/draw

API Methods

Initialization (userProperties: true is a required property)

import MapboxDraw from '@mapbox-web/draw'

const $draw = new MapboxDraw(map, {
  userProperties: true // Required
})

Switching Modes

$draw.changeMode(${modeName})

// The API for drawing icons is special and requires passing the corresponding icon parameters. The IDs of each icon must be unique, and only PNG format is supported for icons.
$draw.changeMode('draw_image',{imageId: ${imageId}, imageUrl: ${imageUrl}})

Getting ID and Setting Properties

Operations on the drawing results are performed through ID.

$draw.setFeatureProperty(${id},${key},${value})

Getting the Dictionary

You can query which properties can be set for each graphic through the dictionary of features returned in the event. How to get the dictionary:

features[0].properties['properties-dictionary']

Example of a polygon's dictionary:

[
  { key: 'fill-color', label: '填充色', type: 'color' },
  { key: 'line-color', label: '边框色', type: 'color' },
  { key: 'opacity', label: '透明度', type: 'number', step: 0.1, min: 0, max: 1 },
  { key: 'description', label: '说明', type: 'textArea' }
]

Events

Consistent with mapbox-gl-draw: draw.create， draw.selectionchange，draw.update，draw.delete

Style Import

Using this library requires importing:

import '@mapbox-web/supermap/mapbox-gl-enhance.css'
import '@mapbox-web/draw/mapbox-web-draw.css'