Question

我在课堂上声明了一个Feature变量，如下所示：

f = new Feature();

我正在尝试从ngOnInit()访问它，但出现以下错误：

错误TypeError：无法读取未定义的属性'f'

编辑：完整的组件代码：

import { Component } from '@angular/core';

import Map from 'ol/Map';
import TileWMS from 'ol/source/TileWMS.js';
import View from 'ol/View';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
import {Stroke, Style, Circle, Fill} from 'ol/style.js';
import {get as getProjection} from 'ol/proj';
import { fromLonLat } from 'ol/proj';
import proj4 from 'proj4';
import {register} from 'ol/proj/proj4';
import Feature from 'ol/Feature';
import { mapToMapExpression } from '@angular/compiler/src/render3/util';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'poc-cliente';

  feature: any;
  map = new Map();
  f = new Feature();

  ngOnInit(){

    proj4.defs("EPSG:25830","+proj=utm +zone=30 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
    register(proj4);
    const proyeccion = getProjection('EPSG:25830');

    var styleFunction = function(feature, resolution) {
      var defaultStyle = {
        'MultiPolygon': new Style({
          fill: new Fill({
            color: 'rgba(0,0,255,0)'
          }),
          stroke: new Stroke({
            color: 'rgba(0,0,255,0)',
            width: 0
          })
        })
      };
      var featureStyleFunction = feature.getStyleFunction();
      if (featureStyleFunction) {
        return featureStyleFunction.call(feature, resolution);
      } else {
        return defaultStyle[feature.getGeometry().getType()];
      }
    }; 
    var styleFunction2 = function(feature, resolution) {
      var defaultst = {
        'MultiPolygon': new Style({
          fill: new Fill({
            color: 'rgba(255,40,44,0.5)'
          }),
          stroke: new Stroke({
            color: '#00f',
            width: 1
          })
        })
      };
      var featureStyleFunction = feature.getStyleFunction();
      if (featureStyleFunction) {
        return featureStyleFunction.call(feature, resolution);
      } else {
        return defaultst[feature.getGeometry().getType()];
      }
    } 

    var vectorSourceResaltada = new VectorSource({});
    var vectorResaltada = new VectorLayer({
      source: vectorSourceResaltada,
      style: styleFunction2
    });

    //WMS
    var layer = 
    new TileLayer({
      source: new TileWMS({
        url: 'https://idena.navarra.es/ogc/wms',
        params: {'LAYERS': 'catastro'},
        projection: proyeccion
      })
    });

    //WFS
    var vectorSource = new VectorSource({
      format: new GeoJSON(),
      url: function(extent) {
        return 'https://inspire.navarra.es/services/CP/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=CP:CadastralParcel&outputFormat=application/json&srsName=EPSG:25830';
      },
      strategy: bboxStrategy
    });
    var vector = new VectorLayer({
      source: vectorSource,
      style: styleFunction
    });

    //Mapa
    this.map = new Map({
      target: 'map',
      controls: [],
      layers: [layer,vector,vectorResaltada],
      view: new View({
        projection: proyeccion,
        center: fromLonLat([-1.629950,42.63],proyeccion),
        zoom: 9
      })
    });

    this.map.getViewport().addEventListener("click", (evt) => { 
      this.map.forEachFeatureAtPixel(this.map.getEventPixel(evt), function (feature: any) {
        resaltarFeature(feature);
      });
    });
    var resaltarFeature = function(feature){
      if(this.f!=undefined)
        vectorSourceResaltada.removeFeature(this.f);
        this.f = feature;
      vectorSourceResaltada.addFeature(feature);
    }
  }
}

我想念什么？谢谢！

Answer 1

您应该使用箭头功能来全局访问此内容：

const resaltarFeature = feature => {
            if(this.f!=undefined)
               vectorSource.removeFeature(this.f);
            this.f = feature;
            vectorSource.addFeature(feature);
        }

Answer 2

问题在于词汇范围。使用箭头功能。或将其保存在另一个变量中并在函数中使用。

var self = this;

 var resaltarFeature = function(feature){
     if(self.f!=undefined)
       vectorSource.removeFeature(self.f);
     self.f = feature;
     vectorSource.addFeature(feature);
   }

无法从ngOnInit（）访问类变量

2 个答案: