vue baidu map【自用】

<comment>
 需求描述（2019/10/24）
    广州市南沙区水务局BI大屏一张图定制化需求：
    1、当前地理信息一张图是通过在线调用百度地图实现（在线地图），由于该项目属于地下管网施工，若基于该地图（在线或离线），参照将各施工区段设计图纸（CAD图）在地图上以简单的线段来标记于在线地图之上，并满足可以以将这些线使用不同颜色来表示已完工、正在施工、未施工（绿、黄、红）
    2、若上述方法评估之后行不通，通过购买第三方公司高清航拍GIS图（离线或静态），替换掉当前地图应用方式，并且可支持比例放大和缩小，同理将各施工区段设计图纸（CAD图）在地图上以简单的线段来标记于在线地图之上，并满足可以以将这些线使用不同颜色来表示已完工、正在施工、未施工（绿、黄、红）
开发时间 2019/10/24
开发者 lbh
</comment>
<template>
  <div id="Map" :class="mapStyle.style">
    <baidu-map
      :continuous-zoom="true"
      @zoomend="zoomEnd"
      @click="mapClick"
      class="bMap"
      :center="mainData.city"
      :zoom="mainData.zoom"
      @ready="initMap"
      :mapStyle="mapStyle"
      :scroll-wheel-zoom="true"
      ak="xfpEeKgg9wUnwyVAAzBEL1GRZROmAB32"
    >
      <template>
        <!-- 地图搜索插件 -->
        <bm-local-search
          :keyword="keyword"
          :auto-viewport="true"
          :location="location"
          @markersset="markersset"
        ></bm-local-search>
        <!-- <bm-view class="seachList"></bm-view> -->
      </template>
      <template>
        <!-- 地图类型切换 -->
        <bm-map-type
          :map-types="['BMAP_NORMAL_MAP', 'BMAP_SATELLITE_MAP']"
          anchor="BMAP_ANCHOR_TOP_LEFT"
        ></bm-map-type>
      </template>

      <template>
        <!-- 比例尺 -->
        <bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
      </template>
      <template>
        <!-- 缩放按钮 -->
        <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
      </template>

      <template>
        <!-- 南沙区水务局主要部门 -->
        <bm-marker
          v-for="(der,index) in pointsList"
          :title="der.name"
          :key="'der'+index"
          animation="BMAP_ANIMATION_BOUNCE"
          :position="{lng: parseFloat(der.lng), lat: parseFloat(der.lat)}"
          :icon="{url: der.logo , size: {width: 50, height: 50}}"
          @click="markClick($event,der)"
        ></bm-marker>
      </template>
      <template v-if="false">
        <bm-label
          v-for="(labeler,index) in pointsList"
          :position="{lng: parseFloat(labeler.lng), lat: parseFloat(labeler.lat)}"
          :key="'pLabel'+index"
          :offset="{height:10,width:-40}"
          :content="labeler.name"
          :labelStyle="{color: '#005CA1', fontSize : '10px',borderColor:'#005CA1',backgroundColor:'#fff',padding:'3px'}"
        />
      </template>
      <template>
        <!-- 井盖数据：点聚合 -->
        <bml-marker-clusterer :averageCenter="true" :maxZoom="17">
          <bm-marker
            class="coverPoint"
            v-for="(marker,index) in coverPoint"
            :position="{lng: parseFloat(marker.lng), lat:parseFloat(marker.lat)}"
            :key="'coverPoint'+index"
            @mouseover="coverPointOver($event,marker)"
            @mouseout="coverPointOut($event,marker)"
            :icon="{url: wellImg[3] , size: {width: 25, height: 25}}"
          ></bm-marker>
          <!-- :icon="{url: wellImg[3] , size: {width: 25, height: 25}}"   -->
        </bml-marker-clusterer>
      </template>
      <template v-if="currentZoom>20">
        <!-- 井盖标记-->
        <bm-label
          v-for="(labeler,index) in coverPoint"
          :position="{lng: parseFloat(labeler.lng), lat: parseFloat(labeler.lat)}"
          :key="'wellLabel'+index"
          :content="labeler.number"
          :labelStyle="{color: 'red', fontSize : '10px'}"
        />
      </template>
      <!-- 管道开始的点 -->
      <!-- <template v-if="false">
        <bml-marker-clusterer :averageCenter="true" :maxZoom="16">
          <bm-marker
            v-for="(pointer,index) in pathListStart"
            :key="'pointStart'+index"
            :position="{lng: pointer.lng, lat: pointer.lat}"
          ></bm-marker>
        </bml-marker-clusterer>
      </template>-->
      <template v-if="true">
        <!-- 管道  :strokeColor="index%2==0?'#e6a23c':'#f56c6c'" -->
        <bm-polyline
          v-for="(pather,index) in pathList"
          :key="'path'+index"
          :path="[pather.startPoint,pather.endPoint]"
          @click="pathClick($event,pather)"
          :strokeColor="pather.status==2?pathColor[2]:pather.status==1?pathColor[1]:pathColor[0]"
          :strokeOpacity="1"
          :strokeWeight="5"
        ></bm-polyline>
      </template>

      <template>
        <!-- 井盖的信息窗体 -->
        <bm-info-window
          :position="{lng: parseFloat(coverData.lng), lat: parseFloat(coverData.lat)}"
          :offset="{height:-20,width:-3}"
          :width="250"
          :height="120"
          :show="Cvisible==true"
          @close="Cvisible=false"
        >
          <div style="padding:10px 0">
            <table class="modalTable">
              <tr>
                <td style="width:75px;">
                  <span class="labelNormal">井盖编号：</span>
                </td>
                <td>
                  <span class="labelName">{{coverData.number}}</span>
                </td>
              </tr>
              <tr>
                <td style="width:75px;">
                  <span class="labelNormal">施工状态：</span>
                </td>
                <td>
                  <span class="labelName">{{'--'}}</span>
                </td>
              </tr>
              <tr>
                <td style="width:75px;">
                  <span class="labelNormal">施工单位：</span>
                </td>
                <td>
                  <span class="labelName">{{coverData.buildUnit}}</span>
                </td>
              </tr>
              <tr>
                <td style="width:75px;">
                  <span class="labelNormal">设计单位：</span>
                </td>
                <td>
                  <span class="labelName">{{coverData.designUnit}}</span>
                </td>
              </tr>
            </table>
          </div>
        </bm-info-window>
      </template>
      <template>
        <!-- 管道的信息窗体 -->
        <bm-info-window
          :position="pipeData.pointcenter"
          :offset="{height:-20,width:-3}"
          :width="260"
          :height="260"
          :show="Pvisible==true"
          @close="Pvisible=false"
        >
          <div style="padding:10px 0">
            <table class="modalTable pathModalTable">
              <tr>
                <td style="width:85px;">
                  <span class="labelNormal">污水管编号：</span>
                </td>
                <td>
                  <span class="labelName">{{pipeData.pipeNumber}}</span>
                </td>
              </tr>
              <tr>
                <td style="width:85px;">
                  <span class="labelNormal">施工状态：</span>
                </td>
                <td>
                  <span class="labelName">{{'--'}}</span>
                </td>
              </tr>
              <!-- 平面距离	管材	管道基础	管径	坡度
              -->
              <tr>
                <td style="width:85px;">
                  <span class="labelNormal">平面距离：</span>
                </td>
                <td>
                  <span class="labelName">{{pipeData.pipeDistance}}</span>
                </td>
              </tr>
              <tr>
                <td style="width:85px;">
                  <span class="labelNormal">管材：</span>
                </td>
                <td>
                  <span class="labelName">{{pipeData.pipeMaterial}}</span>
                </td>
              </tr>
              <tr>
                <td style="width:85px;">
                  <span class="labelNormal">管道基础：</span>
                </td>
                <td>
                  <span class="labelName">{{pipeData.pipeBasic}}</span>
                </td>
              </tr>
              <tr>
                <td style="width:85px;">
                  <span class="labelNormal">管径：</span>
                </td>
                <td>
                  <span class="labelName">{{pipeData.pipeCircle}}</span>
                </td>
              </tr>
              <tr>
                <td style="width:85px;">
                  <span class="labelNormal">坡度：</span>
                </td>
                <td>
                  <span class="labelName">{{pipeData.pipeSlope}}</span>
                </td>
              </tr>
              <tr>
                <td style="width:85px;">
                  <span class="labelNormal">施工单位：</span>
                </td>
                <td>
                  <span class="labelName">{{pipeData.buildUnit}}</span>
                </td>
              </tr>
              <tr>
                <td style="width:85px;">
                  <span class="labelNormal">设计单位：</span>
                </td>
                <td>
                  <span class="labelName">{{pipeData.designUnit}}</span>
                </td>
              </tr>
            </table>
          </div>
        </bm-info-window>
      </template>
      <template v-if="false">
        <!-- 屏蔽层 -->
        <bm-boundary
          name="广州南沙区"
          :strokeWeight="3"
          strokeColor="#FFFFFF"
          :fillOpacity="0.2"
          fillColor="#FFFFFF"
        ></bm-boundary>
      </template>
    </baidu-map>
    <!-- 搜索框 -->
    <div class="searchContainer">
      <!-- <div class="input-outer">
        <i class="input-icon el-icon-search"></i>
        <input type="text" class="input-inner" v-model="keyword" />
      </div>-->
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="keyword"
        size="small"
        clearable
      ></el-input>
    </div>
    <!-- 自定义弹出框 -->
    <el-dialog :visible.sync="visible" top="25vh">
      <span slot="title" style="font-size:16px">详情</span>
      <table>
        <tr>
          <td style="width:75px;">
            <span class="labelNormal">项目名称：</span>
          </td>
          <td>
            <span class="labelName">{{modalData.name}}</span>
          </td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="visible = false">取 消</el-button> -->
        <el-button type="primary" @click.stop="showDetail(modalData.id)">查看详情</el-button>
      </span>
    </el-dialog>
    <!-- <div class="modalContainer" ref="$modalContainer" v-show="Cvisible" @click="visible=!visible">
      <div class="modal" ref="$modal" v-show="Cvisible">
        <div class="modal-title">
          <span style=" font-size: 15px;font-weight:bold">井盖详情</span>
          <span class="icon" @click.stop="Cvisible=false">
            <i class="el-icon-error"></i>
          </span>
        </div>
        <div class="modal-body">
          <table>
            <tr>
              <td style="width:75px;">
                <span class="labelNormal">井盖编号：</span>
              </td>
              <td>
                <span class="labelName">{{coverData.number}}</span>
              </td>
            </tr>
            <tr>
              <td style="width:75px;">
                <span class="labelNormal">施工状态：</span>
              </td>
              <td>
                <span class="labelName">{{'--'}}</span>
              </td>
            </tr>
            <tr>
              <td style="width:75px;">
                <span class="labelNormal">施工单位：</span>
              </td>
              <td>
                <span class="labelName">{{coverData.buildUnit}}</span>
              </td>
            </tr>
            <tr>
              <td style="width:75px;">
                <span class="labelNormal">设计单位：</span>
              </td>
              <td>
                <span class="labelName">{{coverData.designUnit}}</span>
              </td>
            </tr>
          </table>
        </div>
        <div class="modal-footer"></div>
      </div>
    </div>-->
  </div>
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue"; //百度地图接入
// import { BmlMarkerClusterer } from "vue-baidu-map";
import { BmMarker, BmView, BmPolyline, BmBoundary } from "vue-baidu-map"; //百度地图 点
// import { BmView } from "vue-baidu-map"; //搜索结果面板
// import { BmPolyline } from "vue-baidu-map"; //线段
// import { BmBoundary } from "vue-baidu-map"; //屏蔽层
import { BmMapType } from "vue-baidu-map"; //地图类型控件  普通图、卫星图、卫星加路网混合图和三维图
import { BmInfoWindow } from "vue-baidu-map"; //地图弹出框
import { BmScale } from "vue-baidu-map"; //地图比例尺
import { BmLabel } from "vue-baidu-map"; //地图标记
import { BmNavigation } from "vue-baidu-map"; //地图放大缩小按钮
import { BmLocalSearch } from "vue-baidu-map"; //地区搜索
import { BmlMarkerClusterer } from "vue-baidu-map"; //点聚合
import coverPoint from "./coverPoint"; //井盖点的数据
import pathList from "./pathList"; //管道的数据
import pointsList from "./pointList"; //管道的数据
export default {
  name: "Map",
  components: {
    BaiduMap,
    BmLabel, //标签
    BmScale, //比例尺
    BmView, //搜索结果面板
    BmNavigation, //放大缩小按钮
    BmLocalSearch, //地区搜索
    BmlMarkerClusterer, //点聚合
    BmMarker, //标记点
    BmBoundary, //屏蔽层
    BmMapType, //地图类型控件
    BmInfoWindow, //信息窗体-弹出框
    BmPolyline //线段
  },
  data() {
    return {
      location: "广州南沙",
      keyword: "",
      currentZoom: 1,
      //地图主题样式
      mapStyle: {
        // styleJson: [
        //   {
        //     featureType: "all",
        //     elementType: "geometry",
        //     stylers: {
        //       hue: "#091143",
        //       saturation: 100
        //     }
        //   },
        //   {
        //     featureType: "water",
        //     elementType: "all",
        //     stylers: {
        //       color: "#ffffff"
        //     }
        //   }
        // ]
        style: "light" //dark light midnight normal
      },
      visible: false,
      Cvisible: false,
      Pvisible: false,
      modalData: {
        name: "",
        id: ""
      },
      coverData: {
        number: "",
        lng: 113.1,
        lat: 22.1,
        status: "",
        buildUnit: "",
        designUnit: ""
      },
      pipeData: {
        startCoverNumber: "",
        endCoverNumber: "",
        startPoint: {
          lng: 113.1,
          lat: 22.1
        },
        endPoint: {
          lng: 113.1,
          lat: 22.1
        },
        pointcenter: { lng: 113, lat: 22 },
        pipeDistance: "",
        pipeMaterial: "",
        pipeBasic: "",
        pipeCircle: "",
        pipeSlope: "",
        buildUnit: "",
        designUnit: "",
        status: ""
      },
      BMap: null, //地图对象
      map: null, //地图实例
      blist: [], //反向屏蔽层数据
      districtLoading: 0, //反向屏蔽层计数器
      mainData: {
        //地图初始化数据
        city: { lng: 113.531, lat: 22.7046 },
        zoom: 11
      },
      currentPointId: "", //当前点击的点
      pointsList: [], //点数据
      coverPoint: [],
      pathColor: ["red", "yellow", "#0b72b8"],
      pathList: [], //线数据
      pathListStart: [],
      wellImg: {
        1: require("./img/cover1.png"),
        2: require("./img/cover2.png"),
        3: require("./img/cover3.png")
      }
      //img:require('@/assets/left_con.png')
      //img: require("./q.jpg")
    };
  },
  computed: {},
  created() {
    this.pointsList = pointsList; //主要单位
    this.coverPoint = coverPoint; //井盖
    this.pathList = pathList; //管道
  },
  mounted() {},
  watch: {
    // 标记撒点监听
  },
  methods: {
    // 地图init  组件引入之后自动执行
    initMap({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      this.map.enableScrollWheelZoom();
      this.blist = [];
      let url = window.location.search;
      // if (url) {
      //   sessionStorage.setItem("token", url.substr(1));
      // } else {
      //   let token = sessionStorage.getItem("token");
      //   if (!token) {
      //     this.$message.error("系统异常，详情请联系管理员");
      //     return;
      //   }
      // }
      //this.drawImage()
      //行政区域增加屏蔽层
      this.addDistrict("广州南沙区");
      //请求后台数据
      //this.getOrgInfo();
    },
    mapClick(data) {
      this.Cvisible = false;
    },
    zoomEnd(e) {
      this.currentZoom = e.target.getZoom();
    },
    /**搜索添加标注之后的回调*/
    markersset(data) {
      // setTimeout(() => {
      //   this.map.setZoom(this.currentZoom ? this.currentZoom : 12);
      // }, 800);
    },
    setZoom(type) {
      //type == "max" && this.map.setZoom(20);
      this.mainData.zoom = 19;
    },
    //请求后台数据
    getOrgInfo() {
      //请求点数据
      this.getPointsAjax();
      //请求线数据
      this.getLinesAjax();
    },
    /**请求点数据 vue方法画点*/
    getPointsAjax() {
      let aa = new FormData();
      aa.set("token", this.$Api.gettoken("token"));
      aa.set("level", "5");
      this.$Api.post("App/ProjectExtra/get_area_info", aa).then(success => {
        if (success.data.code == "0") {
          //vue方法画点
          this.pointsList = success.data.data;
          //地图相关
        } else {
          //this.$Api.message('获取失败', 'error');
        }
      });
    },
    /**请求线数据 原生方法画线*/
    getLinesAjax() {
      this.$Api
        .getSpecial("http://39.107.87.101:9001/spmTempService/map")
        .then(success => {
          if (success.data.code == "200") {
            this.pathList = success.data.body;
            let pointList = [];
            this.pathList.forEach(item => {
              let points = item.path;
              pointList.push(points[0]);
            });
            this.pathListStart = pointList;
            //this.drawLine(); //原生方法画线
          } else {
            //this.$Api.message('商品获取失败', 'error');
          }
        });
    },
    //地图标记点的点击事件
    markClick(e, item) {
      this.visible = true;
      this.modalData = item;
      // this.$refs['$modal'].style.left = e.clientX+'px'
      // this.$refs['$modal'].style.top=e.clientY+'px'
      //this.currentPointId = id;
    },
    pathClick(e, item) {
      this.pipeData = item;
      this.pipeData.pointcenter = this.getPathCenter(item);
      setTimeout(() => {
        this.Pvisible = true;
      }, 10);
    },
    getPathCenter(item) {
      var pointArr = [
        new this.BMap.Point(item.startPoint.lng, item.startPoint.lat),
        new this.BMap.Point(item.endPoint.lng, item.endPoint.lat)
      ];
      var lng1 = parseFloat(pointArr[0].lng);
      var lat1 = parseFloat(pointArr[0].lat);
      var lng2 = parseFloat(pointArr[1].lng);
      var lat2 = parseFloat(pointArr[1].lat);
      var lngca = (Math.max(lng1, lng2) - Math.min(lng1, lng2)) / 2;
      var latca = (Math.max(lat1, lat2) - Math.min(lat1, lat2)) / 2;
      var lngcenter = Math.min(lng1, lng2) + lngca;
      var latcenter = Math.min(lat1, lat2) + latca;
      var pointcenter = new this.BMap.Point(lngcenter, latcenter);
      return pointcenter;
    },
    /**井盖事件 */
    coverPointOver(e, data) {
      this.coverData = data;
      setTimeout(() => {
        this.Cvisible = true;
      }, 10);

      // this.$refs["$modal"].style.left = e.clientX + "px";
      //this.$refs["$modal"].style.top = e.clientY + "px";
    },
    coverPointOut(e, data) {
      this.Cvisible = false;
    },
    clickTest(e, item) {},
    // 点击“查看详情”按钮
    showDetail(id) {
      this.visible = false;
      let _href = window.location.host;
      if (_href.indexOf("autobuild") != -1) {
        window.open(
          "http://autobuild.1357.cn/Admin/SmartScreen/index?access_org_id=" +
            id,
          "_blank"
        );
      } else if (_href.indexOf("spm") != -1) {
        window.open(
          "http://spm.1357.cn/Admin/SmartScreen/index?access_org_id=" + id,
          "_blank"
        );
      }
    },
    //原生方法画线
    drawLine() {
      // 创建polyline对象
      this.pathList.forEach(item => {
        var path = item.path;
        var pois = [
          new this.BMap.Point(parseFloat(path[0].lng), parseFloat(path[0].lat)),
          new this.BMap.Point(parseFloat(path[1].lng), parseFloat(path[1].lat))
        ];
        /**
         *  BMap_Symbol_SHAPE_BACKWARD_CLOSED_ARROW	箭头方向向下的闭合箭头
            BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW	箭头方向向上的闭合箭头
            BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW	箭头方向向下的非闭合箭头
            BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW	箭头方向向上的非闭合箭头
         * 
         */

        var sy = new this.BMap.Symbol(BMap_Symbol_SHAPE_CIRCLE, {
          scale: 0.4, //图标缩放大小
          //strokeColor: item.status==2?this.pathColor[2]:item.status==1?this.pathColor[1]:this.pathColor[0], //设置矢量图标的线填充颜色
          strokeColor: "#fff", //设置矢量图标的线填充颜色
          strokeWeight: "2" //设置线宽
        });
        var icons = new this.BMap.IconSequence(sy, "10px", "30px", true);
        var polyline = new this.BMap.Polyline(pois, {
          enableEditing: false, //是否启用线编辑，默认为false
          enableClicking: true, //是否响应点击事件，默认为true
          icons: [icons], //线上的icon
          strokeWeight: "5", //折线的宽度，以像素为单位
          strokeOpacity: 1, //折线的透明度，取值范围0 - 1
          strokeColor:
            item.status == 2
              ? this.pathColor[2]
              : item.status == 1
              ? this.pathColor[1]
              : this.pathColor[0] //折线颜色
        });
        this.map.addOverlay(polyline);
      });
    },
    drawImage() {
      // 西南角和东北角
      var SW = new this.BMap.Point(113.4938821223, 22.7813844663);
      var NE = new this.BMap.Point(113.5602469939, 22.8256307025);
      // 初始化GroundOverlay
      let groundOverlay = new this.BMap.GroundOverlay(
        new this.BMap.Bounds(SW, NE),
        {
          opacity: 1, //图层透明度
          displayOnMinLevel: 10, //图层显示的最小级别
          displayOnMaxLevel: 22, //图层显示的最大级别
          imageURL: this.img //图层中图片url
        }
      );
      this.map.addOverlay(groundOverlay);
    },
    /**
     * 以下方法全都是为了给“广州南沙区增加屏蔽层”
     */
    addDistrict(districtName) {
      //使用计数器来控制加载过程
      this.districtLoading++;
      var bdary = new this.BMap.Boundary();
      bdary.get(districtName, rs => {
        //获取行政区域
        var count = rs.boundaries.length; //行政区域的点有多少个
        if (count === 0) {
          alert("未能获取当前输入行政区域");
          return;
        }
        for (let i = 0; i < count; i++) {
          this.blist.push({ points: rs.boundaries[i], name: districtName });
        }
        //加载完成区域点后计数器-1
        this.districtLoading--;
        if (this.districtLoading == 0) {
          //全加载完成后画端点
          this.drawBoundary();
        }
      });
    },
    //反选行政区
    drawBoundary() {
      //包含所有区域的点数组
      var pointArray = [];

      /*画遮蔽层的相关方法
       *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
       *      这样就做出了一个经过多次西北角的闭合多边形*/
      //定义中国东南西北端点，作为第一层
      var pNW = { lat: 59.0, lng: 73.0 };
      var pNE = { lat: 59.0, lng: 136.0 };
      var pSE = { lat: 3.0, lng: 136.0 };
      var pSW = { lat: 3.0, lng: 73.0 };
      //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
      var pArray = [];
      pArray.push(pNW);
      pArray.push(pSW);
      pArray.push(pSE);
      pArray.push(pNE);
      pArray.push(pNW);
      //循环添加各闭合区域
      for (var i = 0; i < this.blist.length; i++) {
        //添加显示用标签层
        var label = new this.BMap.Label(this.blist[i].name, {
          offset: new this.BMap.Size(20, -10)
        });
        label.hide();
        this.map.addOverlay(label);

        //添加多边形层并显示
        var ply = new this.BMap.Polygon(this.blist[i].points, {
          strokeWeight: 4,
          strokeColor: "#ffffff",
          fillOpacity: 0.01,
          fillColor: " #FFFFFF"
        }); //建立多边形覆盖物
        // ply.name = this.blist[i].name;
        // ply.label = label;
        this.map.addOverlay(ply);

        //添加名称标签层
        // var centerlabel = new this.Label(this.blist[i].name, { offset: new this.BMap.Size(0, 0) });
        // centerlabel.setPosition(ply.getBounds().getCenter());
        // this.map.addOverlay(centerlabel);

        //将点增加到视野范围内
        var path = ply.getPath();
        pointArray = pointArray.concat(path);
        //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
        pArray = pArray.concat(path);
        pArray.push(pArray[0]);
      }

      //限定显示区域，需要引用api库
      // var boundply = new this.BMap.Polygon(pointArray);
      // BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
      // this.map.setViewport(pointArray);    //调整视野

      //添加遮蔽层
      var plyall = new this.BMap.Polygon(pArray, {
        strokeOpacity: 0.0000001,
        strokeColor: "#000000",
        strokeWeight: 0.00001,
        fillColor: "rgba(26, 35, 42, 1)",
        fillOpacity: 0.5
      }); //建立多边形覆盖物
      this.map.addOverlay(plyall);
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
#Map {
  height: 100%;
  position: relative;
  .el-dialog__wrapper {
    background: rgba(0, 0, 0, 0.05);
  }
  .el-dialog {
    width: 300px;
  }
  .searchContainer {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 300px;
    .input-outer {
      position: relative;
      .input-icon {
        position: absolute;
        top: 9px;
        left: 7px;
      }
      .input-inner {
        border-radius: 4px;
        border: none;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 32px;
        line-height: 32px;
        outline: none;
        padding: 0 15px;
        padding-left: 25px;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        width: 100%;
      }
    }
  }
  .anchorBL {
    display: none;
  }
  .dark .BMap_scaleTxt,
  .midnight .BMap_scaleTxt {
    .BMap_scaleTxt {
      color: #fff !important;
    }
  }
  .normal .BMap_scaleTxt,
  .light .BMap_scaleTxt {
    .BMap_scaleTxt {
      color: #000 !important;
    }
  }
  .modalContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.12);
  }
  .modal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 150px;
    //transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 5px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    color: rgba(255, 255, 255, 0.8);
    table {
      tr {
        td {
          vertical-align: top;
        }
      }
    }
    z-index: 10;
    .modal-title {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      padding: 0px 10px;
      color: rgba(0, 0, 0, 1);
      .icon {
        padding: 0px 0 10px 6px;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.8);
        cursor: pointer;
      }
    }
    .modal-body {
      padding: 5px 15px;
      height: 54px;
      color: rgba(0, 0, 0, 1);
    }
    .modal-footer {
      padding: 5px 15px;
      text-align: right;
    }
    .labelNormal {
      font-size: 14px;
      font-family: SourceHanSansCN-Normal;
    }
    .labelName {
      font-size: 14px;
      font-family: SourceHanSansCN-Normal;
    }
  }
  .bMap {
    width: 100%;
    height: 100%;
  }
  .BMap_pop {
    div {
    }
  }
  .modalTable {
    tr {
      td {
        padding: 3px 0;
        vertical-align: top;
      }
    }
  }
  .pathModalTable {
    tr {
      td:first-child {
        text-align: right;
      }
    }
  }
  .BMap_pop div,
  .BMap_pop .BMap_center,
  .BMap_pop .BMap_top,
  .BMap_pop .BMap_bottom {
    border: none !important;
  }
  .BMap_Marker.BMap_noprint {
    transform: scale(0.5);
  }
  .btn {
    cursor: pointer;
    padding: 6px 10px;
    background: transparent;
    text-align: center;
    color: #fff;
    background: rgba(28, 217, 255, 1);
    border-radius: 5px;
    // box-shadow: 0px 0px 30px rgba(28, 217, 255, 0.8) inset;
  }
}
</style>