在Openlayers 3中使标记与地图一起缩放/旋转

Make marker zoom/rotate with map in Openlayers 3

本文关键字：一起 地图 缩放 旋转 Openlayers      更新时间：2023-09-26

我正试图通过向图层添加点特征并将图标设置为要加载的图像来将图像覆盖在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);

看起来您正试图使用地图的图像作为覆盖。与其将图像用作具有点几何图形的特征的图标，不如使用具有静态图像源的图像层。请参阅下面的代码以获取示例（另请参阅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];
}

多亏了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;
});
相关文章：