頁面繪制

<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 = polygonobj.polyeditor = polyEditorthis.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); },

---

效果：

編輯圍欄

編輯完成后 保存圍欄

圍欄的坐標 復制到剪切板

添加圍欄

總結

以上是生活随笔為你收集整理的Vue+高德地图API的使用(电子围栏)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。