在Openlayers 3中使用地图进行标记缩放/旋转 [英] Make marker zoom/rotate with map in Openlayers 3

问题描述

我正在尝试通过向图层添加点要素并将图标设置为要加载的图像来在OpenLayers 3.0地图上叠加图像。如何缩放地图时如何缩放它？
或者有没有更好的方法在图层上叠加图像？

I'm trying to overlay an image over an OpenLayers 3.0 map by adding a point feature to the layer, and setting the icon to the image to load. How can I get it to scale with the map as it is being zoomed? Or is there a better way to overlay an image atop a layer?

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/ ） 。

It looks like you are trying to use an image of a map as an overlay. Instead of using the image as an icon for a feature with a point geometry, you'd be better off using an image layer with a static image source. See the code below for an example (also 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' 。

I've just guessed at the geographic extent of the image. It may also be that the image overlays better on a map with the view projection set to 'EPSG:4326'.

请注意，如果您想使用图标来表示某个点功能，你希望它旋转和缩放与地图（如这个问题的标题所暗示），你需要做两件事：

Note that if you want to use an icon to symbolize a point feature and you want it to rotate and scale with the map (as the title of this question implies), you need to do two things:

• 将 rotateWithView 选项设置为 true （默认值 false 表示旋转地图时图标不会旋转。）


• 为矢量图层指定样式函数。将使用您的功能和视图分辨率调用此函数。然后，您可以使用分辨率缩放图标。下面的样式函数应该让你大致了解它是如何工作的。

• Set the rotateWithView option to true (the default of false means that the icon will not rotate when you rotate the map).
• Give your vector layer a style function. This function will be called with your feature and the view resolution. You can then scale your icon using the resolution. The style function below should give you a rough idea of how this could work.

// 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];
}

这篇关于在Openlayers 3中使用地图进行标记缩放/旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！