L7Draw

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

文档 · 示例

🔨 工具

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

📦 安装

npm install -S @antv/l7-draw

🔨 使用

通过 NPM 引入

// ----js-----import{GaodeMap,Scene}from'@antv/l7';import{DrawEvent,DrawPoint}from'@antv/l7-draw';constscene=newScene({id: 'map',map: newGaodeMap({}),});scene.on('loaded',()=>{// 实例化 Drawconstdraw=newDrawPoint(scene,{editable: false,// Draw 配置});// 调用 Draw 上的方法draw.enable();// 监听 Draw 的事件draw.on(DrawEvent.Add,(newPoint)=>{console.log(newPoint);});});// ----html----<divid="map"></div>;

通过 CDN 引入

<!-- 引入依赖包 --><scriptsrc="https://unpkg.com/@antv/l7"></script><scriptsrc="https://unpkg.com/@antv/l7-draw"></script><script>constscene=newL7.Scene({id: 'map',map: newL7.GaodeMap({style: 'dark',center: [104.288144,31.239692],zoom: 4.4,}),});scene.on('loaded',()=>{// 通过 L7.Draw.*** 访问constdraw=newL7.Draw.DrawPoint(scene,{});draw.enable();});</script>

⌨️ 本地开发

# 安装依赖
npm install
# 运行页面
npm run start
# 打包
npm run build

💬 答疑

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

📋 待办

• 新增 Marker 绘制类型
• 新增 文本 绘制类型
• 新增支持编辑挖孔 Polygon
• 新增 两个 Polygon 交/并/异或/差集（合并/挖孔/切割）
• 优化 DrawControl Icon

🤝 如何贡献

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

📖 许可证

MIT@AntV.