javascript - OpenLayers v5 ol.Overlay 和 Zooming 行为
问题描述
我目前正在使用 openlayers 并使用新的 ol.source.ImageStatic 作为我的地图。
我想在地图顶部有一个透明图像,并使用 ol.Overlay 和 element.innerHTML 来覆盖图像。但是,我现在遇到这种方法的缩放问题。我希望透明图像在您缩小时随地图按比例缩小,并在您放大时放大并锚定到地图中的一个点。
目前看来,当您在地图上缩小时,覆盖的图像会扩展并且不会固定在同一位置,而当您放大图像时,图像会变小并返回到其位置。
任何帮助将不胜感激谢谢!
var element = document.createElement('div');
element.innerHTML = '<div class="spoiler" id=""> <img src="IMAGE" width="500" height="500" onclick="showSpoiler(this);""></img> <div class="inner" style="display:none;">sample text</div></div>';
var marker = new ol.Overlay({
position: [-520, 100],
positioning: 'center-center',
element: element,
insertFirst: true,
stopEvent: true,
autoPan: true
});
map.addOverlay(marker);
解决方案
查看 ol-ext ol/source/GeoImage 以在地图上以某个位置和比例显示图像。当比例定义地面分辨率时,图像将随地图一起缩放。
在线查看示例https://viglino.github.io/ol-ext/examples/layer/map.geoimage.html