将贴图设置为 angular6/openlayers 中的变量

Question

我使用 Angular 6 和 openlayers 5.1.3。我成功地做到了

npm install ol --save

，然后以我的角度我做到了

import OlMap from 'ol/map';
import OlXYZ from 'ol/source/xyz';
import OlTileLayer from 'ol/layer/tile';
import OlView from 'ol/View';
import * as OlProj from 'ol/proj';
import 'ol/ol.css';

export class myComponent {

 olmap: OlMap;
 source: OlXYZ;
 layer: OlTileLayer;
 view: OlView;
  //other, non-ol stuff
   loading: boolean = false;
   myname: String;

  ngOnInit() {

    this.source = new OlXYZ({
      url:'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
    });

    this.layer = new OlTileLayer({
      source: this.source
    });

    this.view = new OlView({
      center: OlProj.fromLonLat([6.661594, 50.433237]),
      zoom: 3,
    });

    const olmap = new OlMap({
      target: 'map',
      layers: [this.layer],
      view: this.view
    });


    navigator.geolocation.getCurrentPosition(function(pos) {
      const coords = OlProj.fromLonLat([pos.coords.longitude, pos.coords.latitude]);
      olmap.getView().animate({center: coords, zoom: 10});
    });

  }//ngOnInit

这很好用，但问题是如果我这样做

    this.olmap = new OlMap({
      target: 'map',
      layers: [this.layer],
      view: this.view
    });

然后

    navigator.geolocation.getCurrentPosition(function(pos) {
      const coords = OlProj.fromLonLat([pos.coords.longitude, pos.coords.latitude]);
      this.olmap.getView().animate({center: coords, zoom: 10});
    });

我得到 Cannot read property 'olmap' of null 指的是这个

this.olmap.getView().animate({center: coords, zoom: 10});

为什么我不能用

olmap

来引用

this.olmap

，因为我将它与 Typescript 中的其他变量一起定义？我再也没有遇到过这个问题，我总是访问像

this.x

这样的值

为什么我会收到此错误？这是什么意思？

请解释一下，以便我能够理解出了什么问题，并可以继续我的项目，而不会有任何疑问。

谢谢

Answer 1

您看到的问题与 Javascript 词法作用域有关。

在您的 Angular 6 项目中，您可以使用 ES6 箭头函数来访问父词法范围，您的代码现在应该按照您的预期运行：

navigator.geolocation.getCurrentPosition((pos) => {
  const coords = OlProj.fromLonLat([pos.coords.longitude, pos.coords.latitude]);
  this.olmap.getView().animate({center: coords, zoom: 10});
});

进一步阅读：

关于 ES2015 箭头函数和“this”你需要不知道的一切
你不知道 JS：作用域和闭包 - 附录 C：词法-this