在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;
});