在vue项目中使用AntV L7地图下钻，异步调用不重复生成

实现地图下钻、样式、数据异步调用生成，以及细节。

注释后有‘@#@#*’为重要

如有不对请指出

1、安装AntV L7以及相关的组件引用

1. npm install @antv/l7plot
2. npm install @antv/l7
3. import { Scene, Mapbox } from "@antv/l7"
4. import { Choropleth } from "@antv/l7plot"

2、在data中创建变量接收地图实例以及组件

// An highlighted block
export default {
  data() {
    return {
      loading: false,//加载遮罩层
      province: province, //写死的地图省份数据--默认数据不调用@#@#*
      isShow: true,//根据用房类型长度判断是否显示选择类型框
      currentLevel: 1,//默认地图等级
      mapList: [], //地图数据
      scene: null,//ANTV L7地图 将地图实例化首先将设置变量接受实例，放入全局@#@#*
      useList: [],//地图使用类型
      tab_active: 0, //用途下标
      mouse_active: 1, //鼠标移动下标志
      use_active: null, //用途
      params: {}, //筛选数据
      choropleth: null,//ANTV L7地图组件工具@#@#*
      onSize: null, //页面尺寸
      messageList: [], //工作提醒列表
      Statistics: {},//统计接口对象
    };
  },

3、地图实例的生成，因需异步操作数据需要放在全局即 this.scene

在mounted钩子函数中生成地图实例，且加载数据

  mounted() {
    this.loading = true;//默认加载延时不然可能重复渲染dom
    //初始调用地图用途数据
    this.onUpdated();//加载数据生成地图实例方法
  },

加载数据生成地图实例方法–可按需求改变是否加判断-我的业务有需求

 async onUpdated() {
 //调用接口获取数据可替换为自己的数据接口
      const res = await mapUseList();
      if (res.code == 200) {
        //判断用途是否存在
        if (res.data.length > 0) {
          //将数组赋值给变量useList
          this.useList = res.data;
          this.use_active = res.data[0];
          //生成地图实例-----------在此生成@#@#
          this.scene = new Scene({
            id: "map",
            map: new Mapbox({
              style: "blank",
              center: [120.19382669582967, 30.258134],
              zoom: 3,
              pitch: 0,
            }),
          });
          //地图数据
          this.homeMapList(0, 100000, res.data[0]);//获取数据@#@#
          //创建地图组件
          this.MapCreater(0, 100000, res.data[0]);//生成地图组件@#@#
        } else {
          //生成地图实例--用途数据获取失败的情况下
          this.scene = new Scene({
            id: "map",
            map: new Mapbox({
              style: "blank",
              center: [120.19382669582967, 30.258134],
              zoom: 3,
              pitch: 0,
            }),
          });
          
          // this.useList = ["居住用房"];
          // this.use_active = "居住用房";
          //创建地图组件
          this.MapCreater(false);
        }
      }
    },

获取地图数据即上代码片的this.homeMapList(0, 100000, res.data[0]);

level:等级, code：城市编码, use，用途-用途看个人需求
async homeMapList(level, code, use) {
      this.loading = true;//默认开始加载
      /*将等级转义，因为数据库的等级为1，2，3，而组件等级必须为，province，city等*/
      if (level) {
        this.currentLevel = level;
        //转义level
        let currentLevel = "";
        if (level == "province") {
          currentLevel = 1;
        } else if (level == "city") {
          currentLevel = 2;
        } else if (level == "district") {
          currentLevel = 3;
        } else {
          currentLevel = 0;
        }
        //需要暂时保存参数，待后期使用
        this.params = {
          level: currentLevel,
          code: code,
        };
        const res = await homeMap({
          level: currentLevel,
          code: code,
          searchType: "1",
          collType: use,
        });
        //若状态查询成功
        if (res.code == 200) {
          this.mapList = res.data.cityStatList;
          this.Statistics = {
            count: res.data.typeStat.count, //类型总比数
            value: res.data.typeStat.value, //类型总比数
            collTotal: res.data.collTotal, //总比数
            evaluateCollTotal: res.data.evaluateCollTotal, //笔数
            evaluateCollValue: res.data.evaluateCollValue, //价值
          };
          //创建右侧的环形图实例
          this.createChart();
          for (let i = 0; i < this.mapList.length; i++) {
            if (this.mapList[i].currentLevel == 0) {
              this.mapList[i].level = "country";
            } else if (this.mapList[i].currentLevel == 1) {
              this.mapList[i].level = "province";
            } else if (this.mapList[i].currentLevel == 2) {
              this.mapList[i].level = "city";
            } else {
              this.mapList[i].level = "district";
            }
            this.mapList[i].adcode = this.mapList[i].code;
            this.mapList[i].value = this.mapList[i].count;
          }
          this.loading = false;
        }
      } else {
        //创建右侧的环形图实例
        this.createChart();
        this.Statistics = {
          count: 0, //类型总比数
          value: 0, //类型总比数
          collTotal: 0, //总比数
          evaluateCollTotal: 0, //笔数
          evaluateCollValue: 0, //价值
        };
      }
      //此方法需要在地图组件实例中调用因此需要 return出去
      return this.mapList;
    },

生成地图实例以及地图组件,即代码片3的this.MapCreater(0, 100000, res.data[0]);

 /*创建地图组件*/
    MapCreater(level, code, use_active) {
      //获取地图数据，若数据有进入对应判断（异步因此操作）
      this.homeMapList(level, code, use_active).then((mapList) => {
        let data = [];
        let textColor = "";
        var colorList = [];
        if (mapList.length > 0) {
          console.log(data);
          data = mapList;
          textColor = "#fff";
          colorList = ["#B8E1FF", "#7DAAFF", "#3D76DD", "#0047A5", "#001D70"];
        } else {
          delete this.province.province[0];
          data = this.province.province;
          textColor = "black";
          colorList = ["#fff"];
          this.currentLevel = "country";
        }
        this.choropleth = new Choropleth({
          source: {
            data: data,//地图数据赋值处
            joinBy: {
              sourceField: "adcode",//来源数据
              geoField: "adcode",//Json 数据
            },
          },
          viewLevel: {
            level: "country",//默认地图等级为全国
            adcode: 100000,//全国城市code
          },
          autoFit: true,
          drill: {
            steps: ["province", "city"],//组件下钻步骤
            /*组测事件*/
            triggerUp: "unclick",//点击空白处
            triggerDown: "click",//点击地图处，且数据不为默认数据
            triggerMove: "move",//鼠标移动事件
            /*点击下钻 回调方法*/
            onDown: (from, to, callback) => {
              if (mapList.length > 0) {
                this.homeMapList(to.level, to.adcode, this.use_active).then(
                  (res) => {
                    this.$nextTick(() => {
                      data = [];
                      callback({
                        source: {
                          data: res,
                          joinBy: { sourceField: "adcode" },
                        },
                      });
                    });
                  }
                );
              }
            },
            /*点击空白上钻 回调方法*/
            onUp: (from, to, callback) => {
              this.currentLevel = to.level;
              this.scene.setMapStatus({
                zoomEnable: true,
              });
              callback();
            },
          },

          color: {
            field: "value",
            value: ["#fff"],
            scale: { type: "quantize" },
          },
          style: {
            opacity: 1,
            stroke: "#ccc",
            lineWidth: 0.6,
            lineOpacity: 1,
          },
          chinaBorder: {
            // 国界
            national: { color: "#ffc2c2", width: 1, opacity: 1 },
            // 争议
            dispute: {
              color: "#ffc057",
              width: 1,
              opacity: 0.8,
              dashArray: [2, 2],
            },
            // 海洋
            coast: { color: "#b4dbff", width: 0.7, opacity: 0.8 },
            // 港澳
            hkm: { color: "black", width: 0.7, opacity: 0.8 },
          },
          label: {
            visible: true,
            field: "name",
            style: {
              fill: textColor,
              opacity: 1,
              fontSize: 14,
              stroke: "#fff",
              strokeWidth: 0.5,
              textAllowOverlap: false,
              padding: [5, 5],
            },
          },
          state: {
            active: {
              stroke: textColor,
              lineWidth: textColor == "black" ? 1 : 2,
            },
          },
          active: {
            active: true,
          },
          //悬浮窗提示别名（数据的键：例如field：name，变成名称需要用alias接受，相当于引入的 xxx as xxx）
          tooltip: {
            items: [
              { field: "name", alias: "名称" },
              { field: "value", alias: "押品笔数" },
            ],
          },
          zoom: {
            position: "topright",
          },
          // 统计阶梯图例
          legend: {
            title: "当前押品笔数",//标题
            position: "bottomright",//定位
          },
        });
        // this.scene.setMapStatus({
        //   zoomEnable: false,
        // });
        /*将生成的数据组件实例添加到antV L7 地图实例中*/
        this.choropleth.addToScene(this.scene);
        // if (this.scene.loaded) {
        //   this.choropleth.addToScene(this.scene);
        // } else {
        //   this.scene.on("loaded", () => {
        //     this.choropleth.addToScene(this.scene);
        //   });
        // }
        /*遮罩层加载状态等于 组件实例生成状态*/
        this.loading = this.choropleth.sceneLoaded;
      });
    },

4、渲染dom生成地图

因为代码片2中的

     this.scene = new Scene({
            id: "map",//设置id为map的dom
            map: new Mapbox({
              style: "blank",
              center: [120.19382669582967, 30.258134],
              zoom: 3,
              pitch: 0,
            }),
          });

故此在代码html中

 <div id="map" style="position: relative; background: #fff; overflow: hidden"
        :style="{ height: onSize - 200.44 + 'px' }">
  </div>
<!--    需要定位才可以显示    -->

END…