# Polygon
# 使用
<amap>
<amap-polygon :path="[[x1, y1], [x2, y2], [xn, yn]]" />
</amap>
1
2
3
2
3
# Props
属性名 | 类型 | 备注 |
---|---|---|
path | number[2][] | number[2][][] | 支持.sync |
zIndex | number | |
bubble | boolean | |
cursor | string | |
strokeColor | string | |
strokeOpacity | number | |
strokeWeight | number | |
strokeStyle | boolean | |
strokeDasyarray | number[] | |
fillColor | string | |
fillOpacity | string | |
visible | boolean | |
draggable | boolean | |
extraOptions | object | 其它未在上面列出的属性,仅支持单次绑定 |
# amap-vue 独有 Props
属性名 | 类型 | 备注 |
---|---|---|
editable | boolean | 为true 时会开启PolygonEditor ,并会触发path 属性的.sync |
editorOpts | object | 可选,用于定制PolygonEditor 参数,仅支持单次绑定 |
# Events
事件名 | 备注 |
---|---|
click | |
dblclick | |
rightclick | |
mousemove | |
mouseover | |
mouseout | |
mousedown | |
mouseup | |
dragstart | |
dragging | |
dragend | |
moving | |
moveend | |
movealong | |
touchstart | |
touchmove | |
touchend |
# Example
<template>
<demo-view>
<template v-slot:control>
<a-form-item label="小区">
<a-select v-model="aoiIndex" placeholder="请选择">
<a-select-option
v-for="(aoi, i) in topHomeAois"
:key="aoi.aoiid"
:value="i"
>{{ aoi.name }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="editable">
<a-checkbox v-model="editable" />
</a-form-item>
<a-form-item label="draggable">
<a-checkbox v-model="draggable" />
</a-form-item>
</template>
<template v-slot:map-content>
<amap-polygon
:path.sync="path"
:fill-color="fill"
:fill-opacity="0.5"
:stroke-color="stroke"
:cursor="draggable ? 'pointer' : 'default'"
:draggable="draggable"
:editable="editable"
/>
</template>
</demo-view>
</template>
<script>
const topHomeAois = Object.freeze(
require('../../../.vuepress/public/assets/data/top-home-aois.json')
);
export default {
data() {
return {
topHomeAois,
aoiIndex: 0,
path: null,
editable: false,
draggable: true,
fill: '#409EFF',
stroke: '#000A58',
};
},
watch: {
aoiIndex: {
handler(index) {
const aoi = topHomeAois[index];
this.path = aoi.wkt
.split(',')
.map(pair => pair.split(' ').map(parseFloat));
},
immediate: true,
},
},
};
</script>
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
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