百度地图开发探索 添加覆盖物（圆形、多边形、行政区）围栏 typescript angular

添加覆盖物

话不多说，先上图，看图写代码（添加点、弹窗的在上一章有整理）

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获取的，会有异步效果，所以对行政区的视野调整进行了拆分。