无法使用 openLayer 在图层上绘制内容

Question

我正在使用Ionic创建一个使用openlayer的应用程序。 我可以成功地绘制我的地图(自定义 jpeg 文件(并与之交互。但是从昨天开始，我就一直在拉头发，试图在地图上的图层上添加一个标记/图标/绘制一个简单的点。

我已经到了执行代码时没有错误的地步，但它仍然没有绘制任何东西。

看一看 ：

ionViewDidEnter() {
this.openLayerMap();
}
openLayerMap() {

this.map = new Map({
controls: defaultControls().extend([
new FullScreen()
]),
interactions: defaultInteractions().extend([
new DragRotateAndZoom()
]),
target: 'mapId2',
layers: [
new ImageLayer({
source: new Static({
attributions: 'image of office',
url: 'assets/images/officePlan.jpg',
projection: this.projection,
imageExtent:this.extent
})
})
],
view: new View({
projection: this.projection,
center: getCenter(this.extent),
zoom: 2,
maxZoom: 8
})
});

this.map.on('click', (evt) => {
console.log(evt.coordinate[0], evt.coordinate[1]);
this.clickOnMap(evt.coordinate[0], evt.coordinate[1]);
});
}

public clickOnMap(x: number, y: number) {
this.AddMarker(x, y);
}

public AddMarker(x: number, y: number) {
var feature = new Feature(
new Point(x, y)
);
var iconStyle = new Style({
image: new Icon(({
color: '#8959A8',
crossOrigin: 'anonymous',
imgSize: [20, 20],
src: 'assets/images/logo.png'
}))
})
feature.setStyle(iconStyle);
var vectorSource = new VectorSource({
features: [feature]
});
var vectorLayer = new VectorLayer({
source: vectorSource
});
console.log("add layer");
console.log(vectorLayer);
this.map.addLayer(vectorLayer);
}

使用此代码，当我单击地图时，它应该绘制一些东西。我所有的"控制台.log"都打印正确，地图似乎"接受"我的图层，因为没有错误。

在此处输入图像描述

我不明白为什么它不起作用，我已经浪费了很多时间：/请帮忙

Answer 1

你的代码似乎是真的。 请更改您的图标样式定义

public IconStyle = new Style({
image: new Icon(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'http://maps.google.com/mapfiles/ms/icons/red-pushpin.png'
})),
text: new Text({
font: '18px sans-serif',
fill: new Fill({
color: [0, 0, 0, 1]
})     
})
});
var iconFeature = new Feature({
geometry: new Point([5725221.258222027, 4264433.078145323]),          
population: 4000,
rainfall: 500,
id: -1234567890 //for sample      
});
this.vector.getSource().addFeature(iconFeature );       
iconFeature .setStyle(this.IconStyle);
}