1draw.html
2.4 KB
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style>
html,
body,
#container {
width:1200px;
height: 1200px;
}
</style>
<title>多边形编辑器吸附功能</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script
src="https://webapi.amap.com/maps?v=2.0&key=87c481b056bda4517971a8e8220dd75a&plugin=AMap.PolygonEditor"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: 120px">
<button class="btn" onclick="createPolygon()" style="margin-bottom: 5px">绘制区域</button>
<!-- <button class="btn" onclick="polyEditor.open()" style="margin-bottom: 5px">开始编辑</button> -->
<button class="btn" onclick="polyEditor.close()">结束编辑</button>
</div>
<script type="text/javascript">
var map = new AMap.Map("container", {
center: [102.231407, 23.393544],
zoom: 16.8
});
var path1 = [[102.19828,23.408202],[102.184279,23.386124],[102.204195,23.368205],[102.268182,23.401235]]
var polygon = null;
if (path1.length) {
var polygon = new AMap.Polygon({
path: path1
})
map.add([polygon]);
map.setFitView();
var polyEditor = new AMap.PolygonEditor(map);
polyEditor.addAdsorbPolygons([polygon]);
}
polyEditor.on('add', function (data) {
if (polygon) {
map.remove(polygon);
}
// console.log(data);
console.log('数据1----',data['target']['_opts']['path']);
polygon = data.target;
polyEditor.addAdsorbPolygons(polygon);
polygon.on('dblclick', () => {
polyEditor.setTarget(polygon);
polyEditor.open();
})
})
polyEditor.on('end', function (data) {
console.log('数据2----',data['target']['_opts']['path']);
});
polygon.on('dblclick', () => {
polyEditor.setTarget(polygon);
polyEditor.open();
})
function createPolygon() {
if (polygon) {
map.remove(polygon);
}
polyEditor.close();
polyEditor.setTarget();
polyEditor.open();
}
/* polyEditor.setTarget(polygon2);
polyEditor.open(); */
</script>
</body>
</html>