Javascript 使用OpenLayers显示图像_Javascript_Image_Overlay_Openlayers_Openstreetmap

Javascript 使用OpenLayers显示图像

javascript image openlayers

Javascript 使用OpenLayers显示图像,javascript,image,overlay,openlayers,openstreetmap,Javascript,Image,Overlay,Openlayers,Openstreetmap,我正在使用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.Lat

我正在使用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>


OpenLayers基本示例
函数init（）{
map=新的OpenLayers.map（“mapdiv”）；
var mapnik=new OpenLayers.Layer.OSM（）；
map.addLayer（mapnik）；
var lonlat=新OpenLayers.lonlat（-7.788,42.571）.转换(
新OpenLayers.Projection（“EPSG:4326”），//从WGS 1984转换而来
新OpenLayers.Projection（“EPSG:900913”）//到球形墨卡托
);
var-zoom=4；
var lonlat2=新的OpenLayers.LonLat（-9.878756,43.656717）.转换(
新OpenLayers.Projection（“EPSG:4326”），//从WGS 1984转换而来
新OpenLayers.Projection（“EPSG:900913”）//到球形墨卡托
);
var lonlat3=新OpenLayers.LonLat（-6.369852,41.656717）.转换(
新OpenLayers.Projection（“EPSG:4326”），//从WGS 1984转换而来
新OpenLayers.Projection（“EPSG:900913”）//到球形墨卡托
);
var graphic=新OpenLayers.Layer.Image(
“普鲁巴”，
'http://.........prueba/mapa1.png',
新的OpenLayers.Bounds（lonlat2，lonlat3），
新OpenLayers.尺寸（570600），
{isBaseLayer:false}
);
添加图层（图形）；
地图设置中心（lonlat，zoom）；
}
#mapdiv{宽度：800px；高度：800px；}
div.olControlAttribute{bottom:3px；}
带有嵌入式地图的我的HTML页面

您不能从两个

OpenLayer.LonLat

创建一个

OpenLayers.Bounds

，但必须从描述左、下、右、上的四个数字构造它：

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

您正在谈论图像贴图层或图像作为标记符号或弹出窗口中的图像？我猜是第一个，所以请。与此OL3示例进行比较