Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@antv/l7-draw

antvis2.9kMIT3.1.5TypeScript support: included

A drawing package for L7

antv, l7, draw, l7 draw

readme

L7Draw

基于 L7 封装的地理绘制库,支持在地图上通过单击、拖拽等方式绘制点、线、面的 GeoJSON 的数据

npm Version npm Download

文档 · 示例

🔨 工具

基于 L7Draw 的面向 GeoJSON 编辑工具 L7Editor 已上线,欢迎尝鲜~。

📦 安装

npm install -S @antv/l7-draw

🔨 使用

通过 NPM 引入

`tsx | pure // ----js----- import { GaodeMap, Scene } from '@antv/l7'; import { DrawEvent, DrawPoint } 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----

; ```

通过 CDN 引入

`html | pure

<script src="https://unpkg.com/@antv/l7"></script> <script src="https://unpkg.com/@antv/l7-draw"></script> <script> const scene = new L7.Scene({ id: 'map', map: new L7.GaodeMap({ style: 'dark', center: [104.288144, 31.239692], zoom: 4.4, }), }); scene.on('loaded', () => { // 通过 L7.Draw.*** 访问 const draw = new L7.Draw.DrawPoint(scene, {}); draw.enable(); }); </script>

## ⌨️ 本地开发

```bash
# 安装依赖
npm install

# 运行页面
npm run start

# 打包
npm run build

💬 答疑

在使用 L7Draw 过程中,若有疑惑无法在文档中解决的可以扫码加入 L7 官方答疑群。

📋 待办

  • <input disabled="" type="checkbox"> 新增 Marker 绘制类型
  • <input disabled="" type="checkbox"> 新增 文本 绘制类型
  • <input disabled="" type="checkbox"> 新增支持编辑挖孔 Polygon
  • <input disabled="" type="checkbox"> 新增 两个 Polygon 交/并/异或/差集(合并/挖孔/切割)
  • <input disabled="" type="checkbox"> 优化 DrawControl Icon

🤝 如何贡献

如果您在使用的过程中碰到问题,可以先通过 issues 看看有没有类似的 bug 或者建议。

📖 许可证

MIT@AntV.

changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.