Question

我正在使用OpenLayers，我需要插入自己的图片，但它不起作用。

错了什么？

在谷歌地图中使用此代码，图像重叠几乎完美：

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var swBound = new google.maps.LatLng(41.807477973187, -9.29843840238272);
var neBound = new google.maps.LatLng(43.789966775677, -6.73165522322293);
var bounds = new google.maps.LatLngBounds(swBound, neBound);

这是我的OpenLayers代码：

<!DOCTYPE HTML>
<html>
<head>
<title>OpenLayers Basic Example</title>

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
function init() {
map = new OpenLayers.Map("mapdiv");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);

var lonlat = new OpenLayers.LonLat(-7.788, 42.571).transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator
);

var zoom = 4;


var lonlat2 = new OpenLayers.LonLat(-9.878756, 43.656717).transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator
);


var lonlat3 = new OpenLayers.LonLat(-6.369852, 41.656717).transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator
);


var graphic = new OpenLayers.Layer.Image(
'Prueba',
'http://.........prueba/mapa1.png',
new OpenLayers.Bounds(lonlat2,lonlat3),
new OpenLayers.Size(570, 600),
{isBaseLayer: false}
);
map.addLayer(graphic);
map.setCenter(lonlat, zoom);    
}
</script>

<style>
#mapdiv { width:800px; height:800px; }
div.olControlAttribution { bottom:3px; }
</style>

</head>

<body onload="init();">
<p>My HTML page with an embedded map</p>
<div id="mapdiv"></div>
</body>
</html>

Answer 1

您无法从两个OpenLayers.Bounds创建OpenLayer.LonLat，但必须从描述左，下，右，上的四个数字构建它：

[...]
new OpenLayers.Bounds(lonlat2.lon, lonlat3.lat, lonlat3.lon, lonlat2.lat),
[...]

使用OpenLayers显示图像

1 个答案: