OpenLayers叠加图片至OpenStreetMap指定坐标失败求助

我帮你分析下代码里的几个关键问题，这就是图片没显示的核心原因：

问题1：Bounds坐标顺序搞反了 #

OpenLayers的OpenLayers.Bounds参数要求是 minX, minY, maxX, maxY 的顺序，你写的Bounds里，第二个值（47.076626...）比第四个值（47.076619...）大——纬度数值越大越靠北，所以minY应该是更小的那个值，maxY是更大的。这直接导致图层的地理范围无效，自然看不到图片。

问题2：投影没有转换 #

你用的Bounds是EPSG:4326的经纬度坐标（15.xx是经度，47.xx是纬度），但图层的projection设的是EPSG:900913（Web墨卡托投影，现在通常叫EPSG:3857），两种投影的坐标格式完全不同，直接用4326的坐标当900913的Bounds，图片会被放到完全错误的位置。

问题3：图片尺寸设置可能有问题 #

虽然OpenLayers.Size(0, 0)理论上会自动加载图片并获取尺寸，但如果存在跨域限制或者图片加载延迟，很可能导致尺寸获取失败，进而无法渲染图片。

修正后的代码 #

我把这些问题都修复了，你可以直接试试：

// 先定义两个投影对象
var wgs84 = new OpenLayers.Projection("EPSG:4326");
var webMercator = new OpenLayers.Projection("EPSG:900913");

// 修正Bounds顺序：minX, minY, maxX, maxY
var originalBounds = new OpenLayers.Bounds(
  15.419198532265034, 
  47.07661959417825, 
  15.421042606244283, 
  47.07662635844666
);

// 把4326坐标转换成Web墨卡托坐标
var transformedBounds = originalBounds.transform(wgs84, webMercator);

// 创建图片图层，手动指定图片的实际像素尺寸（替换成你图片的真实宽高）
lyr1 = new OpenLayers.Layer.Image(
  "Image Overlay",
  "https://www.greenique.de/wp-content/uploads/2016/03/test.png",
  transformedBounds,
  new OpenLayers.Size(200, 200), // 这里改成你图片的实际像素宽高，比如如果是100x100就写100,100
  {
    projection: webMercator,
    isBaseLayer: false,
    visibility: true,
    displayInLayerSwitcher: true
  }
);

map.addLayer(lyr1);

额外提醒 #

• 如果不知道图片的实际尺寸，你可以把new OpenLayers.Size(200,200)换成new OpenLayers.Size(null,null)，让OpenLayers自动尝试获取，但记得确保图片没有跨域限制（如果图片和你的网站不在同一个域名，可能需要配置CORS）。
• 你原来的displayProjection参数其实不需要，因为我们已经手动转换了坐标，这个参数主要是给控件用的，和图层的投影无关。

内容的提问来源于stack exchange，提问作者Pajo