Question

我已成功使用图像图层将图像放在地图上的特定位置。但是，我想在图像顶部的特定像素位置添加/绘制图标。我已经在地图上的一个点添加了一个标记但是，我浏览了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);

Openlayers：使用像素信息/位置在ImageLayer上绘制标记

0 个答案: