Vue+高德地图API的使用(电子围栏)

页面绘制

<template>
	<!-- 围栏数据以表格的形式展示 -->
	<el-table :data="fencingData" border style="width: 100%">
		<el-table-column prop="name" label="围栏名称" width="150">
			<template slot-scope="scope">
				<el-input v-model="fencingData[scope.$index].name"></el-input>
			</template>
		</el-table-column>
		<el-table-column prop="path" label="坐标数据">
			<template slot-scope="scope">
				<el-button type="primary" size="small"
					@click.native.prevent="PathCopy(scope.$index, fencingData)">
					复制</el-button>
			</template>
		</el-table-column>
		<el-table-column fixed="right" label="操作" width="100">
			<template slot-scope="scope">
				<el-button type="text" size="small" @click.native.prevent="hold(scope.$index, fencingData)">
					编辑</el-button>
				<el-button type="text" size="small"
					@click.native.prevent="hold1(scope.$index, fencingData)">
					保存</el-button>
				<el-button @click.native.prevent="deleteRow(scope.$index, fencingData)" type="text"
					size="small">
					移除
				</el-button>
			</template>
		</el-table-column>
	</el-table>
</template>
<el-button type="primary" size="small" @click.native.prevent="Polyadd">添加围栏</el-button>

---

初始化

//data 中定义
//电子围栏
fencingData: [{
	name: '北京电子围栏',
	path: [
		[116.388565, 39.907388],
		[116.383565, 39.902388],
		[116.383565, 39.912388]
	]
}],

initMap 事件plugins中加入 "AMap.PolyEditor", //多边形编辑器

目前我所配置的内容

//  初始绘制围栏
// 根据上一个项目 在initMap事件中执行 或者  放在created事件
if(this.fencingData.length>0){
	for (let i = 0; i < this.fencingData.length; i++) {
		//poly  封装的绘制围栏事件
		this.poly(this.fencingData[i])
	}
}

封装围栏

//封装 围栏
poly(obj) {
	AMapLoader.load({}).then((AMap) => {
		if (obj === undefined) return
		// 配置围栏参数
		var polygon = new AMap.Polygon({
			path: obj.path,
			strokeColor: "#000000",
			strokeWeight: 3,
			strokeOpacity: 0.5,
			fillOpacity: 0.4,
			fillColor: '#4e94fc',
			zIndex: 10,
			bubble: true,
		})
		//polyEditor 使围栏处于可编辑
		let polyEditor = new AMap.PolyEditor(this.map, polygon)
		obj.polygon = polygon
		obj.polyeditor = polyEditor
		this.map.add(polygon) //将围栏添加至地图上
		return obj
	}).catch(e => {
		console.log(e);
	})
},

效果：

---

1.添加围栏 点击事件

Polyadd() {
AMapLoader.load({}).then((AMap) => {
	var center = this.map.getCenter();//获取地图中心点
	var patha = [
		new AMap.LngLat(center.lng, center.lat),
		//将经纬度进行偏移
		new AMap.LngLat(center.lng - 0.005, center.lat - 0.005),
		new AMap.LngLat(center.lng - 0.005, center.lat + 0.005),
	];
	let obj = {
		name: '电子围栏',//围栏名称
		path: patha,//经纬度数组
		polyEditor: null,//围栏对象  用于编辑事件
	};
	this.poly(obj)//绘制围栏
	this.fencingData.push(obj);//添加数据
}).catch(e => {
	console.log(e);
})
},

2.编辑与保存 事件

//编辑围栏
//围栏编辑
hold(index, rows) {
	rows[index].polyeditor.open() //编辑
},
//围栏保存
hold1(index, rows) {
	rows[index].polyeditor.close() //结束编辑
},

3.移除 事件

//围栏表移除
deleteRow(index, rows) {
	rows[index].polyeditor.close() //结束编辑
	this.map.remove(rows[index].polygon); //地图上移除围栏
	rows.splice(index, 1); //数据表清除此条数据
},

4.复制围栏经纬度数据

PathCopy(index, rows) {
	var aaa = ''
	for (let i = 0; i < rows[index].path.length - 1; i++) {
		aaa += '[' + rows[index].path[i].lng + ',' + rows[index].path[i].lat + '],'
	}
	aaa += '[' + rows[index].path[rows[index].path.length - 1].lng + ',' + rows[index].path[rows[index].path
		.length - 1].lat + ']'
	var bbb = ''
	bbb = '[' + aaa + ']'
	// 以上部分 是  对数据进行处理成二维数组
	//复制到剪切板
	var aux = document.createElement("input");
	aux.setAttribute("value", bbb);
	document.body.appendChild(aux);
	aux.select();
	document.execCommand("copy");
	document.body.removeChild(aux);
},

---

效果：

编辑围栏

编辑完成后 保存围栏

围栏的坐标 复制到剪切板

添加围栏