我目前正在使用openlayers并使用新的ol.source.ImageStatic作为我的地图。
我想在地图上顶部有一个透明的图像并使用了ol。用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 示例
在我看来,您评论的是预期的行为。这是因为您指定的图像大小为 500 x 500,并且不会更改。检查示例 OL 示例叠加弹出窗口、OL 示例叠加。
OL 正在按照您的要求进行渲染,我很确定它也必须绑定到该位置。要检查这一点,您应该平移地图。