HarmonyOS 鸿蒙Next@state变量改变后UI无法及时更新

HarmonyOS 鸿蒙Next@state变量改变后UI无法及时更新 先上代码

import { wapianXianshi } from '../XianshiZujian/WapianXianshi'

@Entry
@Component
struct MapHouST {

  //地图相关数据
  @State @Watch('huanchongquJiazai') dituJibie: number = 18 //地图级别
  @State @Watch('xianshiGengxin') dituZhongxindian: geoLocationManager.Location = undefined //地图中心点
  private wapianHuanchong: HashMap<number, image.PixelMap> = new HashMap() //瓦片图像缓冲
}

build() {
  Stack({ alignContent: Alignment.TopStart }) {

    /*************************************   地图显示   ***********************************/

    //显示瓦片地图
    wapianXianshi({
      xianshiBiankuang: false,
      xianshiWapianJihe: $xianshiWapianJihe,
      xianshiJingweidu: false,
      fangdaBeishu: this.dituFangdaBeishu
    })
      .hitTestBehavior(HitTestMode.Transparent)
}

子组件

@Component
export struct wapianXianshi {
  ....

  @Link xianshiWapianJihe: Array<wapian> //显示图像集合

  ...

  aboutToAppear(){
    this.chushihua();
  }

  chushihua(){
    //限制放大倍数
    if (this.fangdaBeishu > ZUIDABEISHU) {
      this.fangdaBeishu = ZUIDABEISHU;
    }
    //计算瓦片显示宽度和高度大小
    this.wapianDaxiao = 256 * this.fangdaBeishu;
  }

  build() {
    Row() {
      Stack({ alignContent: Alignment.TopStart }) {
        ForEach(this.xianshiWapianJihe, (wapian, xuhao) => {
          Image(wapian.tuxiang)
            .height(px2vp(this.wapianDaxiao))
            .width(px2vp(this.wapianDaxiao))
            .offset({ x: px2vp(wapian.x * this.wapianDaxiao), y: px2vp(wapian.y * this.wapianDaxiao) })
         ...
        })
       }    
  }
}

显示瓦片组刷新响应

/**
 * 瓦片地图显示刷新
 */
wapianXianshiShuaxin() {
  this.xianshiWapianJihe.length = 0;
  for (let x = this.xianshiquBianma.xMaXiao; x <= this.xianshiquBianma.xMaDa; x++) {
    for (let y = this.xianshiquBianma.yMaXiao; y <= this.xianshiquBianma.yMaDa; y++) {
     .....
     .....
      //提取瓦片图像
      let cunzai = this.wapianHuanchong.hasKey(linshikey)
      if (cunzai) {
        tuxiang = this.wapianHuanchong.get(linshikey);
      } else {
        tuxiang = this.kongtuxiang;
        //下载瓦片,并加入缓冲
        this.xiazaiWapian(x, y, this.dituJibie);
      }
      let wapianlinshi: wapian = {
        x: xx,
        y: yy,
        jing: jingdu,
        wei: weidu,
        tuxiang: tuxiang
      }
      //添加显示图像
      this.xianshiWapianJihe.push(wapianlinshi);
    }
  }
}

级别变化响应

async huanchongquJiazai() {
  //计算初始显示区编码
  this.bianmaJisuan();
  //下载瓦片,并加入缓冲
  for (let x = this.xianshiquBianma.xMaXiao - 5; x <= this.xianshiquBianma.xMaDa + 5; x++) {
    for (let y = this.xianshiquBianma.yMaXiao - 5; y <= this.xianshiquBianma.yMaDa + 5; y++) {
      await this.xiazaiWapian(x, y, this.dituJibie);
    }
  }
  this.wapianXianshiShuaxin(); 
}

瓦片下载

async xiazaiWapian(xma: number, yma: number, jibie: number) {
  ......
  let httpRequest = http.createHttp();
  await httpRequest.request(wapianWangzhi, // 网络图片地址
    (error, data) => {
      if (error) {
        //tishiXianshi("地图主页,网络错误：" + JSON.stringify(error));
      } else {
        let code = data.responseCode;
        if (http.ResponseCode.OK == code) {
          let imageSource = image.createImageSource(data.result as string);
          imageSource.createPixelMap(WAPIANGESHI).then(pixelMap => {
            //添加缓冲图像
            this.wapianHuanchong.set(linshikey, pixelMap);
          }).catch(cuowu => {
            hilog.error(0x0000, BIAOJI, '瓦片图片建立失败：%{public}s', JSON.stringify(cuowu));
          })
        } else {
          hilog.error(0x0000, BIAOJI, '瓦片下载失败：%{public}s', code.toString());
        }
      }
    })
}

地图级别变化后，UI不能及时更新，

但是 在没增加瓦片缓冲wapianHuanchong，直接操作显示瓦片xianshiWapianJihe ，即瓦片地图直接下载到xianshiWapianJihe，能够及时更新，

不知哪位高手能够指教