在Openlayers 3中使用地圖縮放/旋轉標記

Question

我正在嘗試通過在圖層上添加點要素並將圖標設置為要加載的方式，在OpenLayers 3.0地圖上覆蓋圖像。 在縮放地圖時，如何使其與地圖成比例？ 還是有更好的方法將圖像疊加在圖層上？

p=ol.proj.transform( [-78,40],'EPSG:4326','EPSG:3857')
var f=new ol.Feature({ geometry: new ol.geom.Point(p) });

var imgStyle=new ol.style.Style({
    image: new ol.style.Icon(({
        rotateWithView: false,
        anchor: [.5,.5],
        anchorXUnits: 'fraction', anchorYUnits: 'fraction',
        opacity: 0.75,
        src: 'http://www.viseyes.org/shiva/map.jpg'
        }))
    });

f.setStyle(imgStyle);
myLayerr.getSource().addFeature(f);                     

Answer 1

似乎您正在嘗試使用地圖圖像作為疊加層。 最好將圖像用作帶有靜態圖像源的圖像層，而不是將圖像用作具有點幾何形狀的要素的圖標。 有關示例，請參見下面的代碼（另請參見http://jsfiddle.net/tschaub/orr6qfkc/ ）。

var extent = ol.proj.transformExtent(
    [-5.6342, 50.3331, 1.6607, 53.0559], 'EPSG:4326', 'EPSG:3857');

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.MapQuest({layer: 'osm'})
    }),
    new ol.layer.Image({
      source: new ol.source.ImageStatic({
        url: 'http://www.viseyes.org/shiva/map.jpg',
        imageExtent: extent
      })
    })
  ],
  view: new ol.View({
    center: ol.extent.getCenter(extent),
    zoom: 7
  })
});

我只是在猜測圖像的地理范圍。 將視圖投影設置為'EPSG:4326' ，圖像在地圖上的疊加效果也可能更好。

請注意，如果要使用圖標符號化點要素，並且希望其隨地圖旋轉和縮放（如該問題的標題所示），則需要做兩件事：

• 將rotateWithView選項設置為true （默認為false表示旋轉地圖時圖標不會旋轉）。
• 給您的向量層一個樣式函數。 該函數將隨您的功能和視圖分辨率一起調用。 然后，您可以使用分辨率縮放圖標。 下面的樣式功能應使您大致了解其工作方式。

// resolution at which to display the
// icon at 1:1
var maxResolution = 10000;

function style(feature, resolution) {
  var icon = new ol.style.Style({
    image: new ol.style.Icon({
      src: 'http://example.com/icon.png',
      scale: maxResolution / resolution,
      rotateWithView: true
    }))
  });
  return [symbolizer];
}

Answer 2

多虧了Tim的幫助，我才能夠旋轉隨視圖縮放的圖像標記。 馬克斯

這是最終代碼：

var p=ol.proj.transform( [-78,40],'EPSG:4326','EPSG:3857')
var f=new ol.Feature({ geometry: new ol.geom.Point(p) });
this.boxLayer.getSource().addFeature(f);                        

this.boxLayer.setStyle(function(feature, resolution) {
    var styleArray = [ new ol.style.Style( {
        image: new ol.style.Icon({
        src: 'http://www.viseyes.org/shiva/map.jpg',
        scale: maxResolution/resolution,
        rotateWithView: true,
        rotation: .5,
        anchor: [.5,.5],
        anchorXUnits: 'fraction', anchorYUnits: 'fraction',
        opacity: 0.75
        })
     })];
     return styleArray;
});