高德地图自定义镂空区域

需求：在加载地图后把之前已框选的区域显示在页面，然后在该区域内再次进行框选区域。

需要展示在页面的区域点坐标：

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>

高德地图自定义镂空区域相关推荐

Android 高德地图自定义线路规划选择方案之后按照方案进行导航
Android 高德地图自定义线路规划选择方案之后按照方案进行导航因为我这边导航需求的问题,导致我这边不能使用高德地图官方的线路规划和导航.所以我这边线路规划和导航界面都是根据高德地图那边给的api ...
高德地图自定义图标的点标记Marker--初体验（二）
点标记Marker 创建一个默认图标的点标记: 创建一个自定义图标的点标记: new AMap.Marker({}) 参数说明本文以Marker为主,其他点标记方法大差不差通过上两篇文章我们已经了 ...
Android高德地图自定义Markers的例子
下文为各位重点介绍关于Android高德地图自定义Markers的例子,希望这篇文章能够让各位理解到Android高德地图自定义Markers的方法. 之前的博客里说了地图的嵌入和定位,今天就说说在地 ...
vue框架中使用高德地图自定义icon问题
** vue框架中使用高德地图自定义icon问题 ** vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题 ...
高德地图API实现区域立体效果
高德地图API实现区域立体效果初衷区域掩膜垂面Wall 区域掩膜与垂面Wall相结合,构建区域立体效果最后初衷在利用高德地图API做项目的过程中遇到需只显示一个区域的地图,并且具有立体效果 ...
高德地图获取可视区域内四角坐标（东北，东南，西南，西北）
高德地图获取可视区域内四角坐标(东北,东南,西南,西北) 场景:当需要实现查询某坐标区域内的所有共享单车,那么常规操作就是把所选区域内的左上和右下两点经纬度给到后端.获取方法如下: // 初始化地图m ...
Android高德地图自定义Mark并实现聚合效果
Android高德地图自定义Mark并实现聚合效果起因:公司本来项目里面用到了高德地图,然后最近老板看见别人的APP里面有个聚合的这个功能,老板:"这个效果能不能实现,我也要!" ...
高德地图自定义点标记大小_高德地图实现自定义小蓝点自定义点标记绘制多边形/圆形区域根据地图的移动显示或者隐藏自定义点标记的相关实现...
最近项目中有需要应用到高德地图的模块,在参考别的app地图相关模块实现过程中,自己产生了一些想法.首先说明要实现的功能需求.类似支付宝app内的跑腿功能,在全市的所有商铺,电梯广告等任意地点发布任务, ...
Web端调用高德地图-自定义地图-只显示中国区域
1. 通过以下链接注册账号密码高德开放平台 | 高德地图API高德开放平台官网https://lbs.amap.com/?ref=https%3A%2F%2Fgeohub.amap.com%2Fmap ...

高德地图自定义镂空区域

高德地图自定义镂空区域相关推荐

最新文章

热门文章