Question

我有点角色（和javascript一般）。我有这个代码

import {Injectable, OnInit} from '@angular/core';


import OlMap from 'ol/map';
import OSM from 'ol/source/osm'
import OlXYZ from 'ol/source/xyz';
import OlTileLayer from 'ol/layer/tile';
import OlView from 'ol/view';
import OlProj from 'ol/proj';

@Injectable()
export class MapService {
    public  map: OlMap;
    private _source: OlXYZ;
    private _layer: OlTileLayer;
    private _view: OlView;


    constructor() { }

    /**
     * Function initializes the map
     * @returns {} Object of map
     */
    initMap() {
        this._source = new OSM({
        });

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

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

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

        this.map.on("moveend", function () {
            console.log(this.map);
        })
    }
}

问题出在最后一行。我正在尝试控制在moveend上记录地图的对象（所以当用户拖动地图和释放按钮时 - 我想加载一些数据取决于地图的中心）。 但控制台说对象this.map未定义（即使我在该对象上调用一个方法，它工作正常 - 它在鼠标按钮释放时被调用。

我想这将是一些特殊的javascript，一些本地或全局对象引用等等。

有人可以帮助我吗？

注意：在map组件中调用initMap（）方法，如此

ngOnInit() {
    this.map = this.mapService.initMap();

    console.log(this.mapService.map);
}

（在这个console.log案例中，它的工作正常，有_ol_map类型的对象）

Answer 1

您的问题是function () {}和() => {}之间的差异。

在function () {}中，“this”的上下文是函数的调用者，所以这里是“OlMap”。
在() => {}中，“this”的上下文是您创建它的位置，因此这里是“MapService”。

在OlMap中不存在this.map。

要解决您的问题，只需将function ()替换为() =>到this.map.on（）。

Openlayers在类

1 个答案: