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

时间:2017-10-06 16:54:21

标签: javascript openlayers-3

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

0 个答案:

没有答案