angular6 - 什么添加标记以使用角度 6 映射 openlayer 5

Question

我在 Angular 6 中为我的项目使用 OpenLayers 5。我实现了它来显示地图并且它正在工作:-)。但是我不能让它显示任何标记，请帮助我！！！显示使用此版本 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 Map from 'ol/Map';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import View from 'ol/View';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import XyzSource from 'ol/source/XYZ';
import TileLayer from 'ol/layer/Tile';
    
import { fromLonLat } from 'ol/proj';
    
export class MyComponent implements OnInit {

  map: Map;
  vectorSource: VectorSource;
  vectorLayer: VectorLayer;
  xyzSource: XyzSource;
  tileLayer: TileLayer;
  view: View;
  marker: Feature;
    
  ngOnInit() {

    // Feature and vector
    this.marker = new Feature({
      geometry: new Point(fromLonLat([27.46164, 53.902257]))
    });
    
    this.vectorSource = new VectorSource({
      features: [this.marker]
    });
    
    this.vectorLayer = new VectorLayer({
      source: this.vectorSource
    });

    // XYZ
    this.xyzSource = new XyzSource({
      url: 'http://tile.osm.org/{z}/{x}/{y}.png'
    });
    
    this.tileLayer = new TileLayer({
      source: this.xyzSource
    });

    // View and map
    this.view = new View({
      center: fromLonLat([27.56164, 53.902257]),
      zoom: 14
    });
    
    this.map = new Map({
      target: 'map',
      layers: [this.tileLayer, this.vectorLayer],
      view: this.view
    });
  }
}