需求：在加載地圖后把之前已框選的區域顯示在頁面，然后在該區域內再次進行框選區域。

需要展示在頁面的區域點坐標：

gpsAll: [{ latitude: 104.050488, longitude: 30.590701 },{ latitude: 104.050359, longitude: 30.588189 },{ latitude: 104.054436, longitude: 30.588411 },{ latitude: 104.054393, longitude: 30.591329 },]

然后初始化地圖并設置區域

//地圖加載let map = new AMap.Map("select-map", {zoom: 16,center: self.center,});// 設置蒙層區域------let holes = [];self.gpsAll.map((v) => {holes.push([v.latitude, v.longitude]);});let polygonOptions = {map: self.map,strokeColor: "#97EC71",strokeWeight: .1,fillColor: "#000",fillOpacity: .8,};let pointers = {outer: [[180, 90],[180, -90],[0, -90],[0, 90],],inner: holes,};let pathArray = [pointers.outer, pointers.inner];let polygon = new AMap.Polygon(polygonOptions);polygon.setPath(pathArray);

直接貼代碼，按需求自己修改，關鍵代碼在createMap方法里：

<template><div class="bg"><div class="container"><div class="page-tit"><i class="el-icon-arrow-left"></i><router-link to="/">設置</router-link></div><div><div class="m-all"><el-page-header @back="$router.back()"><div slot="content" class="font-w">添加劃分管轄</div></el-page-header></div><div class="mincont"><div class="mincont-l"><div class="ml-head"><div class="addbtn" @click="drawPolygon">新建區域</div><el-checkbox>顯示所有劃分</el-checkbox></div></div><div class="mapbox"><div class="select-map"><div class="but"><div></div><div><el-button @click="clearPolygon">清空當前繪制</el-button></div></div><div id="select-map" ref="selectMap"></div></div></div></div></div></div></div> </template><script> export default {name: "DivisionArea",data() {return {map: {}, //保存地圖對象mouseTool: {}, // 鼠標多邊形繪制工具polyType: {borderColor: "red", // 繪制線fillOpacity: 0.5, //填充透明度fillColor: "#000000", //填充顏色},center: [], // 中心點markers: {position: [], // 標記點位位置},polygonList: [], //繪制好的線的坐標gpsAll: [{ latitude: 104.050488, longitude: 30.590701 },{ latitude: 104.050359, longitude: 30.588189 },{ latitude: 104.054436, longitude: 30.588411 },{ latitude: 104.054393, longitude: 30.591329 },],};},mounted() {let self = this;let timer = setInterval(() => {if (AMap) {clearInterval(timer);self.createMap();}}, 200);},methods: {// 創建地圖createMap() {let self = this;self.center = [self.gpsAll[0].latitude, self.gpsAll[0].longitude];this.$nextTick(() => {//地圖加載self.map = new AMap.Map("select-map", {zoom: 16,center: self.center,});// 設置蒙層區域------let holes = [];self.gpsAll.map((v) => {holes.push([v.latitude, v.longitude]);});let polygonOptions = {map: self.map,strokeColor: "#97EC71",strokeWeight: .1,fillColor: "#000",fillOpacity: .8,};let pointers = {outer: [[180, 90],[180, -90],[0, -90],[0, 90],],inner: holes,};let pathArray = [pointers.outer, pointers.inner];let polygon = new AMap.Polygon(polygonOptions);polygon.setPath(pathArray);// 設置蒙層區域------end// 地圖上打印當前的鼠標點擊點位self.map.on("click", function (e) {console.log("點擊處經緯度：",e.lnglat.getLng() + "," + e.lnglat.getLat());});});},// 繪制多邊形drawPolygon() {if (this.polygonList.length > 0) {this.$message.error("區域已存在!如果需要重新繪制請清空當前已繪制區域！");return;}this.mouseTool = new AMap.MouseTool(this.map);this.mouseTool.polygon({strokeColor: this.polyType.borderColor,fillColor: this.polyType.fillColor,fillOpacity: parseFloat(this.polyType.fillOpacity),});this.map.remove(this.polygon);//監聽draw事件可獲取畫好的覆蓋物this.polygonList = [];let self = this;this.mouseTool.on("draw", function (e) {self.polygonList.push(e.obj);self.closeDrawPolygon();});},// 清空地圖上繪制的多邊形clearPolygon() {this.map.remove(this.polygonList);this.polygonList = [];this.savePolygon = [];this.map.remove(this.polygon);this.map.remove(this.popyText);},// 結束繪制多邊形closeDrawPolygon() {this.mouseTool.close();for (let i = 0; i < this.polygonList.length; i++) {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.savePolygon.push(savearr);}let save = JSON.stringify(this.savePolygon);sessionStorage.setItem("savePolygon", save);// 二維數組轉對象let maplist = this.savePolygon[0].path.map((item) => {var mapData = {};mapData.lat = item[0];mapData.lng = item[1];return mapData;});this.maplist = maplist;console.log("所選區域經緯度列表:", maplist);// 計算區域面積let pathList = [];let arrs = JSON.parse(JSON.stringify(maplist));arrs.map((v) => {pathList.push([v.lat, v.lng]);});this.pathList = pathList;let self = this;var area = Math.round(AMap.GeometryUtil.ringArea(pathList));let dian1 = pathList[pathList.length - 1][0];let dian2 = pathList[pathList.length - 1][1];self.popyText = new AMap.Text({position: new AMap.LngLat(dian1, dian2),text: "區域面積" + area + "平方米",offset: new AMap.Pixel(-20, -20),});self.map.add(self.popyText);self.area = area;console.log("區域面積：", area);},}, }; </script><style lang="less" scoped> @import url("~@/assets/less/setUp/divisionArea.less"); </style>

總結

以上是生活随笔為你收集整理的高德地图自定义镂空区域的全部內容，希望文章能夠幫你解決所遇到的問題。

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