地图标绘（@mapbox-web/draw）

介绍

@mapbox-web/draw 库扩展自 mapbox-gl-draw，支持以下图形的绘制：

1. 文本

• 'draw_text': '文本'

2. 线状

• 'draw_line_string': '折线'
• 'draw_curve': '曲线'
• 'draw_arc': '弧线'

3. 面状

• 'draw_polygon': '多边形'
• 'draw_circle': '圆'
• 'draw_ellipse': '椭圆'
• 'draw_rectangle': '矩形'
• 'draw_sector': '扇形'
• 'draw_lune': '弓形'
• 'draw_closed_curve': '闭合曲面'

4. 箭头

• 'draw_fine_arrow': '细直箭头'
• 'draw_assault_direction': '突击方向'
• 'draw_double_arrow': '钳击'
• 'draw_attack_arrow': '进攻箭头'
• 'draw_tailed_attack_arrow': '燕尾进攻箭头'
• 'draw_squad_combat': '战斗小队'

5. 图片

• 'draw_image': 'PNG图片'

安装

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

API方法

初始化（userProperties: true为必设属性）

import MapboxDraw from '@mapbox-web/draw'

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

切换模式

$draw.changeMode(${modeName})

// 图标绘制的API较为特殊,需传入图标对应参数，其中各个图标的ID不可重复且图标仅支持png格式
$draw.changeMode('draw_image',{imageId: ${imageId}, imageUrl: ${imageUrl}})

获取id，并设置属性

对绘制结果的操作都是通过id进行的

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

获取字典表

可通过事件中返回要素的字典表查询每一个图形有哪些属性可以设置 字典表获取方式：

features[0].properties['properties-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' }
]

事件

与mapbox-gl-draw保持一致：draw.create， draw.selectionchange，draw.update，draw.delete

样式导入

使用此库需要导入

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