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

在angular6/openlayers中将贴图设置为变量,openlayers,angular6,openlayers-5,Openlayers,Angular6,Openlayers 5,我使用angular 6和openlayers 5.1.3。我成功地npm安装了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';

我使用angular 6和openlayers 5.1.3。我成功地
npm安装了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
this.olmap.getView().animate({center:coords,zoom:10})的null属性“olmap”

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

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

请解释,这样我就可以理解什么是错误的,可以继续我的项目,没有问题


谢谢

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

在Angular 6项目中,您可以使用ES6 arrow函数访问父词法作用域,您的代码现在应该按照预期的方式运行:

navigator.geolocation.getCurrentPosition((pos)=>{
const coords=OlProj.fromlont([pos.coords.longitude,pos.coords.lation]);
this.olmap.getView().animate({center:coords,zoom:10});
});
进一步阅读:



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

在Angular 6项目中,您可以使用ES6 arrow函数访问父词法作用域,您的代码现在应该按照预期的方式运行:

navigator.geolocation.getCurrentPosition((pos)=>{
const coords=OlProj.fromlont([pos.coords.longitude,pos.coords.lation]);
this.olmap.getView().animate({center:coords,zoom:10});
});
进一步阅读: