The base map tile is covered by the annotation tile

[kankantian]

I want to add a tilelayer that contains labels to the map, but I find the base map tile is coverd by it.

const vectorUrl = ref('http://localhost/iag-gateway/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}')

const vectorBzUrl = ref('http://localhost/iag-gateway/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}')

const projection = ref('EPSG:4326')

<ol-tile-layer ref="vectorLayer" title="vector">
  <ol-source-xyz
    :url="vectorUrl"
    :wrapX="true"
    :projection="projection"
    :tileLoadFunction="tileLoadFunction"
  />
  </ol-tile-layer>
  <ol-tile-layer ref="bzLayer" title="mark">
    <ol-source-xyz
      :url="vectorBzUrl"
      crossOrigin="anonymous"
      format="image/png"
      :projection="projection"
      :tileLoadFunction="tileLoadFunction"
    />
  </ol-tile-layer>

function tileLoadFunction(tile, src) {
  // console.log('tile--src', tile, src)
  let client = new XMLHttpRequest()
  let appid = 'user_pc'
  let appsecret = '111111111'
  let timestamp: any = new Date().getTime()
  let nonce = Uuid(8)
  let sign = sha256(nonce + timestamp + appid + appsecret + timestamp)

  client.open('GET', src)
  client.responseType = 'blob'
  client.setRequestHeader('x-appid', appid)
  client.setRequestHeader('x-timestamp', timestamp)
  client.setRequestHeader('x-nonce', nonce)
  client.setRequestHeader('x-sign', sign)

  client.onload = function () {
    let data = window.URL.createObjectURL(this.response) 
    tile.getImage().src = data
  }
  client.send()
}

[kankantian]

I add property opcacity to ol-tile-layer , and then solve the problem

<ol-tile-layer ref="bzLayer"  :opacity="0.95"></ol-tile-layer>