4.5 KiB

Raw Blame History

title	order
Draw UI Component	2

地图绘制组件，支持点、线、面，圆、矩形、的绘制编辑。

使用

using modules

import { DrawControl } from '@antv/l7-draw';

CDN 版本引用

<head>
  <! --引入最新版的L7-Draw -->
  <script src="https://unpkg.com/@antv/l7-draw"></script>
</head>

参数

const control = new DrawControl(scene, option);

// CDN 引用
const control = new L7.Draw.DrawControl(scene, option);

scene

scene 对象, 绘制控件需要传入 scene 实例

options

control 配置项

name	Type	Default	Description
position	`bottomright、topright、 bottomleft’ topleft`	`topright`	组件位置
layout	`horizontal、 vertical`	`vertical`	组件布局支持水平和垂直两种布局
controls	`controlOptions`		设置 UI 组件添加哪些绘制工具
style			地图绘制样式

controlOptions UI 组件配置项

point boolean | drawOption 绘制点工具配置
line boolean | drawOption 绘制线工具配置
polygon boolean | drawOption 绘制面工具配置
circle boolean | drawOption 绘制圆工具配置
rect boolean | drawOption 绘制矩形工具配置
delete boolean | drawOption 添加删除工具

默认配置

  {
    point: true,
    line: true,
    polygon: true,
    rect: true,
    circle: true,
    delete: true
  }

示例

{
    point: false,
    line: {
      editEnable: false,
    },
    polygon: true,
    rect: true,
    circle: true,
    delete: false

添加到地图

scene.addControl(control);

从地图中移除

scene.removeControl(control);

方法

getDraw()

参数： type 绘制实例 point|line|polygon|rect| circle

const pointDraw = drawcontrol.get('point');

getAllData()

获取每个 Draw 实例绘制的结果数据

返回数据格式如下

{
  point: [];
  line: [];
}

事件

drawControl 的事件类型和每个 Draw 的事件一致，如果在 drawControl 监听事件会为每个 draw 增加事件监听。

drawType: Draw 类型
feature: 对应的数据

draw.create

绘制完成时触发该事件

draw.delete

图形删除时触发该事件

draw.update

图形更新时触发该事件，图形的平移，顶点的编辑

drawControl.on('draw.delete', (e) => {});

style

style 配置项可以按需配置，内部会和默认值进行 merge

active 绘制过程中高亮颜色
normal 正常显示状态

// 默认配置参数
const style = {
  active: {
    point: {
      type: 'PointLayer',
      shape: 'circle',
      color: '#fbb03b',
      size: 5,
      style: {
        stroke: '#fff',
        strokeWidth: 2,
      },
    },
    line: {
      type: 'LineLayer',
      shape: 'line',
      color: '#fbb03b',
      size: 1,
      style: {
        opacity: 1,
        lineType: 'dash',
        dashArray: [2, 2],
      },
    },
    polygon: {
      shape: 'fill',
      color: '#fbb03b',
      style: {
        opacity: 0.1,
        stroke: '#fbb03b',
        strokeWidth: 1,
        strokeOpacity: 1,
        lineType: 'dash',
        dashArray: [2, 2],
      },
    },
  },
  normal: {
    polygon: {
      type: 'PolygonLayer',
      shape: 'fill',
      color: '#3bb2d0',
      style: {
        opacity: 0.1,
        stroke: '#3bb2d0',
        strokeWidth: 1,
        strokeOpacity: 1,
        lineType: 'solid',
        dashArray: [2, 2],
      },
    },
    line: {
      type: 'LineLayer',
      shape: 'line',
      size: 1,
      color: '#3bb2d0',
      style: {
        opacity: 1,
      },
    },
    point: {
      type: 'PointLayer',
      shape: 'circle',
      color: '#3bb2d0',
      size: 3,
      style: {
        stroke: '#fff',
        strokeWidth: 2,
      },
    },
  },
  normal_point: {
    type: 'PointLayer',
    shape: 'circle',
    color: '#3bb2d0',
    size: 3,
    style: {
      stroke: '#fff',
      strokeWidth: 2,
    },
  },
  mid_point: {
    point: {
      type: 'PointLayer',
      shape: 'circle',
      color: '#fbb03b',
      size: 3,
      style: {},
    },
  },
};

4.5 KiB Raw Blame History Unescape Escape

使用

参数