将地图设置为 angular6/openlayers 中的变量 [英] Setting the map as a variable in angular6/openlayers

问题描述

我使用 angular 6 和 openlayers 5.1.3.我成功地做了 npm install ol --save 然后在我的角度我做了

I use angular 6 and openlayers 5.1.3. I did npm install ol --save successfully and then in my angular I did

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 works fine, but the problem is that if I do

    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});
    });

我得到无法读取 null 的属性 'olmap' 指的是这个 this.olmap.getView().animate({center: coords, zoom: 10});

I get Cannot read property 'olmap' of null referring to this this.olmap.getView().animate({center: coords, zoom: 10});

为什么我不能用 this.olmap 引用 olmap，因为我在 Typescript 中定义了它和其他变量?我再也没有遇到这个问题，我总是访问像 this.x

Why I cannot refer to the olmap with the this.olmap, since I am defining it along with the other vars in Typescript? I never has this problem again, I always access values like this.x

为什么会出现这个错误?这是什么意思?

Why do I get this error? What does it mean?

请解释一下，以便我了解问题所在，并可以继续我的项目，而不会出现任何问题.

Please explain so I can understand what is wrong and can continue with my project, without having questions.

谢谢

推荐答案

您看到的问题与 Javascript 词法范围有关.

The problem you are seeing relates to Javascript lexical scoping.

在您的 Angular 6 项目中，您可以使用 ES6 箭头函数访问父词法作用域，您的代码现在应该如您所愿:

In your Angular 6 project you can use an ES6 arrow function to access the parent lexical scope, your code should now behave as you are expecting:

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

进一步阅读:

关于 ES2015 箭头函数和这个"你不应该知道的一切
你不知道了解 JS:范围 &闭包 - 附录 C:词法-this

这篇关于将地图设置为 angular6/openlayers 中的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！