nicecode-v2/packages/map/src/drawControl/index.md

category	subtitle	title	toc	group
Components	地图绘制	Draw 地图绘制	content	title order 地图操作 1

基本用法

API

参数	说明	类型	默认值	版本
draw	是否绘制	boolean	false	-
toolsBarOpen	工具栏是否打开	boolean	false	-
onToolClick	工具Icon点击事件	(e: React.MouseEvent<HTMLElement, MouseEvent>) => void	false	-
buttonList	工具栏按钮列表	IButtonList	defaultButtonList	-
mapRef.current.drawer	绘制组件的Ref，参考@mapbox/mapbox-gl-draw	DrawControlRefProps	-	-
onCreate	创建监听	(evt: {features: object[]}) => void;	-	-
onUpdate	更新监听	(evt: {features: object[]}) => void;	-	-
onDelete	删除监听	(evt: {features: object[]}) => void;	-	-
onRender	渲染监听	(evt: {features: object[]}) => void;	-	-
onCombine	组合监听	(evt: {features: object[]}) => void;	-	-
onUncombine	分离监听	(evt: {features: object[]}) => void;	-	-
onModeChange	模式切换监听	(evt: {features: object[]}) => void;	-	-
onActionable	是否绘制	(evt: {features: object[]}) => void;	-	-
onSelectionChange	选中目标切换监听	(evt: {features: object[]}) => void;	-	-

interface IButtonList {
  label: string
  key: string
  icon?: ReactNode | string
  onClick?: () => void
}[]
// 默认按钮列表
const defaultButtonList = [
  {
    label: '圆形框选',
    key: 'circle',
    icon: 'icon-yuan',
    onClick: () => drawControlRef.current?.drawer?.changeMode?.('draw_circle')
  },
  {
    label: '矩形框选',
    key: 'rect',
    icon: 'icon-fang',
    onClick: () => drawControlRef.current?.drawer?.changeMode?.('draw_rect'),
    popoverProps: {
      placement: 'bottom',
      content: '自定义内容'
    }
  },
  {
    label: '多边形框选',
    key: 'more',
    icon: 'icon-duobianxing',
    onClick: () => drawControlRef.current?.drawer?.changeMode?.('draw_polygon')
  },
  {
    label: '路径框选',
    key: 'path',
    icon: 'icon-lujingkuangxuannor',
    onClick: () => drawControlRef.current?.drawer?.changeMode?.('draw_line_string')
  },
  {
    label: '测距',
    key: 'path',
    icon: 'icon-ceju',
    onClick: () => drawControlRef.current?.drawer?.changeMode?.('draw_line_string')
  },
  {
    label: '清除',
    key: 'clear',
    icon: 'icon-gongjuxiangguanbi',
    onClick: () => drawControlRef.current?.drawer?.deleteAll()
  }
]