添加覆盖物
话不多说,先上图,看图写代码(添加点、弹窗的在上一章有整理)
1、圆形围栏:
2、多边形围栏:
3、行政区围栏:
画图:
图形的展示:
// 画围栏drawFence(fenceDetail: any) {this.fenceDetail = null; // 数据处理const pointArr: any = []; // 数据处理this.fencePolygon = []; // 数据处理let pointView: any = []; // 数据处理let points: any = []; // 数据处理const fenceSpecialJson = JSON.parse(fenceDetail.fenceSpecialJson); // 数据处理// 圆if (fenceDetail.fenceShape === 0) {this.fencePolygon = new BMap.Circle(fenceSpecialJson.centerPoint,fenceSpecialJson.radius,{strokeColor: '#6099FF', strokeWeight: 2, strokeOpacity: 0.5 });// 处理圆坐标pointView = fenceDetail.fencePolygon.replace('MULTIPOLYGON(((', '').replace(')))', '').split(',').map((item: string) => {const values = item.split(' ');return {lng: Number(values[0]),lat: Number(values[1]),};});}// 多边形if (fenceDetail.fenceShape === 1) {fenceDetail.fencePoints[0].forEach((ele: any) => {pointArr.push(new BMap.Point(ele.lng, ele.lat));});// 创建多边形this.fencePolygon = new BMap.Polygon(pointArr, {strokeColor: '#6099FF',strokeWeight: 2,strokeOpacity: 0.5,});pointView = pointView.concat(this.fencePolygon.getPath());points = this.fencePolygon.getPath();}let adminPoint: any;// 行政区围栏if (fenceDetail.fenceShape === 2) {const bdary = new BMap.Boundary();// 获取行政区围栏的方法,因为数据已存储 所以我没有重新获取// bdary.get(fenceSpecialJson.administrative, (rs: any) => {fenceDetail.fencePoints.forEach((element: any, i: number) => {pointView = pointView.concat(element);this.fencePolygonArr[i] = new BMap.Polygon(element, {strokeColor: '#6099FF',strokeWeight: 2,strokeOpacity: 0.5,});this.map.addOverlay(this.fencePolygonArr[i]);});adminPoint = fenceDetail.fencePoints[0][0];this.map.setViewport(pointView); // 调整视野if (!this.isPassedValue) {this.fencePop(fenceDetail, adminPoint);}// });}// 行政区围栏外的要逐个添加if (fenceDetail.fenceShape !== 2) {this.map.addOverlay(this.fencePolygon);this.map.setViewport(pointView); // 调整视野 为避免异步,拆开this.fencePop(fenceDetail); // 围栏弹窗}}
圆:需要圆心、半径
Circle:Circle(圆心: Point, 半径: Number, opts: CircleOptions)
CircleOptions:strokeColor-圆形边线颜色 fillColor-圆形填充颜色 strokeOpacity-圆形边线透明度
多边形:需要点数组
Polygon:Polygon(points: Array, opts: PolygonOptions)
行政区 :
Boundary():创建行政区域搜索的对象实例
方法:get(name: String, callback: function) name: 查询省、直辖市、地级市、或县的名称 。回调返回行政区的 数组。再利用多边形的方法进行画围栏
上面的代码中因为数据已存储 所以我没有重新获取,因为行政区围栏有多个数组,所以我将起单独处理,单独添加
围栏添加、视野调整 :
this.map.addOverlay(围栏);
this.map.setViewport(点数组);
注:
因为行政区围栏有多个数组,所以我将起单独处理,单独添加,另外调整视野因为原来获取行政区围栏是通过Boundary获取的,会有异步效果,所以对行政区的视野调整进行了拆分。