init

ruoyi-ui/src/map/BMapCreateFirstGrid.vue

@@ -0,0 +1,308 @@
+<template>
+  <div class="map-box">
+    <div class="map-grid" ref="mapContainer"></div>
+    <div class="menu-wrap">
+      <div class="please-box">
+        <span>请选择</span>
+        <i class="el-icon-arrow-up" />
+      </div>
+      <el-tree
+        :data="mapMenuData"
+        node-key="id"
+        default-expand-all
+        show-checkbox
+        :highlight-current="true"
+        :expand-on-click-node="false"
+        :check-on-click-node="true"
+        :default-checked-keys="checkedKeys"
+        @check-change="handleCheckClick"
+        class="tree-box"
+        ref="tree"
+      >
+        <span class="custom-tree-node" slot-scope="{ node }">
+          <span class="tree-title-box">
+            <span class="tree-title">{{ node.label }}</span>
+          </span>
+        </span>
+      </el-tree>
+      <el-pagination
+            @current-change="handleCurrentChange"
+            layout="->,total,prev,next"
+            :total="total"
+            :current-page="pageNum"
+            class="pagi-box"
+        ></el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import WKT from "terraformer-wkt-parser";
+import { getUserDefaultLoc } from '@/api/customRadar/customRadar.js'
+export default {
+  name: "BMapCreateFirstGrid",
+  props: ["mapMenuData", "shapeIds","total","pageNum"],
+  data() {
+    return {
+      checkedKeys: [],
+      polygonArr: [],
+      layerInfo: {
+        strokeColor: "#2094ff",
+        strokeWeight: 2,
+        strokeOpacity: 0.8,
+        strokeStyle: "solid",
+        fillColor: "#2094ff",
+        fillOpacity: 0.4,
+      },
+    };
+  },
+  watch: {
+    mapMenuData: {
+      handler(newVal) {
+        this.showWKT(newVal);
+      },
+      deep: true,
+    },
+    checkedKeys: {
+      handler(newVal, oldVal) {
+        this.$emit("set-checkedkey", newVal);
+      },
+    },
+    shapeIds(val) {
+      this.checkedKeys = val;
+      this.$refs.tree.setCheckedKeys(this.checkedKeys);
+    },
+    polygonArr(val) {
+      if (val.length > 0 && this.shapeIds.length > 0) {
+        this.shapeIds.map((shapeId) => {
+          const item = val.find((v) => v.shapeId === shapeId);
+          if (item) {
+            item.polygon.setFillOpacity(0.2);
+            item.polygon.setFillColor("red");
+            item.polygon.setStrokeColor("red");
+          }
+        });
+      }
+    },
+  },
+  mounted() {
+    this.initMap();
+  },
+  methods: {
+    handleCurrentChange(num){
+      this.$emit('handleCurrentChange',num);
+    },
+    // 初始化地图
+    initMap() {
+      this.mapLoading = true;
+      this.map = new BMapGL.Map(this.$refs.mapContainer);
+      getUserDefaultLoc().then((res) => {
+        if (res.code === 200) {
+          const locationAddress = res?.data?.address || '临海市'
+          this.map.centerAndZoom(locationAddress, 14)
+        }
+      })
+      this.map.enableScrollWheelZoom();
+    },
+    /**
+     * 树节点被点击事件单选的逻辑不要了，要多选
+     */
+    handleCheckClick(data, checked, self) {
+      this.checkedKeys = this.$refs.tree.getCheckedKeys();
+      const item = this.polygonArr.find((v) => v.shapeId === data.shapeId);
+      // 选中
+      if (item) {
+        if (checked) {
+          // this.setAllFillColor();
+          item.polygon.setFillOpacity(0.2);
+          item.polygon.setFillColor("red");
+          item.polygon.setStrokeColor("red");
+          this.map.centerAndZoom(item.polygon.points[0].latLng, 14);
+        } else {
+          item.polygon.setFillOpacity(0.4);
+          item.polygon.setFillColor(this.layerInfo.strokeColor);
+          item.polygon.setStrokeColor(this.layerInfo.strokeColor);
+        }
+      }
+      // this.$refs.tree.setCheckedNodes([]);
+      // this.$refs.tree.setCheckedNodes([data]);
+    },
+    chooseColor() {},
+    showWKT(data) {
+      this.polygonArr = [];
+      this.map.clearOverlays();
+      data.map((item) => {
+        if (item.disabled) return;
+        const wkt = item.shapeWkt;
+        const geojson = WKT.parse(wkt);
+        this.renderPolygon(geojson.coordinates, item.shapeId);
+      });
+    },
+    /**
+     * 绘制多边形覆盖物
+     */
+    renderPolygon(coordinates, id) {
+      const than = this;
+      let points = [];
+      coordinates.map((ring) => {
+        points = ring.map((coord) => {
+          return new BMapGL.Point(coord[0], coord[1]);
+        });
+      });
+      const polygon = new BMapGL.Polygon(points, {
+        ...this.layerInfo,
+        shapeId: id, // 添加额外的属性
+      });
+      polygon.addEventListener("click", function (e) {
+        than.handlerPolygon(e.target);
+      });
+      this.polygonArr.push({
+        polygon: polygon,
+        shapeId: id,
+      });
+      this.map.addOverlay(polygon);
+      polygon.show();
+      this.map.centerAndZoom(points[0], 14);
+    },
+    /**
+     * 多边形点击事件
+     */
+    handlerPolygon(polygon) {
+      const currentColor = polygon.getFillColor();
+      const shapeId = polygon._config.shapeId;
+      const shapeItem = this.mapMenuData.find(
+        (shape) => shape.shapeId === shapeId
+      );
+      if (shapeItem) {
+        if (this.checkedKeys.includes(shapeItem.shapeId)) {
+          const index = this.checkedKeys.findIndex(
+            (v) => v === shapeItem.shapeId
+          );
+          if (index > -1) this.checkedKeys.splice(index, 1);
+        } else {
+          this.checkedKeys = [...this.checkedKeys, shapeItem.shapeId];
+        }
+        this.$refs.tree.setCheckedKeys(this.checkedKeys);
+      } else {
+        this.$message({
+          type: "info",
+          message: "未找到图形信息",
+        });
+      }
+      if (currentColor === this.layerInfo.strokeColor) {
+        // this.setAllFillColor();
+        polygon.setFillOpacity(0.2);
+        polygon.setFillColor("red");
+        polygon.setStrokeColor("red");
+      } else {
+        polygon.setFillOpacity(0.4);
+        polygon.setFillColor(this.layerInfo.strokeColor);
+        polygon.setStrokeColor(this.layerInfo.strokeColor);
+        // this.setAllFillColor();
+      }
+    },
+    setAllFillColor() {
+      const overlays = this.map.getOverlays();
+      overlays.map((overlay) => {
+        const currentColor = overlay.getFillColor();
+        if (currentColor === this.layerInfo.strokeColor) return;
+        overlay.setFillOpacity(0.4);
+        overlay.setFillColor(this.layerInfo.strokeColor);
+        overlay.setStrokeColor(this.layerInfo.strokeColor);
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.map-box {
+  position: relative;
+  .map-grid {
+    width: 100%;
+    height: 650px;
+    margin-bottom: 10px;
+  }
+  .menu-wrap {
+    height: 650px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.75);
+    width: 250px;
+    z-index: 200;
+    position: absolute;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    ::v-deep
+      .el-tree--highlight-current
+      .el-tree-node.is-current
+      > .el-tree-node__content {
+      background-color: transparent;
+    }
+
+    ::v-deep .el-tree-node__content:hover {
+      background-color: transparent;
+    }
+    .please-box {
+      height: 40px;
+      line-height: 40px;
+      padding: 0 10px;
+      color: #fff;
+      border-bottom: 1px solid #4886f8;
+      margin-bottom: 10px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .tree-box {
+      overflow-y: scroll;
+      overflow-x: hidden;
+      height: calc(100% - 51px);
+      width: 260px;
+      background: transparent;
+      color: #fff;
+      // ::v-deep .el-checkbox__inner {
+      //   border-radius: 50%;
+      // }
+      .tree-title {
+        width: 200px;
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      ::v-deep .is-checked .tree-title {
+        color: #4886f8;
+      }
+      ::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner {
+        background-color: #b9b9b9;
+        border-color: #959595;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+.pagi-box{
+  background:transparent;
+  position: relative;
+  color: #fff;
+  top: -166px;
+  // right: 40px;
+  ::v-deep .el-pagination__total{
+    color: #fff;
+  }
+  ::v-deep .btn-prev{
+    color: #fff;
+    background-color:transparent;
+  }
+  ::v-deep .btn-next{
+    color: #fff;
+    background-color:transparent;
+  }
+  ::v-deep  button:disabled{
+    color:#C0C4CC;
+    background-color:transparent;
+  }
+}
+</style>

ruoyi-ui/src/map/BMapMarker.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="map-box" v-loading="mapLoading">
+    <div class="map-grid" ref="mapContainer"></div>
+  </div>
+</template>
+<script>
+import { custTagMap, custScaleMap } from '@/views/grid/charts/customer/constant-info'
+export default {
+  name: "BMapMarker",
+  props: ["mapData", "selectedTab"],
+  data() {
+    return {
+      mapLoading: false,
+      map: null,
+      list: {
+        0: [
+          {
+            label: "姓名",
+            key: "custName",
+          },
+          {
+            label: "联系方式",
+            key: "custPhone",
+          },
+          {
+            label: "产品标签",
+            key: "custTag",
+          },
+        ],
+        1: [
+          {
+            label: "经营人",
+            key: "lpName",
+          },
+          {
+            label: "联系方式",
+            key: "custPhone",
+          },
+          {
+            label: "产品标签",
+            key: "custTag",
+          },
+        ],
+        2: [
+          {
+            label: "法人代表",
+            key: "lpName",
+          },
+          {
+            label: "注册资本",
+            key: "custCapital",
+          },
+          {
+            label: "企业规模",
+            key: "custScale",
+          },
+          {
+            label: "是否贷款",
+            key: "isLoan",
+          },
+          {
+            label: "联系方式",
+            key: "custPhone",
+          },
+          {
+            label: "产品标签",
+            key: "custTag",
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    mapData(newVal) {
+        this.addPolygon();
+    },
+  },
+  mounted() {
+    this.initMap();
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      this.mapLoading = true;
+      this.map = new BMapGL.Map(this.$refs.mapContainer);
+      this.map.enableScrollWheelZoom();
+      this.mapLoading = false;
+    },
+    // 点击点标记显示客户信息
+    createInfoWindowContent(record) {
+      const that = this;
+      const div = document.createElement("div");
+      const actList = this.list[this.selectedTab];
+      actList.map((item) => {
+        const divIn = document.createElement("div");
+        div.style.cssText =
+          "color: #222; font-size: 12px; font-weight: bold; padding: 0 8px; text-align:left;";
+        const spanLeft = document.createElement("span");
+        spanLeft.style.cssText =
+          "width: 50px;display: inline-block;";
+        spanLeft.innerHTML = item.label;
+        divIn.appendChild(spanLeft);
+        const span = document.createElement("span");
+        span.style.cssText =
+          "color: #666; font-size: 12px; font-weight: normal;margin-left: 10px";
+        if (item.key === 'custTag') {
+          span.innerHTML = custTagMap[record[item.key]] || '无'
+        } else if (item.key === 'custScale') {
+          span.innerHTML = custScaleMap[record[item.key]] || '无'
+        } else if (item.key === 'isLoan') {
+          const custTag = record.custTag;
+          span.innerHTML = custTag.charAt(1) === '1' ? '是' : '否'
+        } else {
+          span.innerHTML = record[item.key];
+        }
+        divIn.appendChild(span);
+        div.appendChild(divIn);
+      });
+      const btn = document.createElement("span");
+      btn.style.cssText =
+        "display: inline-block; margin-left: 78px; cursor: pointer; padding: 0 10px; margin-top: 10px; margin-bottom:16px;color: #2094ff; border: 1px solid #2094ff; border-radius: 2px;";
+      btn.innerHTML = "客户视图";
+      btn.onclick = function () {
+        that.$emit("open-dialog", record);
+      };
+      div.appendChild(btn);
+      return div;
+    },
+
+    addPolygon() {
+      this.map.clearOverlays();
+      if (this.mapData.length <= 0){
+        if(!this.mapData.length){
+          const localCity = new BMapGL.LocalCity();
+          localCity.get((result) => {
+            this.map.centerAndZoom('临海市', 14);
+          });
+        }
+        return;
+      }
+
+      // const point = new BMapGL.Point(
+      //   this.mapData[0].longitude,
+      //   this.mapData[0].latitude
+      // );
+      // this.map.centerAndZoom(point, 12); // 设置地图中心
+      let allpoints = [];
+      this.mapData.map((markerInfo) => {
+        // 创建点标记
+        const point = new BMapGL.Point(
+          markerInfo.longitude,
+          markerInfo.latitude
+        );
+        allpoints.push(point);
+        const marker = new BMapGL.Marker(point);
+        // 在地图上添加点标记
+        this.map.addOverlay(marker);
+        const opts = {
+          width: 400,
+        //   height: 200,
+          title: markerInfo.custName,
+        };
+        const infoWindow = new BMapGL.InfoWindow(
+          this.createInfoWindowContent(markerInfo),
+          opts
+        );
+        marker.addEventListener("click", function () {
+          this.map.openInfoWindow(infoWindow, point);
+        });
+        this.map.setViewport(allpoints);
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.map-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .map-grid {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+  ::v-deep .BMap_bubble_pop {
+    border: 2px solid #2094ff !important;
+    overflow: hidden;
+    padding: 0 !important;
+  }
+  ::v-deep .BMap_bubble_top {
+    text-align: center;
+    font-weight: bold;
+    background-color: #2094ff !important;
+  }
+  ::v-deep .BMap_bubble_title {
+    color: #fff !important;
+  }
+  ::v-deep .BMap_bubble_pop img {
+    display: none;
+  }
+}
+</style>

ruoyi-ui/src/map/BaiduHuiTu.vue

@@ -0,0 +1,244 @@
+<template>
+  <div>
+    <div id="box"  style="height: 900px; width: 100%" ></div>
+    <el-button size="small" style="display: flex" @click="onChange">查看客户</el-button>
+
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import {differenceSet} from '@baidu-map/bmap-draw'
+
+export default {
+  name: 'BaiduHuiTu',
+  props:{},
+  data() {
+    return {
+      sdk: null,
+    }
+  },
+  mounted() {
+    this.initSdk();
+        // document.getElementsByClassName('base_map--Dzno3')[0].style.display = 'none';
+        // 一定要卸载
+        //sdk.destroy();
+     
+  },
+  beforeUnmount(){
+    if(this.sdk){
+        console.log("bye");
+        this.sdk.destroy();
+    }
+  },
+  methods: {
+    initSdk(){
+      this.sdk = new QuHuaSdk({
+        ak: 'L7KaAZUYPVSD40nYT09rWWgIdZKUesiX',
+        webAk: 't6k6UC2IZR40Un8kkqM4RXlaQb4FulyM',
+        domId: 'box',
+        defaultCenterCity: "杭州市", // 非必填
+        _baseUrl: "http://158.234.96.76:5001/logisticsWeb-quhua-intranet", // 固定格式，必填
+        baseMapId: 'f6ac3fadbe3542adbccc85489935f67d',
+        defaultLayerId: '278920cad44e43faafd22da7a656f74a',
+        // readOnly:true,
+        functionField: {
+            peripheral_search: false,
+            draw_line: false,
+            draw_point: false,
+            editlayers_add_aoi: true,
+            editlayers_add_administrative: false,
+            editlayers_add_attribute: false,
+            editlayers_mass_upload: false,
+            editlayers_back_home: true,
+            baseLog: false,
+            administrative: false,
+            textToLine: false,
+            roadPlanSave: false,
+            textToLineLog: false,
+            storeroadLog: false,
+        },
+        eventCallBack: (...arg) => {
+            console.log("===", arg)
+        },
+        whiteList: [
+            {
+              // 图层内列表
+              url: '/logistics_region/v1/region/list',
+              method: 'GET'
+            },
+            {
+              // 图形属性
+              url: '/logistics_region/v1/region/attributes',
+              method: 'GET'
+            },
+            {
+              // 图形属性
+              url: '/logistics_region/v1/region/attributes',
+              method: 'GET'
+            },
+            {
+              // 创建图形
+              url: '/logistics_region/v1/region',
+              method: 'POST'
+            },
+            {
+              // 修改图形名称
+              url: '/logistics_region/v1/region/name',
+              method: 'POST'
+            },
+            {
+              // 修改图形区域
+              url: '/logistics_region/v1/region/shape',
+              method: 'POST'
+            },
+            {
+              // 批量修改图形区域
+              url: '/logistics_region/v1/region/shape/batch',
+              method: 'POST'
+            },
+            {
+              // 删除图形
+              url: '/logistics_region/v1/region',
+              method: 'DELETE'
+            },
+            {
+              // 图形切分
+              url: '/logistics_region/v1/region/split',
+              method: 'POST'
+            },
+            {
+              // 图形合并
+              url: '/logistics_region/v1/region/merge',
+              method: 'POST'
+            },
+            {
+              // 图形打散
+              url: '/logistics_region/v1/region/scatter',
+              method: 'POST'
+            },
+            {
+              // 图形打散
+              url: '/logistics_region/v1/region/scatter',
+              method: 'POST'
+            },
+        ],
+        whiteListProxy: async(value) => {
+            console.log(value)
+            const response = await axios({
+                ...value.newOptions,
+                url: value.url
+            });
+            console.log(response)
+            return response;
+        }
+      });
+    },
+    onChange(){
+      this.sdk = new QuHuaSdk({
+        ak: 'L7KaAZUYPVSD40nYT09rWWgIdZKUesiX',
+        webAk: 't6k6UC2IZR40Un8kkqM4RXlaQb4FulyM',
+        domId: 'box',
+        defaultCenterCity: "杭州市", // 非必填
+        _baseUrl: "http://158.234.96.76:5001/logisticsWeb-quhua-intranet", // 固定格式，必填
+        baseMapId: 'f6ac3fadbe3542adbccc85489935f67d',
+        defaultLayerId: '311c8f144c394adca72b49cc95d3fc95',
+        // readOnly:true,
+        functionField: {
+            peripheral_search: false,
+            draw_line: false,
+            draw_point: false,
+            editlayers_add_aoi: true,
+            editlayers_add_administrative: false,
+            editlayers_add_attribute: false,
+            editlayers_mass_upload: false,
+            editlayers_back_home: true,
+            baseLog: false,
+            administrative: false,
+            textToLine: false,
+            roadPlanSave: false,
+            textToLineLog: false,
+            storeroadLog: false,
+        },
+        eventCallBack: (...arg) => {
+            console.log("===", arg)
+        },
+        whiteList: [
+            {
+              // 图层内列表
+              url: '/logistics_region/v1/region/list',
+              method: 'GET'
+            },
+            {
+              // 图形属性
+              url: '/logistics_region/v1/region/attributes',
+              method: 'GET'
+            },
+            {
+              // 图形属性
+              url: '/logistics_region/v1/region/attributes',
+              method: 'GET'
+            },
+            {
+              // 创建图形
+              url: '/logistics_region/v1/region',
+              method: 'POST'
+            },
+            {
+              // 修改图形名称
+              url: '/logistics_region/v1/region/name',
+              method: 'POST'
+            },
+            {
+              // 修改图形区域
+              url: '/logistics_region/v1/region/shape',
+              method: 'POST'
+            },
+            {
+              // 批量修改图形区域
+              url: '/logistics_region/v1/region/shape/batch',
+              method: 'POST'
+            },
+            {
+              // 删除图形
+              url: '/logistics_region/v1/region',
+              method: 'DELETE'
+            },
+            {
+              // 图形切分
+              url: '/logistics_region/v1/region/split',
+              method: 'POST'
+            },
+            {
+              // 图形合并
+              url: '/logistics_region/v1/region/merge',
+              method: 'POST'
+            },
+            {
+              // 图形打散
+              url: '/logistics_region/v1/region/scatter',
+              method: 'POST'
+            },
+            {
+              // 图形打散
+              url: '/logistics_region/v1/region/scatter',
+              method: 'POST'
+            },
+        ],
+        whiteListProxy: async(value) => {
+            console.log(value)
+            const response = await axios({
+                ...value.newOptions,
+                url: value.url
+            });
+            console.log(response)
+            return response;
+        }
+      });
+      
+    }
+  }
+  
+
+}
+</script>

ruoyi-ui/src/map/BaiduMap.vue

@@ -0,0 +1,149 @@
+<template>
+  <div ref="baiduMap"></div>
+</template>
+
+<script>
+export default {
+  name: 'BaiduMap',
+  props:{
+    onShowGridInfo:{
+        type: Function
+    }
+  },
+  data() {
+    return {
+      map: null,
+    }
+  },
+  mounted() {
+    
+    // 初始化地图 
+    this.map = new BMapGL.Map(this.$refs.baiduMap); 
+    const localCity = new BMapGL.LocalCity();
+    localCity.get(result =>{
+        this.map.centerAndZoom(result.center, 12);
+        this.map.setCenter(result.name);
+        this.map.enableScrollWheelZoom(true);
+        this.$emit('map-loaded', result)
+    })
+     
+  },
+  methods: {
+    // 加载多边形的方法
+    async loadAreaPolygon(regionMapVO) {
+        console.log(regionMapVO)
+        this.map.clearOverlays();
+        var allPoints = []
+        var regionPoints = []
+        regionMapVO['polygonList'].forEach(polygon => {
+            polygon.forEach(points => {
+                var areaPoints = []
+                points.forEach(point => {
+                    var point = new BMapGL.Point(parseFloat(point['x']), parseFloat(point['y']));
+                    areaPoints.push(point);
+                    allPoints.push(point)
+                })
+                regionPoints.push(areaPoints)
+            });
+            
+        })
+        var polygon = new BMapGL.Polygon(regionPoints, { strokeColor: "blue", strokeWeight: 3, strokeOpacity: 0.5 });
+            polygon.addEventListener("mouseout", function () {
+                polygon.setStrokeWeight(3);
+                polygon.setFillOpacity(0);
+            });
+            polygon.addEventListener("mouseover", function () {
+                polygon.setStrokeWeight(5);
+                polygon.setFillOpacity(0.8);
+            });
+            this.map.addOverlay(polygon);
+        this.map.setViewport(allPoints);
+    },
+    async loadAreaPolygonList(regionMapVOList){
+        this.map.clearOverlays();
+        var allPoints = []
+        var regionPoints = []
+        regionMapVOList.forEach(polygonList => {
+            polygonList.forEach(polygon => {
+                polygon.forEach(points => {
+                    var areaPoints = []
+                    points.forEach(point => {
+                        var point = new BMapGL.Point(parseFloat(point['x']), parseFloat(point['y']));
+                        areaPoints.push(point);
+                        allPoints.push(point)
+                    })
+                    regionPoints.push(areaPoints)
+                });
+                
+            })
+        });
+        var geom = new BMapGL.Polygon(regionPoints, { strokeColor: "blue", strokeWeight: 3, strokeOpacity: 0.5 });
+                geom.addEventListener("mouseout", function () {
+                    geom.setStrokeWeight(3);
+                    geom.setFillOpacity(0);
+                });
+                geom.addEventListener("mouseover", function () {
+                    geom.setStrokeWeight(5);
+                    geom.setFillOpacity(0.8);
+                });
+                this.map.addOverlay(geom);
+        this.map.setViewport(allPoints);
+    },
+    async loadGridPolygonList(gridRegionVOList){
+        this.map.clearOverlays();
+        var allPoints = []
+        gridRegionVOList.forEach(gridRegionVO => {
+            var regionPoints = []
+            gridRegionVO['polygonList'].forEach(polygon => {
+                polygon.forEach(points => {
+                    var areaPoints = []
+                    points.forEach(point => {
+                        var point = new BMapGL.Point(parseFloat(point['x']), parseFloat(point['y']));
+                        areaPoints.push(point);
+                        allPoints.push(point)
+                    })
+                    regionPoints.push(areaPoints)
+                });
+
+            })
+            var geom = new BMapGL.Polygon(regionPoints, { strokeColor: "blue", strokeWeight: 3, strokeOpacity: 0.5 });
+            geom.addEventListener("mouseout", function () {
+                geom.setStrokeColor("blue");
+                geom.setStrokeWeight(3);
+                geom.setFillOpacity(0);
+            });
+            geom.addEventListener("mouseover", function () {
+                geom.setStrokeColor("red");
+                geom.setStrokeWeight(5);
+                geom.setFillOpacity(0.8);
+            });
+            geom.addEventListener("click", function () {
+                // window.parent['mapProps']('SHOW_DETAIL:' + gridRegionVO['gridId']);
+                this.onShowGridInfo(gridRegionVO['gridId'])
+            });
+            this.map.addOverlay(geom);
+
+        });
+
+        this.map.setViewport(allPoints);
+    },
+    loadAnchor(x, y){
+        this.map.clearOverlays();
+        var point = new BMapGL.Point(x, y);
+        var marker = new BMapGL.Marker(point);
+        this.map.centerAndZoom(point, 18);
+        this.map.addOverlay(marker);
+    },
+
+    // 清除所有多边形
+    clearPolygons() {
+    //   this.polygons.forEach(polygon => {
+    //     polygon.setMap(null)
+    //   })
+    //   this.polygons = []
+        this.map.clearOverlays();
+
+    }
+  }
+}
+</script>