高德api覆盖区域由层级控制显示和隐藏

这个是一个区域化的从外面请求的json然后在给到 高德

先看一下外部的JSON

[
  {
    "name": "11",
    "areas": [
      [
        121.296733,31.190657
      ],
      [
        121.297184,31.191244
      ],
      [

        121.297892,31.191648
      ],
      [
        121.298342,31.192015
      ]

]

 开始请求了

  var allBankuai1
    var polygons1
    // $(document).ready(function () {
  function xianshioryicang(num){
      console.log(num)
      // 绘制板块
      $.ajax({
          url: ctx + '/map/demonstration/json/jinbohui.json',
          async: false,
          success: function (data) {
               polygons1 = outPolygon1(data);
              allBankuai1 = new AMap.OverlayGroup(polygons1);
              if(num){
                  // allBankuai1.hide()
                  map.remove(allBankuai1);
                  allBankuai1.hide()
                  return
              }else{
                  // 创建小区覆盖物群组
                  allBankuai1 = new AMap.OverlayGroup(polygons1);
              }

          }
      });
  }

上面有num 下面会有讲解

  // 创建外层不规则图形
    var polygons1 = [];
    var polygon1
    function outPolygon1(areaDatas,num) {
        console.log(num)
        // let polygons1 = [];
        for (let i = 0; i < areaDatas.length; i++) {
            let areaData = areaDatas[i];
            let name = areaData.name;
            let areas = areaData.areas;
            let strokeColor = '#00B6DA';
            let fillColor = '#00A2E8';
             polygon1 = new AMap.Polygon({
                path: areas,
                fillColor: fillColor, // 多边形填充颜色
                //这个是不规则的区域的
                fillOpacity: 0,  // 填充透明度
                borderWeight: 2, // 线条宽度，默认为 1
                strokeWeight: 3, // 轮廓线宽度
                strokeColor: strokeColor, // 轮廓线条颜色
                bubble: true
            });
            polygons1.push(polygon1);
        }

            return polygons1;


    }

开始获取地图的层级代码

 //获取 当前的  地图的 放大的层级

    function logMapinfo1() {
        let zoom = map.getZoom(); //获取当前地图级别
        // if (document.body.clientWidth > 2800 ? zoom >= 17 : zoom > 15) {
        if (zoom >= 17) {
            map.add(marker1)

        } else {
            map.remove(marker1)

        }
        console.log(zoom)
        //1 显示   0隐藏
        if (zoom < 16.9) {
            dianji1()
        }else{
//此时的num 是  true
            dianji(true)
        }
    }
//注意这个 必须有这个

    map.on('zoomend', logMapinfo1);

上面的 两个函数 dianji()和dianji1()     这里的dd是 true 传过来了

function dianji(dd){
     console.log("hide")
     xianshioryicang(dd)

     // allBankuai1.hide()
     // map.remove(allBankuai1);
     // allBankuai1.close(dd);
     console.log(map.remove)

 }
    function dianji1(){

        xianshioryicang()
        // allBankuai1.show()
        map.add(allBankuai1);
        console.log("show")
    }

消失的关键是根据dianji里面的true 来控制的

  polygons1 = outPolygon1(data);
//先是有这个 然后在消失
              allBankuai1 = new AMap.OverlayGroup(polygons1);
              if(num){
                  // allBankuai1.hide()
                  map.remove(allBankuai1);
                  allBankuai1.hide()
                  return
              }else{
                  // 创建小区覆盖物群组 这是显示
                  allBankuai1 = new AMap.OverlayGroup(polygons1);
              }

以上就是全部的代码了  希望我过段时间还能记得