效果图:
//初始数据
data(){
return{
//地图
map:{
address:'',
map:null,
//当前鼠标绘制
mouseTool:null,
//当前编辑
polyEditor:null,
//覆盖物的绘制点【用于编辑】
mouseToolArr:[],
//覆盖物的poly对象
polyArr:[],
//地图右侧功能按钮
signNumber:0,
//保存提交的覆盖物的点数据
polySubmitData:''
},
}
}
//实例化地图
_this.map.map = new AMap.Map('elementMap',{
zoom:11,
center:[116.44309,39.921598]
})
_this.map.map.addControl(new AMap.MapType({
defaultType:0 //0代表默认,1代表卫星
}));
//点击左侧搜索
mapSearch(){
if(!_this.map.address){
_this.$message.warning('请输入查询的位置!')
return;
}
var geocoder = new AMap.Geocoder({
city: "全国", //城市设为北京,默认:“全国”
});
//根据地址查询出经纬度,并居中;
geocoder.getLocation(_this.map.address, function(status, result) {
if (status === 'complete'&&result.geocodes.length) {
var lnglat = result.geocodes[0].location
_this.map.map.setCenter([lnglat.lng,lnglat.lat])
_this.map.map.setZoom(17)
}else{
log.error('根据地址查询位置失败');
}
})
},
//新建图层
addPoly(){
//按钮颜色
_this.map.signNumber = 1;
//编辑功能关闭
if(_this.map.polyEditor){
_this.map.polyEditor.close();
}
_this.map.mouseTool = new AMap.MouseTool(_this.map.map);
_this.map.mouseTool.polygon({
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 3,
strokeOpacity: 0.4,
fillColor: '#1791fc',
fillOpacity: 0.4,
// 线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
// strokeDasharray: [30,10],
})
_this.map.mouseTool.on('draw', function(event) {
//覆盖物对象绘制完成
//event.obj 为绘制出来的覆盖物对象
//event.obj.getPath() 为拿到的点
//存储绘制覆盖物的点,用于重新绘制
_this.map.mouseToolArr.push(event.obj.getPath())
setTimeout(function(){
//拿到经纬度点清除由鼠标绘制的点
_this.map.mouseTool.close(true)
//重新开启鼠标绘制点功能
_this.addPoly();
//往地图压入当前绘制的覆盖物
_this.openPoly(event.obj.getPath());
})
})
},
//开启绘制 【将绘制的点在地图中绘制出来】
openPoly(data){
//开启格式化
let newArr = _this.lnglatFormat(data)
//拿到所有的点
var polygon = new AMap.Polygon({
path: newArr,
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 3,
strokeOpacity: 0.4,
fillColor: '#1791fc',
fillOpacity: 0.4,
// 线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
// strokeDasharray: [30,10],
});
_this.map.map.add(polygon);
//存储覆盖物的poly,用于编辑
_this.map.polyArr.push(polygon);
//图层覆盖物居中
_this.map.map.setFitView();
},
//编辑图层
editPoly(){
//按钮颜色
_this.map.signNumber = 2;
//清除鼠标绘制功能
if(_this.map.mouseTool){
_this.map.mouseTool.close();
}
//拿到绘制多边形的点,每次编辑都是上一次已经绘制好的覆盖物
let polygon = _this.map.polyArr[_this.map.polyArr.length-1]
_this.map.polyEditor = new AMap.PolyEditor(_this.map.map, polygon)
_this.map.polyEditor.open();
},
//结束编辑
endPoly(){
if(_this.map.polyEditor){
_this.map.signNumber = 3;
_this.map.polyEditor.close();
}
},
//清除重绘
clearPoly(){
_this.map.signNumber = 4;
_this.map.map.remove(_this.map.polyArr);
//停止并清除鼠标点绘制事件 清除鼠标覆盖物的点
if(_this.map.mouseTool){
_this.map.mouseTool.close();
_this.map.mouseToolArr = [];
}
//停止编辑的覆盖物 重置其数据
if(_this.map.polyEditor){
_this.map.polyEditor.close();
_this.map.polyEditor = null;
}
//清除自己拿到鼠标绘制的点数据并重绘的覆盖物点
_this.map.polyArr = [];
},
//保存图层
polySubmit(){
_this.map.signNumber = 0;
let polygonData = _this.map.map.getAllOverlays('polygon')
let submit = [];
for(let i=0; i<polygonData.length; i++){
let lnglatData = polygonData[i].getPath();
submit.push(lnglatData)
}
_this.map.polySubmitData = JSON.stringify(submit)
},
//格式化经纬度数据
lnglatFormat(data){
let arr = [];
for(let i=0; i<data.length; i++){
let newArr = [];
newArr.push(data[i].lng)
newArr.push(data[i].lat)
arr.push(newArr)
}
return arr;
},