vue 腾讯地图比例尺变化防抖动获取数据效果

代码：

<template>
  <div id="container" style="width:100%; height:100vh;"></div>
</template>

<script>
import { getBusiPoiList, selectPoi } from "@/api/system/sysHome";


export default {
  name: 'TencentMap',
  data() {
    return {
      longitude: 121.4737,
      latitude: 31.2304,
      busiPoiList: [],
      selectPoiList: [],
      map: null
    }
  },
  mounted() {
    this.initMap();
    // this.getBusiPoiList();



  },
  methods: {


    initMap() {
      const center = new TMap.LatLng(this.latitude, this.longitude);
      this.map = new TMap.Map('container', {
        center: center,
        zoom: 12,
        baseMap: {
          type: 'vector',
          features: ['base'] // 只显示基础底图，不显示POI和道路名称
        }
      });


      // 使用防抖函数包装回调
      const debouncedHandler = this.debounce(() => {
        const zoomLevel = this.map.getZoom();
        console.log('当前缩放级别:', zoomLevel);
        if (zoomLevel > 11) {
          const geoJSON = this.getMapBoundsGeoJSON();
          if (geoJSON != '') {
            this.selectPoi(geoJSON);
          }
        }
      }, 2000);

      this.map.on('zoom_changed', debouncedHandler);



    },

    // 添加防抖函数
    debounce(func, wait) {
      let timeout;
      return function () {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          func.apply(context, args);
        }, wait);
      };
    },

    // 获取地图四角的Geoson
    getMapBoundsGeoJSON() {
      const bounds = this.map.getBounds();

      const sw = bounds.getSouthWest();
      const ne = bounds.getNorthEast();
      const nw = new TMap.LatLng(ne.lat, sw.lng);
      const se = new TMap.LatLng(sw.lat, ne.lng);
      return {
        "features": [
          {
            "type": "Feature",
            "properties": {},
            "geometry": {
              "type": "Polygon",
              "coordinates": [
                [
                  [sw.lng, sw.lat],
                  [nw.lng, nw.lat],
                  [ne.lng, ne.lat],
                  [se.lng, se.lat],
                  [sw.lng, sw.lat]
                ]
              ]
            }
          }
        ]
      };


    }
    ,


    // 删除标记的方法
    clearMarkers() {
      if (this.markers) {
        this.markers.destroy(); // 销毁标记实例
        this.markers = null; // 清空引用
      }
    },
    // 删除文本标记的方法
    clearLabels() {
      if (this.labels) {
        this.labels.destroy(); // 销毁标记实例
        this.labels = null; // 清空引用
      }
    },


    getBusiPoiList() {
      getBusiPoiList().then(res => {
        this.busiPoiList = res;
        if (this.busiPoiList.length > 0) {
          this.setHeats();
        }
      })
    },

    // 条件查询指定条件 poi
    selectPoi(geojsonData) {
      selectPoi({
        type: 2,
        longitude: this.longitude,
        latitude: this.latitude,
        geojsonData: JSON.stringify(geojsonData)
      }).then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.selectPoiList = res.data.poiData;
          // console.log(this.selectPoiList)
          this.setMarkers();
        }

      })
    },




    // 展示热力图
    setHeats() {
      // 初始化热力图
      const heat = new TMap.visualization.Heat({
        max: 350,
        height: 0,
        radius: 30,

      }).addTo(this.map);

      // 热力图数据
      const heatData = this.busiPoiList;
      heat.setData(heatData);
    },

    // 展示点标记
    setMarkers() {

      // 这里判断如果有点标记了就不用执行之后的代码了。
      if (this.markers) {
        this.markers.destroy();
        this.markers = null;
      }
      // console.log(this.selectPoiList)
      // 创建点标记 start
      const markers = this.selectPoiList.map(item => ({
        id: item.gid,
        styleId: `style_${item.gid}`,
        position: new TMap.LatLng(item.latitude, item.longitude),
        properties: {
          title: "test" //item.aname
        }
      }));




      const styles = this.selectPoiList.reduce((acc, item) => {
        let iconPath = item.icon || '/default-icon.png'; // 添加默认图标路径
        // console.log(iconPath)

        acc[`style_${item.gid}`] = new TMap.MarkerStyle({
          width: 25,
          height: 25,
          anchor: { x: 5, y: 5 },
          src: process.env.VUE_APP_BASE_API + iconPath
        });
        return acc;
      }, {});



      this.markers = new TMap.MultiMarker({
        map: this.map,
        geometries: markers,
        styles: styles,

      });
      //创建点标记 end






    },

    // 展示文本标记
    setLabels() {

      // 这里判断如果有点标记了就不用执行之后的代码了。
      if (this.labels) return;
      console.log("继续执行labels！~~")


      // 创建文本标记层 start
      const labels = this.busiPoiList.map(item => ({
        id: `label_${item.id}`,
        styleId: 'label',
        position: new TMap.LatLng(item.lat, item.lng),
        content: "test" //item.bname
      }));

      this.labels = new TMap.MultiLabel({
        id: 'label-layer',
        map: this.map,
        styles: {
          'label': new TMap.LabelStyle({
            color: '#3777FF',
            size: 14,
            offset: { x: 20, y: 35 }, // 文字显示在标记点下方
            angle: 0,
            alignment: 'center',
            verticalAlignment: 'middle'
          })
        },
        geometries: labels
      });
      //  创建文本标记层 end






    }
  }
}
</script>

<style scoped>
#container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>