[英]Make marker zoom/rotate with map in Openlayers 3
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. 我正在尝试通过在图层上添加点要素并将图标设置为要加载的方式,在OpenLayers 3.0地图上覆盖图像。 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);
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/ ).
有关示例,请参见下面的代码(另请参见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
})
});
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'
. 将视图投影设置为
'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
option to true
(the default of false
means that the icon will not rotate when you rotate the map). 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];
}
Thanks to Tim's help, I was able to rotate image markers that scale with the view. 多亏了Tim的帮助,我才能够旋转随视图缩放的图像标记。 Max
马克斯
Here's the final code : 这是最终代码:
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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.