取消上次ajax

鼓舞飞扬發表於2024-09-13
// 大資料展示
    async queryBigData() {
      this.cancel && this.cancel();
      const CancelToken = axios.CancelToken;
      this.isLoad = true;
      this.ajaxBasicFinished = false;
      if (this.pointLayer) {
        this.scene.removeLayer(this.pointLayer);
      };
      this.scene.removeImage('lmapostIcon');
      let image = new Image(40, 40);
      image.src = `${this.$__webpack_public_path__}/static/images/map/${this.objectName}.svg`;
      await this.scene.addImage('lmapostIcon', image);

      const data = {
        Token: 'fdasfn8934r5nt9785o43mo#4K9',
        Belong: this.deviceBelong,
        ObjectName: this.objectName,
        Ucs: 'WGS84',
      };
      const options = {
        method: "POST",
        headers: { "content-type": "application/json" },
        data: data,
        url: `${BASE_CONFIG.BASE_API3}/get`,
        cancelToken: new CancelToken(c => {
          this.cancel = c;
        }),
      };
      axios(options)
        .then((response) => {
          let data = response.data.data;
          if(data && data.length > 0) {
            let geojson = {
              type: 'FeatureCollection',
              features: []
            };
            for (let i = 0; i < data.length; i++) {
              let item = data[i];
              // 上萬條資料
              let feature = {
                  type: 'feature',
                  geometry: {
                      type: 'Point',
                      coordinates: []
                  },
                  properties: {
                    name: item.ObjectName
                  }
              };
              let longreg = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/;
              let latreg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/;
              let flag1 = longreg.test( this.decimalProcess(item.lnglat[0]) );
              let flag2 = latreg.test( this.decimalProcess(item.lnglat[1]) );

              if(flag1 && flag2){
                feature.geometry.coordinates = [this.decimalProcess(item.lnglat[0]), this.decimalProcess(item.lnglat[1])];
                geojson.features.push(feature);
              }
            };

            let bbox = this.$turf.bbox(geojson);
            this.scene.fitBounds(bbox);
            this.isLoad = false;
            this.pointLayer = new PointLayer({
              blend: 'normal',
              zIndex: 111
            })
              .source(geojson)
              .shape('lmapostIcon')
              .size(15)
            this.scene.addLayer(this.pointLayer);
            this.isNoData = false;
            this.ajaxBasicFinished = true;
          } else {
            this.isLoad = false;
            this.ajaxBasicFinished = true;
            this.isNoData = true;
            this.$message({
              message: '暫無裝置',
              type: "warning",
            });
          }
        })
        .catch(error => {
          this.isLoad = false;
          console.log(error);
        });
    },

相關文章