Question

我使用静态图像创建了一个包含OpenLayers 3的地图。它使用假投影，因此地图可以用来正确显示图层，因为它以像素为单位进行测量。这是代码：

var pixelProjection = new ol.proj.Projection({
  code: 'pixel',
  units: 'pixels',
  extent: [0, 0, 1389, 1070]
});


var map = new ol.Map({
  layers: [
    new ol.layer.Image({
      source: new ol.source.ImageStatic({
        url: 'http://s25.postimg.org/4o15oqbmn/jdgf.jpg',
        imageSize: [1389, 1070],
        projection: pixelProjection,
        imageExtent: pixelProjection.getExtent()
      })
    })
  ],
  target: 'map',
  view: new ol.View2D({
    projection: pixelProjection,
    center: ol.extent.getCenter(pixelProjection.getExtent()),
    zoom: 2
  }) 
});

我试图添加标记叠加以添加更多交互，但是我很难指定位置，标记位于地图之外，而不是在我想放置它的位置。

var marker = new ol.Overlay({
    position: [200, 200],
    element: document.getElementById('marker'),
    stopEvent: false
});

我非常喜欢这个，所以如果有人知道如何正确设置位置，我会很感激。

Answer 1

使用此OpenLayers 3 map作为示例，我可以使用以下内容向静态图像的中心添加标记：

var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point([700, 700])
});

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        src: 'http://ol3js.org/en/master/examples/data/icon.png'
    })
});

iconFeature.setStyle(iconStyle);

var vectorSource = new ol.source.Vector({
    features: [iconFeature]
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource
});

OpenLayers在静态图像上设置叠加的位置

1 个答案: