使用 OpenLayers 和 Angular 6 将标记添加到地图

Question

我正在为我在 angular 6 中的项目研究 OpenLayers 4.3.4。我实现它以显示地图：-(但我不能让它显示标记。我已经看了很多这个问题和答案(如何通过方法添加标记，开放层 4，角度 4(，但我无法让它工作：-|

我收到此错误：

core.js：1448 错误类型错误：layer.getLayerStatesArray 不是 功能

提前非常感谢

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