L7Draw 是基于蚂蚁集团 AntV 团队地理空间数据可视化引擎 L7 的地理绘制工具库，专注于在地图上绘制点、线、面等一系列地理数据，让开发者和使用者都能够高效、方便、灵活地使用地图绘制。
🗺️ 导读
随着业务发展对线上线下一体化的要求越来越高，POI、AOI 数据的精准采集，编辑上报和成为地图应用中必不可少的环节。通常我们使用经纬度数据来记录点位的地理位置，而在只看经纬度数据的情况下，用户是无法直观感受其表示的具体空间位置的，更谈不对其进行修改编辑。此时，一款能够在地图上直观的的查看、编辑地理数据的可视化绘制工具无疑能为业务带来巨大的提效。
L7Draw 是一款轻量高效的地理数据可视化编辑器，在 3.0 升级后功能更加强大，为用户带来更加丝滑流畅交互体验。
🎉 功能
L7Draw 3.0 内置了五种业务中最常用的绘制类型，通过丰富的配置能力支持用户高自由度的自定义绘制交互，更详细的功能介绍可见 L7Draw 官网。
✏️ 绘制
L7Draw 当前支持五种常见的绘制能力：
- 点：支持绘制 坐标点，支持对坐标点进行拖拽位移。
- 线：支持绘制 坐标结点连成的轨迹线，可以配合测距功能一起使用，支持对单个结点或整个线进行拖拽位移。
- 面：支持绘制 坐标结点，结点首尾闭合而成的面/多边形，可以配合测距和侧面积功能一起使用，支持对结点或整个面进行拖拽位移。
- 矩形：支持绘制矩形，通过绘制 两个坐标作为矩形的对角线生成矩形，支持对结点或整个面进行拖拽位移。
- 圆：支持绘制圆形，通过绘制 两个坐标分别作为圆心和圆边界上的点生成圆形，支持对结点或整个面进行拖拽位移。
|
|
|
| 绘制点 | 绘制线 |
|
|
|
| 绘制面 | 绘制矩形 |
|
|
|
| 绘制圆 |
📏 测量
在部分业务场景下，使用者在地图上进行绘制的过程中，需要实时了解到当前绘制物的对应到现实中的物理信息。L7Draw 提供了配置，支持在绘制过程中对格式化后物理信息的文本进行实时展示和更新：
|
|
|
| 展示距离 | 展示面积 |
🕹️ 样式
当前 L7 的底图 高德地图 和 Mapbox 地图 均支持样式切换，为了让用户不在不同的地图样式下，也能清晰的辨认绘制图层，L7Draw 支持对当前绘制时的展示的：点、线、面、中点、虚线、文本对应的默认图层样式进行自定义深覆盖。后期会在 L7Draw 若干主题样式，以适应不同地图样式下的图层展示效果。
|
|
|
| 紫色主题 | 图片标注 |
⌨️ 快捷键
为了让用户在绘制体验更加高效、便捷，我们提供了几组快捷键功能，让 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 <div>
<button onClick={enable}>开始绘制</button>
<button onClick={disable}>结束绘制</button>
</div>
}
- DrawControl
在常见的地图绘制场景中，绘制开关的 UI 往往是悬停在地图上的 Control ，因此我们封装了绘制控制条的 React 版本，每种类型的绘制都暴露出开关和配置，方便用户在地图业务中接入地图绘制能力。
🌊 使用场景
遥感绘制场景
在遥感地图场景中，由于数据量较大，导致无法直接将全量数据直接在地图上进行可视化展示。因此一般会先在地图上框选分析区域，然后将区域围栏数据转交至后台进行筛选，最终将围栏内的数据进行可视化呈现。
交通线路定制场景
在交通线路定制场景中，线路是通过用户在地图上绘制结点相连而成的，同时需要标注出路线的长度、走向、起终点等信息，方便使用者在定制线路过程中更加快速的决策。
💻 使用
安装
npm安装
npm install -S @antv/l7-draw
PS：在使用 L7Draw 之前，需要保证项目中已经有安装了 L7 。
代码
在初始化 L7 的 Scene 实例之后，只需要将Scene实例传入绘制类 Draw 的构造器中，同时传入相应的配置参数，即可完成绘制类 Draw 的实例化操作。
// ----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----
<div id="map"></div>;
更多 L7Draw 的使用案例可以进入官网示例了解更多。
🌏 结语
L7Draw 3.0 是覆盖当前地图数据绘制所有常见需求的重构版本，在能力、交互体验上有了大幅度的提升！
欢迎有使用过 L7Draw 的同学可以尝试将版本升级至 V3 版本，同时也欢迎更多的同学在使用的过程中提出自己的想法和建议，共同推进 L7Draw 在地图绘制领域的能力。
