高德地图多边形电子围栏
使用AMap.Polygon和AMap.PolyEditor插件绘制和编辑多边形
https://lbs.amap.com/demo/javascript-api/example/overlayers/polygon-draw-and-edit/
使用MouseTool插件可以在地图上绘制Marker、Polyline、Polygon和Circle。
https://lbs.amap.com/demo/javascript-api/example/mouse-operate-map/mouse-draw-overlayers
MouseTool结合AMap.PolyEditor实现动态画区域及区域编辑
在index页面引入高德api
1
2
3<el-form-item label="添加区域" prop="sceneRange">
<el-button :disabled="noClick" @click="addArea" size="mini" v-model="addForm.sceneRange" >添加区域</el-button>
</el-form-item>用mouseTool添加区域后编辑区域
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
36methods:{
addArea(){
var mouseTool = null;
mouseTool = new AMap.MouseTool(this.map);
mouseTool.polygon({
fillColor:'#00b0ff',
strokeColor:'#80d8ff'
//同Polygon的Option设置
});
var edit;//开启区域编辑
var arr = [];//区域经纬度数据
//添加MouseTool事件监听
AMap.event.addListener( mouseTool,'draw',function(e){
//mouseTool每次只能画一个区域
if(self.map.getAllOverlays('polygon').length>0){
mouseTool.close(false);//true为清除覆盖物
}
//获取mouseTool画区域的经纬度
var mouseToolPoint = e.obj.getPath();
for (let i = 0; i < mouseToolPoint.length; i++) {
arr.push([mouseToolPoint[i].lng,mouseToolPoint[i].lat]);
}
edit = new AMap.PolyEditor(self.map, self.map.getAllOverlays('polygon')[0]);
//编辑多边形
edit.open();
edit.on('adjust', function(event) {
arr = [];
for(var i=0;i<mouseToolPoint.length;i++){
arr.push([mouseToolPoint[i].lng,mouseToolPoint[i].lat]);
}
//判断点是否在当前区域内
self.isNei(arr);
})
}
}
}编辑获取后端返回的区域数据画区域及编辑区域
1
2var polygonList = eval(this.row.sceneRange);
this.creatPolygon(polygonList);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
36creatPolygon(path){
var path_ = path;
var polygon = new AMap.Polygon({
map: this.map,
path: path_,//设置多边形边界路径
strokeColor: "#FF33FF", //线颜色
strokeOpacity: 0.2, //线透明度
strokeWeight: 3, //线宽
fillColor: "#1791fc", //填充色
fillOpacity: 0.35//填充透明度
});
polygon['layerType'] = '区域矩形';
//也可以经度纬度单独相加处于经纬度的个数求平均值就是中心点
this.map.setZoomAndCenter(11, [path[0].lng, path[0].lat]);
var arr = [];
var self = this;
setTimeout(()=>{
this.isNei(this.initpath);//编辑初始化
var allOverlay = this.map.getAllOverlays();
for (let i = 0; i < allOverlay.length; i++) {
if(allOverlay[i].layerType == '区域矩形'){
var cur = allOverlay[i];
var edit = new AMap.PolyEditor(this.map, cur);
edit.open();
let polygonPath = polygon.getPath();
edit.on('adjust', function(event) {
arr = [];
for(var i=0;i<polygonPath.length;i++){
arr.push([polygonPath[i].lng,polygonPath[i].lat]);
}
self.isNei(arr);
})
}
}
},1000);
}判断当前点是否在区域内,在区域内的点更换样式
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
35isNei(){
for (let i = 0; i < this.lucePoint.length; i++) {
var selectPoint = [];//当前区域内的点
//高德后端数据需要转换一次02坐标
let gcj02 = wgs84togcj02(Number(this.lucePoint[i].longitude), Number(this.lucePoint[i].latitude));
var point = [gcj02[0],gcj02[1]];
//isPointInRing为true 当前坐标则在当前多边形区域内
var isPointInRing = AMap.GeometryUtil.isPointInRing(point,polygonArr);
if(isPointInRing){
selectPoint.push(this.lucePoint[i]);
}
}
//划区域结束后对框选的点进行样式更改 区域内的点更换样式图片
for (let i = 0; i < this.markerList.length; i++) {
var curId = this.markerList[i].getExtData().id;
//所有坐标先初始化最初样式
this.markerList[i].setContent('<div style="position: relative;width: 20px;height: 36px;">' +
'<div style="width: 20px;">' +
'<img style="width: 25px;height: 38px;" src="'+iDefault+'">' +
'</div>' +
'</div>');
for (let k = 0; k < selectPoint.length; k++) {
//循环都是当前区域内的点
if(curId == selectPoint[k].rspId){
this.markerList[i].setContent('<div>' +
'<div style="width: 20px;">' +
'<img style="width: 25px;height: 38px;" src="'+select+'">' +
'</div>' +
'</div>')
}
}
}
}
