angular - 使用 OpenLayers 和 Angular 6 向 map 添加标记

Question

我在 angular 6 中为我的项目调查了 OpenLayers 4.3.4。我实现了它来显示 map :-) 但我不能让它显示标记。我在这个问题和答案( How to add marker by method, openlayers 4, angular 4 )上看了很多，但我不能让它工作:-|

我收到此错误:

core.js:1448 ERROR TypeError: layer.getLayerStatesArray is not a function

首先十分感谢

 import { Component, OnInit } from '@angular/core';
 import OlInteraction from 'ol/interaction';
 import OlTileLayer from 'ol/layer/tile';
 import OlMap from 'ol/map';
 import OlOverlay from 'ol/overlay';
 import OlProj from 'ol/proj';
 import OlXYZ from 'ol/source/xyz';
 import OlView from 'ol/view';
 import * as ol from 'openlayers';



export class OpenStreetMapComponent implements OnInit {

map: OlMap;
source: OlXYZ;
layer: OlTileLayer;
view: OlView;
olOverlay: OlOverlay;
olFeature: OlFeature;
markerSource: ol.source.Vector;

constructor() {
}

ngOnInit() {

    this.markerSource = new ol.source.Vector();

    const markerStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          opacity: 0.75,
          src: 'https://openlayers.org/en/v4.6.4/examples/data/icon.png'
        }))
      });

  this.source = new OlXYZ({
    // Tiles from Mapbox (Light)
    url: 'https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
  });

  this.view = new OlView({
    center: OlProj.fromLonLat([9.501785, 56.26392]),
    zoom: 7,
  });

  this.map = new OlMap({
    interactions: OlInteraction.defaults({mouseWheelZoom: false}),
    target: 'map',
    layers: [ new ol.layer.Tile({
        source: new ol.source.OSM(),
      }),
      new ol.layer.Vector({
        source: this.markerSource,
        style: markerStyle,
      }), ],
    view: this.view
  });

  this.addMarker(9.501785, 56.26392);
 //this.olOverlay = new OlOverlay();
}

addMarker(lon: number, lat: number) {
    console.log(lat);
    console.log(lon);

    var iconFeatures = [];

    var iconFeature = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.transform([lon, lat], 'EPSG:4326',
        'EPSG:3857')),
      name: 'Null Island',
      population: 4000,
      rainfall: 500
    });

    iconFeatures.push(iconFeature);
    console.log('iconfrature');
    var vectorSource = new ol.source.Vector({
      features: iconFeatures //add an array of features
    });

    this.markerSource.addFeature(iconFeature);

    var iconStyle = new ol.style.Style({
      image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: 'https://openlayers.org/en/v4.6.4/examples/data/icon.png'
      }))
    });

    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      style: iconStyle
    });

    this.map.addLayer(vectorLayer);

  }

}

Answer 1

从更简单的东西开始，比如没有任何东西的标记
创建图层

var source = new ol.source.vector({});
var layer = new ol.layer.vector({ source: source});
    map.addLayer(layer );

创建标记

var marker = new ol.Feature({
    geometry: new ol.geom.Point([0,0]) // dont worry about coordinate type 0,0 will be in west coast of africa
}); 

将其添加到源

source.addFeature(marker);