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

您似乎尝试使用image of a map作为叠加层。不要将图像用作具有点几何的要素的图标，而是最好使用带有static image source的图像图层。请参阅下面的代码以获取示例（也是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;
});

在Openlayers 3中使用地图进行标记缩放/旋转

2 个答案: