Что добавить маркер на карту openlayer 5 с угловой 6

Question

Я использую OpenLayers 5 для своего проекта в angular 6. Я реализовал его, чтобы показать карту, и она работает:-). Но я не могу показать какие-либо маркеры, пожалуйста, помогите мне!!! Показать примеры с этой версией OpenLayers...

import OlMap from 'ol/Map';
import OlXYZ from 'ol/source/XYZ';
import OlTileLayer from 'ol/layer/Tile';
import OlView from 'ol/View';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';

import {fromLonLat} from 'ol/proj';

export class MyComponent implements OnInit {
    map: OlMap;
    source: OlXYZ;
    layer: OlTileLayer;
    view: OlView;
    marker: Feature;


ngOnInit() {
    this.marker = new Feature({
        geometry: new Point([27.46164, 53.902257])
    });

    this.source = new OlXYZ({
        url: 'http://tile.osm.org/{z}/{x}/{y}.png',
        features: [this.marker]
    });

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

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

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

}

Answer 1

Вам нужен векторный слой и источник для добавления объектов.

Ваш код выглядит следующим образом:

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