as shown below in the code, i am declaring the variable AoC and i want to assign to it the value feature.get(environment.KEY_OF_MVT_FEATURE_1). the problem i am facing, is that the variable AoC is not defined inside the scope of the function VectorTileLayer .please let me know how the variable AoC can be accessed in the scope of VectorTileLayer

code:

AoC //declaration
public visualisePolygonsAsMVTTilesOnMapWithColorsForAverageHeightsForZone(zoneToken){
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 = ""
            this.AoC = feature.get(environment.KEY_OF_MVT_FEATURE_1)//<===============
        if (feature.get(environment.KEY_OF_MVT_FEATURE_IS_TREATMENT) == true) {
        if (feature.get(environment.KEY_OF_MVT_FEATURE_1) >= 0 && feature.get(environment.KEY_OF_MVT_FEATURE_1) <= 12.5){
            text = feature.get(environment.KEY_OF_MVT_FEATURE_1)   "%"
            fillColor = '#ff0000'
            strokeColor = '#000000'
        } else if (feature.get(environment.KEY_OF_MVT_FEATURE_1) > 12.5 && feature.get(environment.KEY_OF_MVT_FEATURE_1) <= 15) {
            text = feature.get(environment.KEY_OF_MVT_FEATURE_1)   "%"
            fillColor = '#fd4900'
            strokeColor = '#000000'
        } else if (feature.get(environment.KEY_OF_MVT_FEATURE_1) > 15 && feature.get(environment.KEY_OF_MVT_FEATURE_1) <= 27.5) {
            text = feature.get(environment.KEY_OF_MVT_FEATURE_1)   "%"
            fillColor = '#f66d00'
            strokeColor = '#000000'
        } else if (feature.get(environment.KEY_OF_MVT_FEATURE_1) > 27.5 && feature.get(environment.KEY_OF_MVT_FEATURE_1) <= 40) {
            text = feature.get(environment.KEY_OF_MVT_FEATURE_1)   "%"
            fillColor = '#e98b00'
            strokeColor = '#000000'
            }
        }
         return new Style({
                fill: new Fill({
                    color: fillColor
                  }),
                stroke: new Stroke({
                    color: strokeColor,
                    lineDash: [1],
                    width:1,
                  }),
                  text: new Text({
                    font: 'Normal 9px Arial',
                    text: '' text,
                    fill: new Fill({
                      color: '#000000'
                    }),
                    stroke: new Stroke({
                      color: '#000000',
                      width: 0
                    }),
                    // offsetX: -45,
                    // offsetY: 0,
                    // rotation: 0
                  })
                })
        }
      });

CodePudding user response：

Multiple ways:

1. You can create an angular service, add AoC in it and expose it using getter/setter. OR
2. If its AngularJs code then you can also add it to $rootScope so that it can be access anywhere you want.

CodePudding user response：

Yes, when you are using this in the function/object, it will create its own this. This is how lexical scope works in javascript. You should try this:

public visualisePolygonsAsMVTTilesOnMapWithColorsForAverageHeightsForZone(zoneToken){
const _self = this; 
....
....
....
  style: function (feature){
            console.log("MVTTileAsFeature:",feature)
            _self.test = feature
            let fillColor
            let strokeColor
            let text = ""
            _self.AoC = feature.get(environment.KEY_OF_MVT_FEATURE_1)//<=============== it will reference variable from 
        if (feature.get(environment.KEY_OF_MVT_FEATURE_IS_TREATMENT) == true) {
...
...