之前用VUE實現了高德地圖的歷史軌跡回放和熱力圖，現在來實現電子圍欄功能。
所謂電子圍欄，就是地圖上限定的區域內實現限行功能，用我們身邊的事物來舉例，共享單車的限行、限停區域就是電子圍欄。由此可見，電子圍欄最基礎的做法就是在地圖上實現多邊形覆蓋物。

照例，第一步：加載JS AP

• 在public/index.html中加入：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值&callback=init"></script>

• 放置地圖極控制功能
  
• 初始化地圖
  
• 繪制多邊形
  
  如果需要一次繪制多個矢量圖形，可以刪除__this.mouseTool.close()這一行，并在“結束并保存”按鈕功能里實現。

其余函數功能的實現，參見完整代碼：

<template><div><div id="container"></div><div class="input-card"><h4>電子圍欄繪制</h4><div class="input-item"><input type="button" class="btn" value="開始繪制" id="start" @click="startDrawPolygon()" /><input type="button" class="btn" value="清空" id="pause" @click="clearPolygon()" /></div><div class="input-item"><input type="button" class="btn" value="結束并保存" id="resume" @click="stopAndSave()" /><input type="button" class="btn" value="重新繪制" id="stop" @click="redrawPolygon()" /></div></div></div> </template><script> export default {mounted() {this.$nextTick(() => {this.initMap();});},data() {return {map: null,mouseTool: null,polyType: {strokeColor: "#FF33FF",strokeOpacity: 1,strokeWeight: 4,strokeOpacity: 0.2,fillColor: "#1791fc",fillOpacity: 0.4,// 線樣式還支持 'dashed'strokeStyle: "solid"// strokeStyle是dashed時有效// strokeDasharray: [30,10],},polygonList: [],savedPolygon: []};},methods: {initMap() {this.map = new AMap.Map("container", {resizeEnable: true,center: [114.459779, 38.087936],zoom: 16});},startDrawPolygon() {this.clearPolygon();let __this = this;this.map.plugin("AMap.MouseTool", function() {__this.mouseTool = new AMap.MouseTool(__this.map);});this.mouseTool.polygon(this.polyType);//監聽draw事件可獲取畫好的覆蓋物this.polygonList = [];this.mouseTool.on("draw", function(e) {__this.polygonList.push(e.obj);console.log("繪制的多邊形", __this.polygonList);__this.mouseTool.close();});},stopAndSave() {// this.mouseTool.close();let savedPolygon = [];for (let i = 0; i < this.polygonList.length; i++) {console.log(this.polygonList[i].getOptions());let op = this.polygonList[i].getOptions();let routePath = [];op.path.forEach(item => {routePath.push([item.lng, item.lat]);});let savearr = {path: routePath,strokeColor: op.strokeColor,strokeOpacity: op.strokeOpacity,fillOpacity: op.fillOpacity,fillColor: op.fillColor,zIndex: op.zIndex};this.savedPolygon.push(savearr);}let save = JSON.stringify(this.savedPolygon);console.log("savedPolygon", save);// 模擬數據庫存取sessionStorage.setItem("savedPolygon", save);},clearPolygon() {// this.map.remove(this.polygonList);this.polygonList = [];this.map.clearMap(); // 清除地圖上的所有覆蓋物},// 用保存的數據重新繪制多邊形并添加事件redrawPolygon() {let __this = this;// 用瀏覽器模擬數據庫存取let savedPolygon = JSON.parse(sessionStorage.getItem("savedPolygon"));console.log("重繪多邊形數據", savedPolygon);if (savedPolygon == null) return;for (let i = 0; i < savedPolygon.length; i++) {var polygon = new AMap.Polygon(savedPolygon[i]);this.map.add(polygon);}}} }; </script><style lang="less" scoped> @import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"); #container {width: 100%;height: 500px; }.input-card .btn {margin-right: 1.2rem;width: 9rem; }.input-card .btn:last-child {margin-right: 0; } </style>

啟動項目，一切正常！

總結

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

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