95 |
96 | ## 📋 待办
97 |
98 | - [ ] 新增 Marker 绘制类型
99 | - [ ] 新增 文本 绘制类型
100 | - [ ] 新增支持编辑挖孔 Polygon
101 | - [ ] 新增 两个 Polygon 交/并/异或/差集（合并/挖孔/切割）
102 | - [ ] 优化 DrawControl Icon
103 |
104 | ## 🤝 如何贡献
105 |
106 | 如果您在使用的过程中碰到问题，可以先通过 [issues](https://github.com/antvis/l7-draw/issues) 看看有没有类似的 bug 或者建议。
107 |
108 | ## 📖 许可证
109 |
110 | MIT@[AntV](https://github.com/antvis).
111 |
--------------------------------------------------------------------------------
/docs/CNAME:
--------------------------------------------------------------------------------
1 | l7draw.antv.vision
2 |
--------------------------------------------------------------------------------
/docs/docs/event.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 事件
3 | hide: true
4 | ---
5 |
6 | | 事件名 | 说明 | 类型 |
7 | | ---------------------------------------- | ------------------------------------------------------ | ---------------------------------------------------------------------------- |
8 | | DrawEvent.Init | 'init' | Draw 初始化完成的事件 | `function(drawer: Draw)` |
9 | | DrawEvent.Destroy | 'destroy' | Draw 完成销毁的事件 | `function(drawer: Draw)` |
10 | | DrawEvent.Enable | 'enable' | 启用绘制的事件 | `function(drawer: Draw)` |
11 | | DrawEvent.Disable | 'disable' | 禁用绘制的事件 | `function(drawer: Draw)` |
12 | | DrawEvent.Clear | 'clear' | 清空数据的事件 | `function(drawer: Draw)` |
13 | | DrawEvent.AddNode | 'addNode' | 添加结点 | `(newNode: Feature,editFeature: Feature, featureList: Feature[]) => void` |
14 | | DrawEvent.RemoveNode | 'removeNode' | 删除结点 | `(removeNode: Feature,editFeature: Feature, featureList: Feature[]) => void` |
15 | | DrawEvent.Add | 'add' | 新增的事件 | `function(newFeature: Feature, featureList: Feature[])` |
16 | | DrawEvent.Edit | 'edit' | 编辑(位移或节点发生变更)的事件 | `function(editFeature: Feature, featureList: Feature[])` |
17 | | DrawEvent.Remove | 'remove' | 删除的事件 | `function(deleteFeature: Feature, featureList: Feature[])` |
18 | | DrawEvent.DragStart | 'dragStart' | 开始拖拽的事件 | `function(dragFeature: Feature, featureList: Feature[])` |
19 | | DrawEvent.Dragging | 'dragging' | 拖拽中的事件 | `function(dragFeature: Feature, featureList: Feature[])` |
20 | | DrawEvent.DragEnd | 'dragEnd' | 拖拽结束的事件 | `function(dragFeature: Feature, featureList: Feature[])` |
21 | | DrawEvent.Change | 'change' | 绘制数据发生变更后的事件（包含以上绘制数据变动的事件） | `function(featureList: Feature[])` |
22 | | DrawEvent.Select | 'select' | 当前选中元素发生改变的事件 | `function(selectFeature: Feature | null)` |
23 |
--------------------------------------------------------------------------------
/docs/docs/pointEvent.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 事件
3 | hide: true
4 | ---
5 |
6 | | 事件名 | 说明 | 类型 |
7 | | -------------------------------------- | ------------------------------------------------------ | ---------------------------------------------------------- |
8 | | DrawEvent.Init | 'init' | Draw 初始化完成的事件 | `function(drawer: Draw)` |
9 | | DrawEvent.Destroy | 'destroy' | Draw 完成销毁的事件 | `function(drawer: Draw)` |
10 | | DrawEvent.Enable | 'enable' | 启用绘制的事件 | `function(drawer: Draw)` |
11 | | DrawEvent.Disable | 'disable' | 禁用绘制的事件 | `function(drawer: Draw)` |
12 | | DrawEvent.Clear | 'clear' | 清空数据的事件 | `function(drawer: Draw)` |
13 | | DrawEvent.Add | 'add' | 新增的事件 | `function(newFeature: Feature, featureList: Feature[])` |
14 | | DrawEvent.Edit | 'edit' | 编辑(位移或节点发生变更)的事件 | `function(editFeature: Feature, featureList: Feature[])` |
15 | | DrawEvent.Remove | 'remove' | 删除的事件 | `function(deleteFeature: Feature, featureList: Feature[])` |
16 | | DrawEvent.DragStart | 'dragStart' | 开始拖拽的事件 | `function(dragFeature: Feature, featureList: Feature[])` |
17 | | DrawEvent.Dragging | 'dragging' | 拖拽中的事件 | `function(dragFeature: Feature, featureList: Feature[])` |
18 | | DrawEvent.DragEnd | 'dragEnd' | 拖拽结束的事件 | `function(dragFeature: Feature, featureList: Feature[])` |
19 | | DrawEvent.Change | 'change' | 绘制数据发生变更后的事件（包含以上绘制数据变动的事件） | `function(featureList: Feature[])` |
20 |
--------------------------------------------------------------------------------
/docs/docs/super/adsorb.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 吸附能力
3 | order: 6
4 | group:
5 | title: 高级
6 | order: 2
7 | path: /super
8 | ---
9 |
10 | ## 说明
11 |
12 | 在 `DrawLine` 和 `DrawPolygon` 中，在**绘制和拖拽结点**的过程中，当结点位置距离目标吸附物的点或线指定像素值内时，会将当前操作结点自动吸附到吸附物的点或线上，若开启吸附时会自动计算各个 `Feature` 的 `bbox` 用于吸附的计算性能提升。
13 |
14 | 
15 |
16 | ## 示例
17 |
18 | ```tsx | pure
19 | import { DrawPolygon } from '@antv/l7-draw';
20 |
21 | const adsorbPolygon = {
22 | type: 'Feature',
23 | properties: {},
24 | geometry: {
25 | type: 'Polygon',
26 | coordinates: [
27 | [
28 | [120.1519775390625, 30.263663574301724],
29 | [120.13240814208984, 30.228963070192805],
30 | [120.15695571899413, 30.252691235553513],
31 | [120.1519775390625, 30.263663574301724],
32 | ],
33 | ],
34 | },
35 | };
36 |
37 | const drawer = new DrawPolygon(scene, {
38 | adsorbOptions: {
39 | // 指定吸附围栏
40 | data: [adsorbPolygon],
41 | // data: () => [adsorbPolygon] // 通过函数获取吸附物
42 | // data: 'drawData' // 开启时的默认吸附物, 吸附物为当前绘制的图形
43 | },
44 | // adsorbOptions: false // 默认，关闭吸附
45 | });
46 | ```
47 |
48 | ## 配置
49 |
50 | | 名称 | 说明 | 类型 | 默认值 |
51 | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ------------ |
52 | | data | 吸附对象，传入 `'drawData'` 表示吸附物为已有的绘制物，传入 `'allDrawData'` 表示吸附物为所有 Draw 实例的绘制物，也可以传入绘制物的 `GeoJSON` | `'drawData'` | `'allDrawData'`|`Feature[]`|`() => Feature[]` | `'drawData'` |
53 | | pointAdsorbPixel | 被吸附物上点吸附的像素值，当值 ≤ 0 时不吸附点 | `number` | `12` |
54 | | lineAdsorbPixel | 被吸附物上线吸附的像素值，当值 ≤ 0 时不吸附线 | `number` | `10` |
55 |
--------------------------------------------------------------------------------
/docs/docs/super/area.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 面积
3 | order: 3
4 | group:
5 | title: 高级
6 | order: 2
7 | path: /super
8 | ---
9 |
10 | ## 说明
11 |
12 | 用于展示面真实的面积
13 |
14 | 
15 |
16 | ## 示例
17 |
18 | 距离文本配置是在各个 Draw 的 areaOptions 字段来进行配置的
19 |
20 | ```tsx | pure
21 | import { DrawPoint } from '@antv/l7-draw';
22 |
23 | const drawer = new DrawPoint(scene, {
24 | areaOptions: {
25 | format: (squareMeters: number, polygonFeature: Feature
15 |
16 | ## 示例
17 |
18 | 距离文本配置是在各个 Draw 的 distanceOptions 字段来进行配置的
19 |
20 | ```tsx | pure
21 | import { DrawPoint } from '@antv/l7-draw';
22 |
23 | const drawer = new DrawPoint(scene, {
24 | distanceOptions: {
25 | showTotalDistance: false,
26 | showDashDistance: true,
27 | format: (meters, points: Feature
33 |
34 |
35 | );
36 | };
37 |
38 | export default Demo;
39 |
--------------------------------------------------------------------------------
/docs/example/circle/autoActive.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 关闭自动激活
3 | order: 3
4 | group:
5 | path: /circle
6 | title: 绘制圆
7 | order: 5
8 | ---
9 |
10 |
33 |
34 |
35 | );
36 | };
37 |
38 | export default Demo;
39 |
--------------------------------------------------------------------------------
/docs/example/circle/createByDrag.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 通过拖拽创建
3 | order: 2
4 | group:
5 | path: /circle
6 | title: 绘制圆
7 | order: 5
8 | ---
9 |
10 | 注意：配置 `trigger: 'drag'` 之后，只要 Drawer 在绘制状态下，就无法拖拽地图。如需开启拖拽，需要将调用 Drawer 的 disable 方法
11 |
12 |
33 |
34 |
35 | );
36 | };
37 |
38 | export default Demo;
39 |
--------------------------------------------------------------------------------
/docs/example/circle/edges.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 绘制正多边形
3 | order: 3
4 | group:
5 | path: /circle
6 | title: 绘制圆
7 | order: 5
8 | ---
9 |
10 |
32 |
33 |
34 | );
35 | };
36 |
37 | export default Demo;
38 |
--------------------------------------------------------------------------------
/docs/example/circle/editable.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 是否支持编辑
3 | order: 4
4 | group:
5 | path: /circle
6 | title: 绘制圆
7 | order: 5
8 | ---
9 |
10 |
33 |
34 |
35 | );
36 | };
37 |
38 | export default Demo;
39 |
--------------------------------------------------------------------------------
/docs/example/circle/event.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 监听绘制事件
3 | order: 7
4 | group:
5 | path: /circle
6 | title: 绘制圆
7 | order: 5
8 | ---
9 |
10 |
65 |
66 |
67 | );
68 | };
69 |
70 | export default Demo;
71 |
--------------------------------------------------------------------------------
/docs/example/circle/initialData.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 初始化数据
3 | order: 2
4 | group:
5 | path: /circle
6 | title: 绘制圆
7 | order: 5
8 | ---
9 |
10 |
41 |
42 |
43 | );
44 | };
45 |
46 | export default Demo;
47 |
--------------------------------------------------------------------------------
/docs/example/circle/multiple.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 禁止绘制多个
3 | order: 5
4 | group:
5 | path: /circle
6 | title: 绘制圆
7 | order: 5
8 | ---
9 |
10 |
32 |
33 |
34 | );
35 | };
36 |
37 | export default Demo;
38 |
--------------------------------------------------------------------------------
/docs/example/circle/start.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 快速开始
3 | order: 1
4 | group:
5 | path: /circle
6 | title: 绘制圆
7 | order: 5
8 | ---
9 |
10 |
32 |
39 | );
40 | };
41 |
42 | export default Demo;
43 |
--------------------------------------------------------------------------------
/docs/example/common/adsorb.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 吸附
3 | order: 2
4 | group:
5 | path: /common
6 | title: 通用配置
7 | order: 7
8 | ---
9 |
10 |
33 |
34 |
35 |
36 |
37 |
38 |
54 |
55 |
63 | );
64 | };
65 |
66 | export default Demo;
67 |
--------------------------------------------------------------------------------
/docs/example/common/helper.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 绘制提示
3 | order: 1
4 | group:
5 | path: /common
6 | title: 通用配置
7 | order: 7
8 | ---
9 |
10 |
56 | {JSON.stringify(
57 | polygonList.map((item) => item.bbox),
58 | null,
59 | 2,
60 | )}
61 |
62 | 双击结束绘制
';
26 |
27 | // @ts-ignore
28 | const drawer = new DrawPolygon(scene, {
29 | // 绘制提示文案配置
30 | helper: {
31 | // 可以替换默认提示文案
32 | draw: '绘制第一个节点',
33 | drawContinue: '继续绘制节点',
34 |
35 | // 可以插入 DOM 元素
36 | drawFinish: container.firstElementChild ?? undefined,
37 | },
38 | // 弹框相关配置
39 | popup: {
40 | theme: 'dark',
41 | },
42 |
43 | // 关闭绘制提示
44 | // helper: false,
45 | });
46 | setPolygonDrawer(drawer);
47 | drawer.enable();
48 | });
49 | }, []);
50 |
51 | return (
52 |
53 |
65 | );
66 | };
67 |
68 | export default Demo;
69 |
--------------------------------------------------------------------------------
/docs/example/control/add.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 添加/移除 Control
3 | order: 2
4 | group:
5 | path: /control
6 | title: 绘制控制条
7 | order: 6
8 | ---
9 |
10 |
54 |
62 |
63 |
64 |
54 |
62 | );
63 | };
64 |
65 | export default Demo;
66 |
--------------------------------------------------------------------------------
/docs/example/control/common.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 通用 Draw 配置
3 | order: 3
4 | group:
5 | path: /control
6 | title: 绘制控制条
7 | order: 6
8 | ---
9 |
10 |
55 |
58 |
59 |
60 |
61 |
68 |
69 |
70 | );
71 | };
72 |
73 | export default Demo;
74 |
--------------------------------------------------------------------------------
/docs/example/control/custom.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 自定义按钮
3 | order: 4
4 | group:
5 | path: /control
6 | title: 绘制控制条
7 | order: 6
8 | ---
9 |
10 |
45 |
46 |
47 | );
48 | };
49 |
50 | export default Demo;
51 |
--------------------------------------------------------------------------------
/docs/example/control/draw.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 配置展示按钮
3 | order: 4
4 | group:
5 | path: /control
6 | title: 绘制控制条
7 | order: 6
8 | ---
9 |
10 |
49 |
50 |
51 | );
52 | };
53 |
54 | export default Demo;
55 |
--------------------------------------------------------------------------------
/docs/example/control/enable-by-click.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 通过点击元素激活
3 | order: 5
4 | group:
5 | path: /control
6 | title: 绘制控制条
7 | order: 6
8 | ---
9 |
10 |
50 |
51 |
52 | );
53 | };
54 |
55 | export default Demo;
56 |
--------------------------------------------------------------------------------
/docs/example/control/event.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 监听事件
3 | order: 10
4 | group:
5 | path: /control
6 | title: 绘制控制条
7 | order: 6
8 | ---
9 |
10 |
46 |
47 |
48 | );
49 | };
50 |
51 | export default Demo;
52 |
--------------------------------------------------------------------------------
/docs/example/control/start.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 快速使用
3 | order: 1
4 | group:
5 | path: /control
6 | title: 绘制控制条
7 | order: 6
8 | ---
9 |
10 |
37 |
38 |
39 | );
40 | };
41 |
42 | export default Demo;
43 |
--------------------------------------------------------------------------------
/docs/example/line/adsorb.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 吸附能力
3 | order: 6
4 | group:
5 | path: /line
6 | title: 绘制线
7 | order: 2
8 | ---
9 |
10 |
32 |
33 |
34 | );
35 | };
36 |
37 | export default Demo;
38 |
--------------------------------------------------------------------------------
/docs/example/line/autoActive.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 关闭自动激活
3 | order: 5
4 | group:
5 | path: /line
6 | title: 绘制线
7 | order: 2
8 | ---
9 |
10 |
33 |
34 |
35 | );
36 | };
37 |
38 | export default Demo;
39 |
--------------------------------------------------------------------------------
/docs/example/line/createByDrag.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 通过拖拽创建
3 | order: 2
4 | group:
5 | path: /line
6 | title: 绘制线
7 | order: 2
8 | ---
9 |
10 | 注意：配置 `trigger: 'drag'` 之后，只要 Drawer 在绘制状态下，就无法拖拽地图。如需开启拖拽，需要将调用 Drawer 的 disable 方法
11 |
12 |
37 |
38 |
39 | );
40 | };
41 |
42 | export default Demo;
43 |
--------------------------------------------------------------------------------
/docs/example/line/distance.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 展示距离
3 | order: 3
4 | group:
5 | path: /line
6 | title: 绘制线
7 | order: 2
8 | ---
9 |
10 |
32 |
33 |
34 | );
35 | };
36 |
37 | export default Demo;
38 |
--------------------------------------------------------------------------------
/docs/example/line/editable.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 禁用编辑
3 | order: 6
4 | group:
5 | path: /line
6 | title: 绘制线
7 | order: 2
8 | ---
9 |
10 |
34 |
35 |
36 | );
37 | };
38 |
39 | export default Demo;
40 |
--------------------------------------------------------------------------------
/docs/example/line/event.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 监听绘制事件
3 | order: 7
4 | group:
5 | path: /line
6 | title: 绘制线
7 | order: 2
8 | ---
9 |
10 |
75 |
76 |
77 | );
78 | };
79 |
80 | export default Demo;
81 |
--------------------------------------------------------------------------------
/docs/example/line/initialData.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 初始化数据
3 | order: 2
4 | group:
5 | path: /line
6 | title: 绘制线
7 | order: 2
8 | ---
9 |
10 |
35 |
36 |
37 | );
38 | };
39 |
40 | export default Demo;
41 |
--------------------------------------------------------------------------------
/docs/example/line/initialData1.tsx:
--------------------------------------------------------------------------------
1 | import { Scene } from '@antv/l7';
2 | import { DrawEvent, DrawLine } from '@antv/l7-draw';
3 | import { GaodeMap } from '@antv/l7-maps';
4 | import React, { useEffect, useState } from 'react';
5 | import { multiLineList } from './mock';
6 |
7 | const id = String(Math.random());
8 |
9 | const Demo: React.FC = () => {
10 | const [lineDrawer, setLineDrawer] = useState
35 |
36 |
37 | );
38 | };
39 |
40 | export default Demo;
41 |
--------------------------------------------------------------------------------
/docs/example/line/midPoint.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 禁用中点
3 | order: 4
4 | group:
5 | path: /line
6 | title: 绘制线
7 | order: 2
8 | ---
9 |
10 |
42 |
43 |
44 | );
45 | };
46 |
47 | export default Demo;
48 |
--------------------------------------------------------------------------------
/docs/example/line/mock.ts:
--------------------------------------------------------------------------------
1 | import { Feature, LineString, MultiLineString } from '@turf/turf';
2 |
3 | export const lineList: Feature
32 |
33 |
34 | );
35 | };
36 |
37 | export default Demo;
38 |
--------------------------------------------------------------------------------
/docs/example/line/start.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 快速开始
3 | order: 1
4 | group:
5 | path: /line
6 | title: 绘制线
7 | order: 2
8 | ---
9 |
10 |
32 |
39 | );
40 | };
41 |
42 | export default Demo;
43 |
--------------------------------------------------------------------------------
/docs/example/map/baidu.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 百度地图
3 | order: 3
4 | group:
5 | path: /map
6 | title: 底图
7 | order: 8
8 | ---
9 |
10 |
33 |
34 |
35 |
36 |
37 |
38 |
30 |
31 |
32 | );
33 | };
34 |
35 | export default Demo;
36 |
--------------------------------------------------------------------------------
/docs/example/map/gaode.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 高德地图
3 | order: 1
4 | group:
5 | path: /map
6 | title: 底图
7 | order: 8
8 | ---
9 |
10 |
27 |
28 |
29 | );
30 | };
31 |
32 | export default Demo;
33 |
--------------------------------------------------------------------------------
/docs/example/map/mapbox.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Mapbox
3 | order: 2
4 | group:
5 | path: /map
6 | title: 底图
7 | order: 8
8 | ---
9 |
10 |
29 |
30 |
31 | );
32 | };
33 |
34 | export default Demo;
35 |
--------------------------------------------------------------------------------
/docs/example/map/tencent.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 腾讯地图
3 | order: 4
4 | group:
5 | path: /map
6 | title: 底图
7 | order: 8
8 | ---
9 |
10 |
27 |
28 |
29 | );
30 | };
31 |
32 | export default Demo;
33 |
--------------------------------------------------------------------------------
/docs/example/map/tianditu.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 天地图
3 | order: 5
4 | group:
5 | path: /map
6 | title: 底图
7 | order: 8
8 | ---
9 |
10 |
26 |
27 |
28 | );
29 | };
30 |
31 | export default Demo;
32 |
--------------------------------------------------------------------------------
/docs/example/point/autoActive.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 关闭自动激活
3 | order: 5
4 | group:
5 | path: /point
6 | title: 绘制点
7 | order: 1
8 | ---
9 |
10 |
33 |
34 |
35 | );
36 | };
37 |
38 | export default Demo;
39 |
--------------------------------------------------------------------------------
/docs/example/point/editable.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 禁用编辑
3 | order: 6
4 | group:
5 | path: /point
6 | title: 绘制点
7 | order: 1
8 | ---
9 |
10 |
34 |
35 |
36 | );
37 | };
38 |
39 | export default Demo;
40 |
--------------------------------------------------------------------------------
/docs/example/point/event.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 监听绘制事件
3 | order: 7
4 | group:
5 | path: /point
6 | title: 绘制点
7 | order: 1
8 | ---
9 |
10 |
65 |
66 |
67 | );
68 | };
69 |
70 | export default Demo;
71 |
--------------------------------------------------------------------------------
/docs/example/point/image.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 使用图片
3 | order: 3
4 | group:
5 | path: /point
6 | title: 绘制点
7 | order: 1
8 | ---
9 |
10 |
43 |
44 |
45 | );
46 | };
47 |
48 | export default Demo;
49 |
--------------------------------------------------------------------------------
/docs/example/point/initialData.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 初始化数据
3 | order: 2
4 | group:
5 | path: /point
6 | title: 绘制点
7 | order: 1
8 | ---
9 |
10 |
33 |
34 |
35 | );
36 | };
37 |
38 | export default Demo;
39 |
--------------------------------------------------------------------------------
/docs/example/point/initialData1.tsx:
--------------------------------------------------------------------------------
1 | import { Scene } from '@antv/l7';
2 | import { DrawEvent, DrawPoint } from '@antv/l7-draw';
3 | import { GaodeMap } from '@antv/l7-maps';
4 | import React, { useEffect, useState } from 'react';
5 | import { multiPointList } from './mock';
6 |
7 | const id = String(Math.random());
8 |
9 | const Demo: React.FC = () => {
10 | const [pointDrawer, setPointDrawer] = useState
32 |
33 |
34 | );
35 | };
36 |
37 | export default Demo;
38 |
--------------------------------------------------------------------------------
/docs/example/point/start.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 快速开始
3 | order: 1
4 | group:
5 | path: /point
6 | title: 绘制点
7 | order: 1
8 | ---
9 |
10 |
31 |
38 | );
39 | };
40 |
41 | export default Demo;
42 |
--------------------------------------------------------------------------------
/docs/example/point/style.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 自定义样式
3 | order: 4
4 | group:
5 | path: /point
6 | title: 绘制点
7 | order: 1
8 | ---
9 |
10 |
32 |
33 |
34 |
35 |
36 |
37 |
55 |
56 |
57 | );
58 | };
59 |
60 | export default Demo;
61 |
--------------------------------------------------------------------------------
/docs/example/polygon/adsorb.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 吸附能力
3 | order: 5
4 | group:
5 | path: /polygon
6 | title: 绘制面
7 | order: 3
8 | ---
9 |
10 |
35 |
36 |
37 | );
38 | };
39 |
40 | export default Demo;
41 |
--------------------------------------------------------------------------------
/docs/example/polygon/area.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 展示距离和面积
3 | order: 3
4 | group:
5 | path: /polygon
6 | title: 绘制面
7 | order: 3
8 | ---
9 |
10 |
34 |
35 |
36 | );
37 | };
38 |
39 | export default Demo;
40 |
--------------------------------------------------------------------------------
/docs/example/polygon/autoActive.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 关闭自动激活
3 | order: 4
4 | group:
5 | path: /polygon
6 | title: 绘制面
7 | order: 3
8 | ---
9 |
10 |
33 |
34 |
35 | );
36 | };
37 |
38 | export default Demo;
39 |
--------------------------------------------------------------------------------
/docs/example/polygon/createByDrag.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 通过拖拽创建
3 | order: 2
4 | group:
5 | path: /polygon
6 | title: 绘制面
7 | order: 3
8 | ---
9 |
10 | 注意：配置 `trigger: 'drag'` 之后，只要 Drawer 在绘制状态下，就无法拖拽地图。如需开启拖拽，需要将调用 Drawer 的 disable 方法
11 |
12 |
37 |
38 |
39 | );
40 | };
41 |
42 | export default Demo;
43 |
--------------------------------------------------------------------------------
/docs/example/polygon/editable.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 禁用编辑
3 | order: 5
4 | group:
5 | path: /polygon
6 | title: 绘制面
7 | order: 3
8 | ---
9 |
10 |
35 |
36 |
37 | );
38 | };
39 |
40 | export default Demo;
41 |
--------------------------------------------------------------------------------
/docs/example/polygon/event.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 监听绘制事件
3 | order: 6
4 | group:
5 | path: /polygon
6 | title: 绘制面
7 | order: 3
8 | ---
9 |
10 |
75 |
76 |
77 | );
78 | };
79 |
80 | export default Demo;
81 |
--------------------------------------------------------------------------------
/docs/example/polygon/initialData.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 初始化数据
3 | order: 2
4 | group:
5 | path: /polygon
6 | title: 绘制面
7 | order: 3
8 | ---
9 |
10 |
35 |
36 |
37 | );
38 | };
39 |
40 | export default Demo;
41 |
--------------------------------------------------------------------------------
/docs/example/polygon/initialData1.tsx:
--------------------------------------------------------------------------------
1 | import { Scene } from '@antv/l7';
2 | import { DrawEvent, DrawPolygon } from '@antv/l7-draw';
3 | import { GaodeMap } from '@antv/l7-maps';
4 | import React, { useEffect, useState } from 'react';
5 | import { multiPolygonList } from './mock';
6 |
7 | const id = String(Math.random());
8 |
9 | const Demo: React.FC = () => {
10 | const [polygonDrawer, setPolygonDrawer] = useState
35 |
36 |
37 | );
38 | };
39 |
40 | export default Demo;
41 |
--------------------------------------------------------------------------------
/docs/example/polygon/midPoint.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 禁用中点
3 | order: 4
4 | group:
5 | path: /polygon
6 | title: 绘制面
7 | order: 3
8 | ---
9 |
10 |
42 |
43 |
44 | );
45 | };
46 |
47 | export default Demo;
48 |
--------------------------------------------------------------------------------
/docs/example/polygon/mock.ts:
--------------------------------------------------------------------------------
1 | import { Feature, MultiPolygon, Polygon } from '@turf/turf';
2 |
3 | export const polygonList: Feature
33 |
34 |
35 | );
36 | };
37 |
38 | export default Demo;
39 |
--------------------------------------------------------------------------------
/docs/example/polygon/start.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 快速开始
3 | order: 1
4 | group:
5 | path: /polygon
6 | title: 绘制面
7 | order: 3
8 | ---
9 |
10 |
34 |
41 | );
42 | };
43 |
44 | export default Demo;
45 |
--------------------------------------------------------------------------------
/docs/example/polygon/style.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 自定义样式
3 | order: 4
4 | group:
5 | path: /polygon
6 | title: 绘制面
7 | order: 3
8 | ---
9 |
10 |
35 |
36 |
37 |
38 |
39 |
40 |
71 |
72 |
73 | );
74 | };
75 |
76 | export default Demo;
77 |
--------------------------------------------------------------------------------
/docs/example/rect/area.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 展示距离和面积
3 | order: 3
4 | group:
5 | path: /rect
6 | title: 绘制矩形
7 | order: 4
8 | ---
9 |
10 |
33 |
34 |
35 | );
36 | };
37 |
38 | export default Demo;
39 |
--------------------------------------------------------------------------------
/docs/example/rect/autoActive.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 关闭自动激活
3 | order: 3
4 | group:
5 | path: /rect
6 | title: 绘制矩形
7 | order: 4
8 | ---
9 |
10 |
33 |
34 |
35 | );
36 | };
37 |
38 | export default Demo;
39 |
--------------------------------------------------------------------------------
/docs/example/rect/createByDrag.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 通过拖拽创建
3 | order: 2
4 | group:
5 | path: /rect
6 | title: 绘制矩形
7 | order: 4
8 | ---
9 |
10 | 注意：配置 `trigger: 'drag'` 之后，只要 Drawer 在绘制状态下，就无法拖拽地图。如需开启拖拽，需要将调用 Drawer 的 disable 方法
11 |
12 |
33 |
34 |
35 | );
36 | };
37 |
38 | export default Demo;
39 |
--------------------------------------------------------------------------------
/docs/example/rect/editable.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 是否支持编辑
3 | order: 4
4 | group:
5 | path: /rect
6 | title: 绘制矩形
7 | order: 4
8 | ---
9 |
10 |
33 |
34 |
35 | );
36 | };
37 |
38 | export default Demo;
39 |
--------------------------------------------------------------------------------
/docs/example/rect/event.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 监听绘制事件
3 | order: 7
4 | group:
5 | path: /rect
6 | title: 绘制矩形
7 | order: 4
8 | ---
9 |
10 |
65 |
66 |
67 | );
68 | };
69 |
70 | export default Demo;
71 |
--------------------------------------------------------------------------------
/docs/example/rect/initialData.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 初始化数据
3 | order: 2
4 | group:
5 | path: /rect
6 | title: 绘制矩形
7 | order: 4
8 | ---
9 |
10 |
41 |
42 |
43 | );
44 | };
45 |
46 | export default Demo;
47 |
--------------------------------------------------------------------------------
/docs/example/rect/mock.ts:
--------------------------------------------------------------------------------
1 | import { Feature, Polygon } from '@turf/turf';
2 |
3 | export const rectList: Feature
32 |
33 |
34 | );
35 | };
36 |
37 | export default Demo;
38 |
--------------------------------------------------------------------------------
/docs/example/rect/start.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 快速开始
3 | order: 1
4 | group:
5 | path: /rect
6 | title: 绘制矩形
7 | order: 4
8 | ---
9 |
10 |
32 |
39 | );
40 | };
41 |
42 | export default Demo;
43 |
--------------------------------------------------------------------------------
/docs/example/usage/bus.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 定制公交场景
3 | order: 2
4 | group:
5 | path: /usage
6 | title: 使用场景
7 | order: 7
8 | ---
9 |
10 |
33 |
34 |
35 |
36 |
37 |
38 |
72 |
73 |
74 | );
75 | };
76 |
77 | export default Demo;
78 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@antv/l7-draw",
3 | "version": "3.1.5",
4 | "description": "A drawing package for L7",
5 | "license": "MIT",
6 | "scripts": {
7 | "prepare": "husky install",
8 | "start": "dumi dev",
9 | "docs:build": "dumi build",
10 | "docs:deploy": "gh-pages -d docs-dist",
11 | "less": "lessc ./src/control/index.less ./src/control/index.css",
12 | "analyze": "ANALYZE=1 dumi build",
13 | "build": "father-build",
14 | "deploy": "npm run docs:build && npm run docs:deploy",
15 | "release": "npm run build && npm publish",
16 | "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
17 | "test": "umi-test",
18 | "test:coverage": "umi-test --coverage",
19 | "ci": "npm run prettier && npm run build",
20 | "prepublishOnly": "npm run ci"
21 | },
22 | "files": [
23 | "lib",
24 | "es",
25 | "README.md",
26 | "dist/l7-draw.*"
27 | ],
28 | "main": "lib/index.js",
29 | "module": "es/index.js",
30 | "typings": "es/index.d.ts",
31 | "browser": "dist/l7-draw.min.js",
32 | "dependencies": {
33 | "@turf/turf": "^6.5.0",
34 | "eventemitter3": "^4.0.7",
35 | "lodash": "^4.17.21",
36 | "mousetrap": "^1.6.5",
37 | "tippy.js": "^6.3.7"
38 | },
39 | "devDependencies": {
40 | "@antv/dumi-theme-antv": "^0.2.1",
41 | "@antv/l7": "^2.21.8",
42 | "@commitlint/cli": "^12.1.4",
43 | "@commitlint/config-conventional": "^12.1.4",
44 | "@optimize-lodash/rollup-plugin": "^3.0.0",
45 | "@testing-library/jest-dom": "^5.15.1",
46 | "@testing-library/react": "^12.1.2",
47 | "@types/jest": "^27.0.3",
48 | "@types/lodash": "^4.14.177",
49 | "@types/mousetrap": "^1.6.9",
50 | "@types/next-tick": "^1.0.0",
51 | "@typescript-eslint/eslint-plugin": "^4.33.0",
52 | "@typescript-eslint/parser": "^4.33.0",
53 | "@umijs/fabric": "^2.8.1",
54 | "@umijs/test": "^3.0.5",
55 | "dumi": "^1.1.0",
56 | "eslint": "^7.32.0",
57 | "eslint-config-prettier": "^8.3.0",
58 | "eslint-plugin-jest": "^24.7.0",
59 | "eslint-plugin-prettier": "^3.4.1",
60 | "father-build": "^1.17.2",
61 | "gh-pages": "^3.0.0",
62 | "husky": "^8.0.1",
63 | "lint-staged": "^10.0.7",
64 | "prettier": "^2.2.1",
65 | "rollup-plugin-analyzer": "^4.0.0",
66 | "rollup-plugin-node-polyfills": "^0.2.1",
67 | "yorkie": "^2.0.0"
68 | },
69 | "peerDependencies": {
70 | "@antv/l7": "^2.21.8"
71 | },
72 | "husky": {
73 | "hooks": {
74 | "pre-commit": "lint-staged",
75 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
76 | }
77 | },
78 | "lint-staged": {
79 | "*.{ts,tsx}": "eslint --fix",
80 | "*.{ts,tsx,md,json}": [
81 | "prettier --write"
82 | ],
83 | "*.ts?(x)": [
84 | "prettier --parser=typescript --write"
85 | ]
86 | },
87 | "keywords": [
88 | "antv",
89 | "l7",
90 | "draw",
91 | "l7 draw"
92 | ],
93 | "author": {
94 | "name": "AntV",
95 | "url": "https://antv.vision/"
96 | },
97 | "repository": {
98 | "type": "git",
99 | "url": "https://github.com/antvis/l7-draw"
100 | },
101 | "bugs": {
102 | "url": "https://github.com/antvis/l7-draw/issues"
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/src/constant/default.ts:
--------------------------------------------------------------------------------
1 | import { ICursor, SourceData } from '../typings';
2 |
3 | /**
4 | * 鼠标指针默认值
5 | */
6 | export const DEFAULT_CURSOR_MAP: ICursor = {
7 | draw: 'crosshair',
8 | pointHover: 'pointer',
9 | pointDrag: 'move',
10 | lineHover: 'pointer',
11 | lineDrag: 'move',
12 | polygonHover: 'pointer',
13 | polygonDrag: 'move',
14 | };
15 |
16 | export const DEFAULT_SOURCE_DATA: SourceData = {
17 | point: [],
18 | line: [],
19 | polygon: [],
20 | midPoint: [],
21 | dashLine: [],
22 | text: [],
23 | };
24 |
--------------------------------------------------------------------------------
/src/constant/drawer.ts:
--------------------------------------------------------------------------------
1 | import { ILineDrawerOptions } from '../drawer/line-drawer';
2 | import {
3 | HistoryConfig,
4 | IAdsorbOptions,
5 | IAreaOptions,
6 | IDistanceOptions,
7 | KeyBoardConfig,
8 | PopupOptions,
9 | } from '../typings';
10 | import { followCursor } from 'tippy.js';
11 |
12 | export const DEFAULT_DISTANCE_OPTIONS: IDistanceOptions = {
13 | showTotalDistance: false,
14 | showDashDistance: true,
15 | showWhen: ['normal', 'active'],
16 | format: (meters) => {
17 | if (meters >= 1000) {
18 | return +(meters / 1000).toFixed(2) + 'km';
19 | } else {
20 | return +meters.toFixed(2) + 'm';
21 | }
22 | },
23 | };
24 |
25 | export const DEFAULT_AREA_OPTIONS: IAreaOptions = {
26 | showWhen: ['normal', 'active'],
27 | format: (squareMeters: number) => {
28 | return squareMeters > 1000000
29 | ? `${+(squareMeters / 1000000).toFixed(2)}km²`
30 | : `${+squareMeters.toFixed(2)}m²`;
31 | },
32 | };
33 |
34 | export const DEFAULT_HISTORY_CONFIG: HistoryConfig = {
35 | maxSize: 100,
36 | };
37 |
38 | export const DEFAULT_KEYBOARD_CONFIG: KeyBoardConfig = {
39 | remove: ['del', 'backspace'],
40 | revert: ['command+z', 'ctrl+z'],
41 | redo: ['command+shift+z', 'ctrl+shift+z'],
42 | };
43 |
44 | export const DEFAULT_POPUP_CONFIG: PopupOptions = {
45 | allowHTML: true,
46 | followCursor: true,
47 | placement: 'bottom-start',
48 | offset: [-10, 20],
49 | plugins: [followCursor],
50 | trigger: 'manual',
51 | hideOnClick: false,
52 | theme: 'light',
53 | };
54 |
55 | export const DEFAULT_ADSORB_CONFIG: IAdsorbOptions = {
56 | data: 'drawData',
57 | pointAdsorbPixel: 12,
58 | lineAdsorbPixel: 10,
59 | };
60 |
61 | export const DEFAULT_DRAG_OPTIONS: ILineDrawerOptions['dragOptions'] = {
62 | dotDuration: 100,
63 | dotDistance: 30,
64 | };
65 |
--------------------------------------------------------------------------------
/src/constant/event.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Drawer事件枚举
3 | */
4 | export enum DrawEvent {
5 | Init = 'init',
6 | Destroy = 'destroy',
7 | Enable = 'enable',
8 | Disable = 'disable',
9 | Add = 'add',
10 | Edit = 'edit',
11 | Remove = 'remove',
12 | Clear = 'clear',
13 | Change = 'change',
14 | DragStart = 'dragStart',
15 | Dragging = 'dragging',
16 | DragEnd = 'dragEnd',
17 | Select = 'select',
18 | AddNode = 'addNode',
19 | RemoveNode = 'removeNode',
20 | }
21 |
22 | /**
23 | * Source事件枚举
24 | */
25 | export enum SourceEvent {
26 | Change = 'change',
27 | Update = 'update',
28 | }
29 |
30 | /**
31 | * Render事件枚举
32 | */
33 | export enum RenderEvent {
34 | Click = 'click',
35 | UnClick = 'unclick',
36 | Dragstart = 'dragstart',
37 | Mousemove = 'mousemove',
38 | Mouseout = 'mouseout',
39 | Dragging = 'dragging',
40 | Dragend = 'dragend',
41 | DblClick = 'dblClick',
42 | Contextmenu = 'contextmenu',
43 | }
44 |
45 | /**
46 | * L7 Layer 事件名枚举
47 | */
48 | export enum LayerEvent {
49 | Mousedown = 'mousedown',
50 | Mouseup = 'mouseup',
51 | Click = 'click',
52 | UnClick = 'unclick',
53 | Dblclick = 'dblclick',
54 | Mousemove = 'mousemove',
55 | Mouseover = 'mouseover',
56 | Mouseenter = 'mouseenter',
57 | Mouseleave = 'mouseleave',
58 | Mouseout = 'mouseout',
59 | Contextmenu = 'contextmenu',
60 | }
61 |
62 | /**
63 | * L7 Scene 事件名枚举
64 | */
65 | export enum SceneEvent {
66 | Loaded = 'loaded',
67 | MapMove = 'mapmove',
68 | MoveStart = 'movestart',
69 | MoveEnd = 'moveend',
70 | ZoomChange = 'zoomchange',
71 | ZoomStart = 'zoomstart',
72 | ZoomEnd = 'zoomend',
73 | Click = 'click',
74 | Dblclick = 'dblclick',
75 | Mousemove = 'mousemove',
76 | Mousewheel = 'mousewheel',
77 | Mouseover = 'mouseover',
78 | Mouseout = 'mouseout',
79 | Mouseup = 'mouseup',
80 | Mousedown = 'mousedown',
81 | Contextmenu = 'contextmenu',
82 | Dragstart = 'dragstart',
83 | Dragging = 'dragging',
84 | Dragend = 'dragend',
85 | }
86 |
87 | export enum ControlEvent {
88 | DrawChange = 'drawchange',
89 | DataChange = 'datachange',
90 | DrawSelect = 'drawselect',
91 | DrawClear = 'drawclear',
92 | }
93 |
--------------------------------------------------------------------------------
/src/constant/helper.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ILineHelperOptions,
3 | IPointHelperOptions,
4 | IPolygonHelperOptions,
5 | IDragPolygonHelperOptions,
6 | } from '../typings';
7 |
8 | export const DEFAULT_POINT_HELPER_CONFIG: IPointHelperOptions = {
9 | draw: '单击绘制点',
10 | pointHover: '可拖拽调整点位置',
11 | pointDrag: null,
12 | };
13 |
14 | export const DEFAULT_LINE_HELPER_CONFIG: ILineHelperOptions = {
15 | draw: '单击绘制首个节点',
16 | pointHover: '可拖拽调整节点位置',
17 | pointDrag: null,
18 | lineHover: '可拖拽调整线位置',
19 | lineDrag: null,
20 | midPointHover: '单击在该位置新增节点',
21 | drawFinish: '单击继续绘制，双击结束绘制',
22 | };
23 |
24 | export const DEFAULT_POLYGON_HELPER_CONFIG: IPolygonHelperOptions = {
25 | draw: '单击绘制首个节点',
26 | drawContinue: '单击继续绘制',
27 | drawFinish: '单击继续绘制，双击结束绘制',
28 | midPointHover: '单击在该位置新增节点',
29 | pointHover: '可拖拽调整节点位置',
30 | pointDrag: null,
31 | lineHover: '可拖拽调整面位置',
32 | lineDrag: null,
33 | polygonHover: '可拖拽调整面位置',
34 | polygonDrag: null,
35 | };
36 |
37 | export const DEFAULT_DRAG_POLYGON_HELPER_CONFIg: IDragPolygonHelperOptions = {
38 | ...DEFAULT_POLYGON_HELPER_CONFIG,
39 | draw: '单击绘制首个节点',
40 | drawFinish: '单击结束绘制',
41 | };
42 |
43 | export const DEFAULT_TRIGGER_DRAG_HELPER_CONFIG: Partial