高德地图区域掩模和行政区图层同时造成地图卡顿解决

最近有一个需求是做一个立体的山东地图并在地图上进行点标记，思来想去选择了用高德地图的Loca.PolygonLayer加区域掩模来实现效果，效果如下

但是在地图使用过程中发现地图拖拽卡顿，经过反复测试发现是区域掩模和行政区图层（用来绘制各市的分界线）同时使用造成地图卡顿，后改为循环绘制区域边界的方法，以下是修改后代码，修改后拖拽地图已经很丝滑了

 district.search("山东", function (status, result) {
        console.log(result, "1000");
        let cityList = result.districtList[0].districtList;
        var bounds = result.districtList[0].boundaries;
        var mask = [];

        for (var i = 0; i < bounds.length; i += 1) {
          mask.push([bounds[i]]);
        }
        var imageLayer = new AMap.ImageLayer({
          url: require("@/assets/images/mapstyle.png"),
          bounds: new AMap.Bounds(
            [124.120342, 38.394799],
            [112.681347, 33.559791]
          ),
          zIndex: 80,
        });
        var map = (window.myMap = new AMap.Map("myMap", {
          mask,
          zoom: 8,
          viewMode: "3D",
          jogEnable: false,
          pitch: 50,
          center: [118.287921, 36.084239],
          mapStyle: "amap://styles/dark",
          showLabel: false,
          // features: [],
          skyColor: "#0a1535",
          showBuildingBlock: false,
          layers: [imageLayer],
        }));
        // 解决地图卡顿，mask区域掩模和 districtlayer  同时用会卡顿，
        for (let i = 0; i < cityList.length; i++) {
          district.search(cityList[i].name, function (status, result) {
            let bounds1 = result.districtList[0].boundaries; //获取朝阳区的边界信息
            if (bounds1) {
              for (var i = 0; i < bounds1.length; i++) {
                //生成行政区划 polygon
                new AMap.Polygon({
                  map: map, //显示该覆盖物的地图对象
                  strokeWeight: 1, //轮廓线宽度
                  path: bounds1[i], //多边形轮廓线的节点坐标数组
                  fillOpacity: 0.7, //多边形填充透明度
                  fillColor: "", //多边形填充颜色
                  strokeColor: "#72E1E1", //线条颜色
                  zIndex: 90,
                });
              }
            }
          });
        }
 });