> L7Draw 是基于蚂蚁集团 [AntV](https://antv.vision/) 团队地理空间数据可视化引擎 [L7](https://l7.antv.vision/zh) 的地理绘制工具库，专注于在地图上绘制点、线、面等一系列地理数据，让开发者和使用者都能够高效、方便、灵活地使用地图绘制。 ## 🗺️ 导读随着业务发展对线上线下一体化的要求越来越高，POI、AOI 数据的精准采集，编辑上报和成为地图应用中必不可少的环节。通常我们使用经纬度数据来记录点位的地理位置，而在只看经纬度数据的情况下，用户是无法直观感受其表示的具体空间位置的，更谈不对其进行修改编辑。此时，一款能够在地图上直观的的查看、编辑地理数据的可视化绘制工具无疑能为业务带来巨大的提效。 L7Draw 是一款轻量高效的地理数据可视化编辑器，在 3.0 升级后功能更加强大，为用户带来更加丝滑流畅交互体验。 ## 🎉 功能 L7Draw 3.0 内置了五种业务中最常用的绘制类型，通过丰富的配置能力支持用户高自由度的自定义绘制交互，更详细的功能介绍可见 [L7Draw 官网](https://antv.vision/L7Draw/docs/draw/point)。 ### ✏️ 绘制 L7Draw 当前支持五种常见的绘制能力： - [点](https://antv.vision/L7Draw/docs/draw/point)：支持绘制 **坐标点**，支持对坐标点进行拖拽位移。 - [线](https://antv.vision/L7Draw/docs/draw/line)：支持绘制 **坐标结点连成的轨迹线**，可以配合测距功能一起使用，支持对单个结点或整个线进行拖拽位移。 - [面](https://antv.vision/L7Draw/docs/draw/polygon)：支持绘制 **坐标结点，结点首尾闭合而成的面/多边形**，可以配合测距和侧面积功能一起使用，支持对结点或整个面进行拖拽位移。 - [矩形](https://antv.vision/L7Draw/docs/draw/rect)：支持绘制矩形，通过绘制 **两个坐标作为矩形的对角线生成矩形**，支持对结点或整个面进行拖拽位移。 - [圆](https://antv.vision/L7Draw/docs/draw/circle)：支持绘制圆形，通过绘制 **两个坐标分别作为圆心和圆边界上的点生成圆形**，支持对结点或整个面进行拖拽位移。


绘制点	绘制线

绘制面	绘制矩形

绘制圆

### 📏 测量在部分业务场景下，使用者在地图上进行绘制的过程中，需要实时了解到当前绘制物的对应到现实中的物理信息。L7Draw 提供了配置，支持在绘制过程中对格式化后物理信息的文本进行实时展示和更新： - [距离](https://antv.vision/L7Draw/docs/super/distance)：可以展示绘制物中线段中的点两两之间的**真实距离**，也可以切换为展示线段的总长度。 - [面积](https://antv.vision/L7Draw/docs/super/area)：可以展示绘制物中面的**真实面积**。


展示距离	展示面积

### 🕹️ 样式当前 L7 的底图 **高德地图** 和 **Mapbox 地图** 均支持样式切换，为了让用户不在不同的地图样式下，也能清晰的辨认绘制图层，L7Draw 支持对当前绘制时的展示的：点、线、面、中点、虚线、文本对应的默认图层样式**进行自定义深覆盖**。*后期会在 L7Draw 若干主题样式，以适应不同地图样式下的图层展示效果*。


紫色主题	图片标注

### ⌨️ [快捷键](https://antv.vision/L7Draw/docs/super/keyboard) 为了让用户在绘制体验更加高效、便捷，我们提供了几组快捷键功能，让 L7Draw 的操作体验更 editor。 - ↩️ 回退：回退至上一次编辑状态，默认按键为：Ctrl/Cmd+Z。 - ↪️ 重做：撤销上一次回退操作，默认按键为：Ctrl/Cmd+Shift+Z。 - ❌ 删除：删除选中的绘制物，默认按键为：Backspace/Delete。 ### 🧩 组件由于 L7Draw 库面向的是 JavaScript 的库，因此其可以在不同的 MVVM 框架中使用，但是需要一定的开发成本。因此我们提供了 React 版本相应的绘制组件和 Hook，让开发者使用 L7Draw 的效率进一步提升。 - **useDraw** 为了提升开发者在 React 项目中接入地图绘制能力的门槛和效率，我们提供了对接原子化 Draw 实例的 Hook 方法：useDraw ，开发者可以使用该 Hook 快速创建 Draw 实例并实时获取绘制数据和方法。 ``` import React from 'react'; import { useDraw } from '@antv/larkmap'; export default function DrawGroup() { const { draw, drawData, enable, disable } = useDraw({ type: 'point', options: { editable: false, }, }); return

} ``` - **DrawControl** 在常见的地图绘制场景中，绘制开关的 UI 往往是悬停在地图上的 Control ，因此我们封装了绘制控制条的 React 版本，每种类型的绘制都暴露出开关和配置，方便用户在地图业务中接入地图绘制能力。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0eb12332d6d84728b16db7ac0ee79159~tplv-k3u1fbpfcp-zoom-1.image) ## 🌊 使用场景 ### 遥感绘制场景在遥感地图场景中，由于数据量较大，导致无法直接将全量数据直接在地图上进行可视化展示。因此一般会先在地图上**框选分析区域**，然后将区域围栏数据转交至后台进行筛选，最终将围栏内的数据进行可视化呈现。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/273e4b700f924a08b2de300e9374bfe8~tplv-k3u1fbpfcp-zoom-1.image) ### 交通线路定制场景在交通线路定制场景中，线路是通过用户在地图上绘制结点相连而成的，同时需要标注出路线的长度、走向、起终点等信息，方便使用者在定制线路过程中更加快速的决策。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/55be831393e84e8fa72f0104e8220ff7~tplv-k3u1fbpfcp-zoom-1.image) ## 💻 使用 ### 安装 npm安装 ```bash npm install -S @antv/l7-draw ``` PS：在使用 L7Draw 之前，需要保证项目中已经有安装了 [L7](https://www.npmjs.com/package/@antv/l7) 。 ### 代码在初始化 L7 的 Scene 实例之后，只需要将Scene实例传入绘制类 Draw 的构造器中，同时传入相应的配置参数，即可完成绘制类 Draw 的实例化操作。 ```tsx // ----js----- import { Scene, GaodeMap } from "@antv/l7"; import { DrawPoint, DrawEvent } from "@antv/l7-draw"; const scene = new Scene({ id: "map", map: new GaodeMap({}) }); scene.on("loaded", () => { // 实例化 Draw const draw = new DrawPoint(scene, { editable: false // Draw 配置 }); // 调用 Draw 上的方法 draw.enable(); // 监听 Draw 的事件 draw.on(DrawEvent.add, (newPoint) => { console.log(newPoint); }); }); // ----html----

; ``` 更多 L7Draw 的使用案例可以进入[官网示例](https://antv.vision/L7Draw/example/point/start)了解更多。 ## 🌏 结语 L7Draw 3.0 是覆盖当前地图数据绘制所有常见需求的重构版本，在能力、交互体验上有了大幅度的提升！欢迎有使用过 L7Draw 的同学可以尝试将版本升级至 V3 版本，同时也欢迎更多的同学在使用的过程中提出自己的想法和建议，共同推进 L7Draw 在地图绘制领域的能力。 - 官方文档地址：[L7Draw 文档](https://antv.vision/L7Draw/) - Github 地址：[L7Draw 仓库](https://github.com/antvis/L7Draw) - 钉钉答疑群： - - 群号：32292906 - 群二维码：

## 🎗️ 附录 - [L7 官网](https://l7.antv.vision/zh/) - [L7 Github](https://github.com/antvis/L7) - [L7Plot 官网](https://l7plot.antv.vision/zh/) - [L7Plot Github](https://github.com/antvis/L7Plot)