我已成功使用图像图层将图像放在地图上的特定位置。 但是,我想在图像顶部的特定像素位置添加/绘制图标。 我已经在地图上的一个点添加了一个标记 但是,我浏览了API,无法找到独立于地图的图像操作方式。 图标应放置在图像顶部的特定像素位置,与底层地图无关。
我已经考虑过使用ImageCanvas图层,但我找不到有关如何定义位置的信息。
let map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: Proj.transform(coordinate, 'EPSG:4326', 'EPSG:3857'),
zoom: 12
})
});
// Create an image layer
let imageLayer = new Image({
source: new ImageStatic({
attributions: [
new Attribution({
html: ''
})
],
url: 'https://placebear.com/2248/2048',
imageSize: [2248, 2048],
projection: map.getView().getProjection(),
imageExtent: Extent.applyTransform([8.935554, 51.74708, 8.961582, 51.73269], Proj.getTransform("EPSG:4326", "EPSG:3857")),
zIndex: 100
}),
});
map.addLayer(imageLayer);
let iconFeature = new Feature(new Point(Proj.transform(coordinate, 'EPSG:4326', 'EPSG:3857')));
let iconStyle = new Style({
image: new Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://openlayers.org/en/v4.4.0/examples/data/icon.png'
}))
});
iconFeature.setStyle(iconStyle);
let vectorLayer = new VectorLayer({
source: new Vector({
features: [iconFeature],
}),
zIndex: 200,
});
map.addLayer(vectorLayer);