# 6.1 鼠标工具
TIP
鼠标工具插件。通过该插件，可进行鼠标画标记点、线、多边形等功能。
仅需创建一个实例，通过参数配置即可通过鼠标标记点、线、多边形。
构造函数：
const aimapDrawInstance = new aimap.Draw(options: Object);
map.addControl(aimapDrawInstance);//添加控件到地图
1
2
2
参数
| 字段名 | 类型 | 是否必须 | 默认值 | 说明 |
|---|---|---|---|---|
controls | Object | 否 | { point:true, line_string:true, polygon:true, } | 隐藏或显示单个控件。每个属性的名称是一个控件，值是一个布尔值，指示该控件是打开还是关闭。可用的控制名称point，line_string，polygon。默认情况下，所有控件均处于启用状态。要更改默认设置，请使用displayControlsDefault |
displayControlsDefault | boolean | 否 | true | 如果您希望所有控件在默认情况下处于关闭状态，并使用指定一个允许的列表controls，请使用displayControlsDefault: false |
modes | Object | 否 | 自定义模式 | |
styles | Array<Object> | 否 | 自定义绘制样式 |
成员函数：
获取所有绘制要素
aimapDrawInstance.getAll();
1
清除所有绘制要素
aimapDrawInstance.deleteAll();
1
清除指定要素
aimapDrawInstance.delete(ids: string | Array<string>);
1
事件：
// 绘制完成事件
map.on('draw.create', (event) => {
console.info('create', event.features[0]);//输出绘制后的图形
});
// 点击控件删除上次绘制，使得仅显示一个图形要素
map.on('draw.modechange', (event) => {
if (aimapDrawInstance.getAll().features.length > 1 && event.mode !== 'simple_select') {
aimapDrawInstance.delete(aimapDrawInstance.getAll().features[0].id);
}
});
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
自定义styles样式示例：
WARNING
自定义样式时，显示几个控件，就需要对相应的几个控件全部进行自定义配置，不能显示多个控件，只配置一个控件的样式。
即要么全部自定义控件，要么全不配置。
用户可对以下参数中paint属性下字段进行相应自定义配置
styles: [
// 绘制点样式配置
{
'id': 'points-are-blue',
'type': 'circle',
'filter': ['all',
['==', '$type', 'Point'],
['==', 'meta', 'feature'],
['==', 'active', 'false']
],
'paint': {
'circle-radius': 5, //点半径
'circle-color': '#000088' //点颜色
}
},
// 绘制线样式配置
{
"id": "gl-draw-line",
"type": "line",
"filter": ["all", ["==", "$type", "LineString"],
["!=", "mode", "static"]
],
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#D20C0C", //线颜色
"line-dasharray": [0.2, 2], //虚线间隔，删除该字段后显示实线
"line-width": 2 //线宽
}
},
// 多边形填充样式配置
{
"id": "gl-draw-polygon-fill",
"type": "fill",
"filter": ["all", ["==", "$type", "Polygon"],
["!=", "mode", "static"]
],
"paint": {
"fill-color": "#D20C0C", //多边形填充色
"fill-opacity": 0.1 //多边形填充透明度
}
},
// 多边形边线样式配置
{
"id": "gl-draw-polygon-stroke-active",
"type": "line",
"filter": ["all", ["==", "$type", "Polygon"],
["!=", "mode", "static"]
],
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "#D20C0C", // 线颜色
"line-dasharray": [0.2, 2], // 虚线间隔，该字段删除后为实线
"line-width": 2 //线宽
}
},
// 多边形和线顶点样式
{
"id": "gl-draw-polygon-and-line-vertex-active",
"type": "circle",
"filter": ["all", ["==", "meta", "vertex"],
["==", "$type", "Point"],
["!=", "mode", "static"]
],
"paint": {
"circle-stroke-width": 2, //顶点点光晕大小
"circle-stroke-color": "#FFF", //顶点光晕颜色
"circle-radius": 3, //顶点半径
"circle-color": "#D20C0C", //顶点颜色
}
},
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
# 6.1.1 绘制多边形
const aimapDrawInstance = new aimap.Draw({
displayControlsDefault: false, //所有控件在默认情况下处于关闭状态
controls: {
polygon: true, //显示多边形控件
},
// 自定义模式，使绘制结束后状态不可改
modes: Object.assign(aimap.Draw.modes, {
simple_select: {
onSetup () {
this.setActionableState(); //所有操作的默认可操作状态为false
},
toDisplayFeatures: (state, geojson, display) => {
display(geojson);
}
}
})
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 6.1.2 绘制线
const aimapDrawInstance = new aimap.Draw({
displayControlsDefault: false, //所有控件在默认情况下处于关闭状态
controls: {
line_string: true, //显示标记线控件
},
// 自定义模式，使绘制结束后状态不可改
modes: Object.assign(aimap.Draw.modes, {
simple_select: {
onSetup () {
this.setActionableState(); //所有操作的默认可操作状态为false
},
toDisplayFeatures: (state, geojson, display) => {
display(geojson);
}
}
})
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 6.1.3 绘制点
const aimapDrawInstance = new aimap.Draw({
displayControlsDefault: false, //所有控件在默认情况下处于关闭状态
controls: {
point: true, //显示标记点控件
},
// 自定义模式，使绘制结束后状态不可改
modes: Object.assign(aimap.Draw.modes, {
simple_select: {
onSetup () {
this.setActionableState(); //所有操作的默认可操作状态为false
},
toDisplayFeatures: (state, geojson, display) => {
display(geojson);
}
}
})
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 6.1.4 绘制圆
const aimapDrawInstance = new aimap.Draw({
displayControlsDefault: false, //所有控件在默认情况下处于关闭状态
controls: {
circle: true, //显示圆控件
},
// 自定义模式，使绘制结束后状态不可改
modes: Object.assign(aimap.Draw.modes, {
simple_select: {
onSetup () {
this.setActionableState(); //所有操作的默认可操作状态为false
},
toDisplayFeatures: (state, geojson, display) => {
display(geojson);
}
}
})
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 6.1.5 绘制矩形
const aimapDrawInstance = new aimap.Draw({
displayControlsDefault: false, //所有控件在默认情况下处于关闭状态
controls: {
rectangle: true, //显示矩形控件
},
// 自定义模式，使绘制结束后状态不可改
modes: Object.assign(aimap.Draw.modes, {
simple_select: {
onSetup () {
this.setActionableState(); //所有操作的默认可操作状态为false
},
toDisplayFeatures: (state, geojson, display) => {
display(geojson);
}
}
})
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17