将贴图设置为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});
});

我得到无法读取引用此this.olmap.getView().animate({center: coords, zoom: 10});的null的属性"olmap">

为什么我不能用this.olmap引用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 Arrow函数和"this"的所有你需要不知道的
你不知道JS:Scope&闭包-附录C：词汇本