什么添加标记到角度为6的openlayer 5地图

Question

我在角度6的项目中使用OpenLayers5。我实现了它来显示地图，并且它正在工作:-)。但是我无法显示任何标记，请帮助我！！！显示此版本的OpenLayers示例...

bodyDataProvider

}

Answer 1

您需要vector layer和source才能添加功能。

您的代码如下所示：

import OlMap from 'ol/Map';
import OlVectorSource from 'ol/source/Vector';
import OlVectorLayer from 'ol/layer/Vector';
import OlView from 'ol/View';
import OlFeature from 'ol/Feature';
import OlPoint from 'ol/geom/Point';
import OlXyzSource from 'ol/source/XYZ';
import OlTileLayer from 'ol/layer/Tile';

import {fromLonLat} from 'ol/proj';

export class MyComponent implements OnInit {

    map: OlMap;
    vectorSource: OlVectorSource;
    vectorLayer: OlVectorLayer;
    xyzSource: OlXyzSource;
    tileLayer: OlTileLayer;
    view: OlView;
    marker: OlFeature;

    ngOnInit() {

        /* Feature and vector */

        this.marker = new OlFeature({
            // Added fromLonLat
            geometry: new OlPoint(fromLonLat([27.46164, 53.902257]))
        });

        this.vectorSource = new OlVectorSource({
            features: [this.marker]
        });

        this.vectorLayer = new OlVectorLayer({
            source: this.vectorSource
        });

        /* XYZ */

        this.xyzSource = new OlXyzSource({
            url: 'http://tile.osm.org/{z}/{x}/{y}.png'
        });

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

        /* View and map */

        this.view = new OlView({
            center: fromLonLat([27.56164, 53.902257]),
            zoom: 14
        });

        this.map = new OlMap({
            target: 'map',
            // Added both layers
            layers: [this.tileLayer, this.vectorLayer],
            view: this.view
        });
    }
}