hongtu-draw

修改版的 mapbox-gl-draw

初始化

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

绘制不同图形

线+多边形+文本 绘制

标绘工具有多种图标绘制功能，通过changeMode()函数进行切换

  // 文本
  'draw_text': '文本',
  // 线状
  'draw_line_string': '折线',
  'draw_curve': '曲线',
  'draw_arc': '弧线',
  // 面状
  'draw_polygon': '多边形',
  'draw_circle': '圆',
  'draw_ellipse': '椭圆',
  'draw_rectangle': '矩形',
  'draw_sector': '扇形',
  'draw_lune': '弓形',
  'draw_closed_curve': '闭合曲面',
  // 箭头
  'draw_fine_arrow': '细直箭头',
  'draw_assault_direction': '突击方向',
  'draw_double_arrow': '钳击',
  'draw_attack_arrow': '进攻箭头',
  'draw_tailed_attack_arrow': '燕尾进攻箭头',
  'draw_squad_combat': '战斗小队',

以上图形调用方式为$draw.changeMode(${modeName})、

图标绘制

图标绘制的API较为特殊,需传入图标对应参数

$draw.changeMode('draw_image',{imageId:${imageId},imageUrl:${imageUrl}})

其中各个图标的ID不可重复且图标仅支持png格式

事件

绘制完毕事件

map.on('draw.create', {features,type} => {
  console.log(features[0].id)
})

图形绘制完毕时，draw.create事件会被触发，此时回调函数中的features参数即为绘制结果

选中要素改变事件

map.on('draw.selectionchange', data => {...})

从这个事件中可以引申出图形被选中和取消选中两个情况

要素更新事件

map.on('draw.update', data => {...})

当有编辑行为触发要素图形变化后触发

要素删除事件

map.on('draw.delete', data => {...})

要素被删除时触发

设置属性

获取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' }
]

导出文本型绘制结果

有两种方式:

1. 是通过各个事件的回调函数获取

map.on('draw.create', data => {
  // 获取文本型的绘制结果
  const geojson = JSON.stringify(data.features[0])
})

2. 是通过图形id获取

const geojson = JSON.stringify($draw.get(`${featureID}`))

回显结果

根据文本型绘制结果回显图形的api为

$draw.add(JSON.parse(geojson))

另附天地图API http://lbs.tianditu.gov.cn/server/search.html

key: 65cc955951c393f4de2c6f7772c8959c

地名搜索

https://api.tianditu.gov.cn/v2/search?postStr={"keyWord":"故宫","queryType":"1","count":"20","start":"0","level":12,"mapBound":"82.455,28.327,129.239,52.938"}&type=query&tk=65cc955951c393f4de2c6f7772c8959c

行政区划搜索

http://api.tianditu.gov.cn/administrative?postStr={"searchWord":"北京","searchType":"1","needSubInfo":"false","needAll":"false","needPolygon":"true","needPre":"true"}&tk=65cc955951c393f4de2c6f7772c8959c

另附同步视野方式

获取A用户镜头参数

const options = {
  center:map.getCenter(),
  zoom:map.getZoom(),
  bearing: map.getBearing(),
  pitch: map.getPitch()
}

将镜头参数传递给其他用户并设置

map.easeTo(options)