vue中使用高德地图画电子围栏
思路:根据项目的需求,给某个区域画电子围栏,且必须得在规定区域内画,所有首先得有个区域先规定好,从后台获取规定区域的坐标点,让后就是画矩形,这里主要是画矩形,在不在圈内,前端做校验,后端也要做检验。
data:
map: {},
polygon: {},//用来画区域的
mouseTool: {}, //画图工具
centerArr: [], //中心点
pathArr: [], //用来画区域的点
drawPoint: [], //后端传过来的划默认工作区域点的坐标
methods:
//得到数据后初始化地图
initMap() {
this.map = new AMap.Map("container", {
resizeEnable: true,
center: this.centerArr,
zoom: 20
});
this.polygon = new AMap.Polygon({
map: this.map,
fillOpacity: 0.4,
path: this.pathArr
});
this.mouseTool = new AMap.MouseTool(this.map);
this.draw();
//监听draw事件可获取画好的覆盖物
this.mouseTool.on("draw", e => {
//e.obj.getPath() --这里是画出来的点
//每次只能传四个点,所以先清空
this.addForm.pointArr = [];
//画出来的坐标放在存放在数组里面
e.obj.getPath().forEach(item => {
this.addForm.pointArr.push([String(item.lng), String(item.lat)]);
});
});
this.map.setFitView();
},
//画矩形方法
draw() {
this.mouseTool.rectangle({
fillColor: "#00b0ff",
strokeColor: "#80d8ff"
//同Polygon的Option设置
});
},
//关闭并清除你之前画的图像
closeAndClear() {
this.mouseTool.close(true);
this.addForm.pointArr = [];
},
总结:具体的问题具体分析,画圈,划线,都是差不多类似的,只是换一个方式而已。
遇到的问题:就是重新编辑的时候,再去渲染曾经画好的矩形,数据会被高德地图重新更改一下结构,v-model绑定的数据所有会出现你想不到的问题。所以需要你重新对数据push一遍达到你想要的数据结构。