如何让已声明的AoC变量在VectorTileLayer函数作用域内可访问

核心原因 #

VectorTileLayer的style回调函数是被库内部调用的，执行时的this指向和你声明AoC变量的上下文不一致，导致无法正常访问变量。 #

方法1：使用箭头函数固定this指向（最常用，适配类组件场景） #

箭头函数不会生成独立的作用域，会继承外层函数的this指向，直接修改style的函数声明方式即可：

// 只需要修改style行的函数定义为箭头函数，其他代码不变
style: (feature) => {
  console.log("MVTTileAsFeature:",feature)
  this.test = feature
  let fillColor
  let strokeColor
  let text = ""
  // 这里的this和外层函数的this一致，可直接访问你声明的AoC变量
  this.AoC = feature.get(environment.KEY_OF_MVT_FEATURE_1)
  // 剩余逻辑不变
}

方法2：缓存外层上下文（兼容不支持箭头函数的旧环境） #

在外层函数开头提前把this存入临时变量，回调函数内通过临时变量访问：

public visualisePolygonsAsMVTTilesOnMapWithColorsForAverageHeightsForZone(zoneToken){
  const that = this; // 缓存外层作用域的this
  return new VectorTileLayer({
    source: new VectorTileSource({
        format: new MVT(),
        url: environment.LocalHostForVectorTileSourceAsMVTTileForZXYWS + zoneToken + "/{z}/{x}/{y}",
    }),
    opacity: .4,
    style: function (feature){
        console.log("MVTTileAsFeature:",feature)
        this.test = feature
        let fillColor
        let strokeColor
        let text = ""
        // 通过缓存的that访问AoC
        that.AoC = feature.get(environment.KEY_OF_MVT_FEATURE_1)
        // 剩余逻辑不变
    }
  })
}

方法3：全局变量场景直接赋值 #

如果你的AoC是声明在全局作用域的变量，不需要加this前缀，直接赋值即可：

AoC = feature.get(environment.KEY_OF_MVT_FEATURE_1)

注意事项 #

style函数会对每一个瓦片内的矢量要素执行一次，如果你有多个匹配的要素，AoC最终会被覆盖为最后一个执行要素的对应值。如果需要存储所有要素的取值，建议把AoC定义为数组，每次用push方法存入新值。 #

内容的提问来源于stack exchange，提问作者Amrmsmb