高德地图绘制图层

效果图：

//初始数据
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;
},