Javascript 如何重新投影图层（使用GeoServer和OpenLayers）以便覆盖在google地图上
我正在使用OpenLayers编写代码。在这段代码中，我想以不同的缩放级别显示不同的层。直到现在，一切都正常。我的问题开始于我试图添加谷歌地图作为基本层。我的图层投影系统与谷歌图层不一致，所以应该重新投影。我尝试使用Proj4js.transform方法，但没有成功。我的图层是EPSG:3006（瑞典），谷歌图层是EPSG:900913。以下代码将导致投影层向右移动。这意味着重新投影没有正常工作。 请让我知道我的代码有什么问题Javascript 如何重新投影图层（使用GeoServer和OpenLayers）以便覆盖在google地图上,javascript,openlayers,reprojection-error,Javascript,Openlayers,Reprojection Error,我正在使用OpenLayers编写代码。在这段代码中，我想以不同的缩放级别显示不同的层。直到现在，一切都正常。我的问题开始于我试图添加谷歌地图作为基本层。我的图层投影系统与谷歌图层不一致，所以应该重新投影。我尝试使用Proj4js.transform方法，但没有成功。我的图层是EPSG:3006（瑞典），谷歌图层是EPSG:900913。以下代码将导致投影层向右移动。这意味着重新投影没有正常工作。 请让我知道我的代码有什么问题 <!DOCTYPE HTML PUBLIC "-//W3C//
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>OpenLayers map preview</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Import OL CSS, auto import does not work with our minified OL.js build -->
<link rel="stylesheet" type="text/css" href="http://gisl.nateko.lu.se:8088/geoserver/openlayers/theme/default/style.css">
<!-- add here more css definition libraries-->
<!-- Basic CSS definitions -->
<style type="text/css">
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}
/* Toolbar styles */
#toolbar {
position: relative;
padding-bottom: 0.5em;
display: none;
}
/* The map and the location bar */
#map {
clear: both;
position: relative;
width: 337px;
height: 512px;
border: 2px solid black;
}
#wrapper {
width: 337px;
height: 50px;
}
#location {
float: right;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
color: #483D8B;
background-color: white;
}
#scale {
float:left;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
color: #483D8B;
background-color: white;
}
#nodelist{
font-family: Arial, Verdana, sans-serif;
font-size: 14px;
color: #000000;
font-style: normal;
background-color: white;
}
</style>
<!-- Import OpenLayers, reduced, wms read only version -->
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<!-- add here more js libraries -->
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script src ='proj4js/lib/proj4js-combined.js'></script>
<script src ='proj4js/lib/deprecated.js'></script>
<script defer="defer" type="text/javascript">
var map;
var untiled;
var tiled;
var pureCoverage = false;
// pink tile avoidance
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
// make OL compute scale according to WMS spec
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
function init(){
format = 'image/png';
var options = {
controls: [],
projection: new OpenLayers.Projection('EPSG:900916'),
displayProjection: new OpenLayers.Projection('EPSG:4326'),
maxExtent: new OpenLayers.Bounds(
-20037508, -20037508,20037508, 20037508.34),
//modify parameter
maxResolution: 5000,
//modify parameter
//setting zoom levels
numZoomLevels:15,
units: 'm',
};
map = new OpenLayers.Map('map', options);
// setup tiled layer
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN, numZoomLevels: 15, sphericalMercator:true}
// used to be {type: G_PHYSICAL_MAP}
);
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 15, sphericalMercator:true}
// default type, no change needed here
);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 15, sphericalMercator:true}
// used to be {type: G_HYBRID_MAP, numZoomLevels: 20}
);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: google.maps.MapTypeId.SATELLITE,
numZoomLevels: 15,
sphericalMercator:true
}
// used to be {type: G_SATELLITE_MAP, numZoomLevels: 22}
);
//add controls here
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.PanZoomBar());
zf= new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to max extent"});
// create a panel to locate the zoom extent button & add the panel to the map
// use the code to create the button from ZoomToMaxExtent.js
var panel= new OpenLayers.Control.Panel({defaultControl:zf});
panel.addControls([zf]);
map.addControl(panel);
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.Scale($('scale')));
//end add controls
layer2 = new OpenLayers.Layer.WMS(
"Gr2LundKom:districts","http://gisl.nateko.lu.se:8080/geoserver/wms",
{
projection: map.displayProjection,
height: '600',
width: '800',
layers: 'Gr2LundKom:districts',
styles: '',
srs:'EPSG:3006',
format: format,
tiled: 'true',
transparent: 'true',
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: false,
reproject: true
});
Proj4js.defs["EPSG:3006"] = "+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs";
Proj4js.defs["EPSG:4326"] = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
var src = new OpenLayers.Projection('EPSG:3006');
var dst = new OpenLayers.Projection('EPSG:4326');
Proj4js.transform(src, dst, layer2);
layer2.projection=dst;
layer3 = new OpenLayers.Layer.WMS(
"Gr2LundKom:public_buildings,other_buildings,roads_all,Public_Libraries",
"http://gisl.nateko.lu.se:8080/geoserver/wms",
{
projection: map.displayProjection,
height: '600',
width: '800',
layers: "Gr2LundKom:public_buildings,other_buildings,roads_all,Public_Libraries",
transparent: "true",
styles: '',
srs:'EPSG:3006',
format: format,
tiled: 'true',
transparent: 'true'
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: false,
reproject: true
});
Proj4js.transform(src, dst, layer3);
layer3.projection=dst;
map.addLayers([gsat,gphy,gmap,ghyb,layer2]);
//map.setCenter(new OpenLayers.LonLat(1335967.698, 6179172.362), 22);
map.zoomToExtent(new OpenLayers.Bounds(
-20037508, -20037508,20037508, 20037508.34));
// change the dislapy layers with the chandge of scale
map.events.register('zoomend', this, function (event) {
var zLevel = map.getZoom();
if( zLevel == 1 || zLevel == 2 || zLevel == 3 )
{
layer3.setVisibility(false);
layer2.setVisibility(true);
}
if( zLevel == 4 || zLevel == 5 || zLevel == 6)
{
layer2.setVisibility(false);
layer3.setVisibility(true);
map.addLayers([gsat,gphy,gmap,ghyb,layer3]);
}
});
}
</script>
</head>
<body onload="init()">
Map viewer using Geoserver and MapLayers
<br><br>
<div id="map">
</div>
<br>
<div id="wrapper">
<div id="location">location</div>
<br>
<div id="scale">
</div>
</div>
<br>
<div id="nodelist" >
--> Click on the map to get feature info
</div>
</body>
OpenLayers地图预览
身体{
字体系列：Verdana、Geneva、Arial、Helvetica、sans serif；
字体大小：小；
}
/*工具栏样式*/
#工具栏{
位置：相对位置；
垫底：0.5em；
显示：无；
}
/*地图和位置栏*/
#地图{
明确：两者皆有；
位置：相对位置；
宽度：337px；
高度：512px；
边框：2件纯黑；
}
#包装纸{
宽度：337px；
高度：50px；
}
#位置{
浮动：对；
字体系列：Arial，Verdana，无衬线；
字体大小：12px；
颜色：#483D8B；
背景色：白色；
}
#鳞片{
浮动：左；
字体系列：Arial，Verdana，无衬线；
字体大小：12px；
颜色：#483D8B；
背景色：白色；
}
#节点主义者{
字体系列：Arial，Verdana，无衬线；
字体大小：14px；
颜色：#000000；
字体风格：普通；
背景色：白色；
}
var映射；
var未计；
瓦状；
var pureCoverage=false；
//避免使用粉色瓷砖
OpenLayers.IMAGE_RELOAD_尝试次数=5；
//根据WMS规范制作OL计算比例
OpenLayers.DOTS_/u英寸=25.4/0.28；
函数init（）{
格式='image/png'；
变量选项={
控件：[]，
投影：新OpenLayers.projection（'EPSG:900916'），
displayProjection:new OpenLayers.Projection（'EPSG:4326'），
maxExtent:新的OpenLayers.Bounds（
-20037508, -20037508,20037508, 20037508.34),
//修改参数
最大分辨率：5000，
//修改参数
//设置缩放级别
numZoomLevels:15，
单位：'m'，
};
map=newOpenLayers.map（'map'，选项）；
//设置平铺层
var gphy=new OpenLayers.Layer.Google(
“谷歌物理”，
{type:google.maps.MapTypeId.TERRAIN，numZoomLevels:15，spherecalmercator:true}
//以前是{type:G_PHYSICAL_MAP}
);
var gmap=new OpenLayers.Layer.Google(
“Google Streets”，//默认值
{numZoomLevels:15，sphericalMercator:true}
//默认类型，此处无需更改
);
var ghyb=new OpenLayers.Layer.Google(
“谷歌混合”，
{type:google.maps.MapTypeId.HYBRID，numZoomLevels:15，spherecalmercator:true}
//以前是{type:G_HYBRID_MAP，numZoomLevels:20}
);
var gsat=new OpenLayers.Layer.Google(
“谷歌卫星”，
{type:google.maps.MapTypeId.SATELLITE，
numZoomLevels:15，
球形计算器：正确
}
//以前是{type:G_SATELLITE_MAP，numZoomLevels:22}
);
//在此处添加控件
addControl（新的OpenLayers.Control.LayerSwitcher（））；
addControl（新的OpenLayers.Control.LayerSwitcher（））；
addControl（新的OpenLayers.Control.PanZoomBar（））；
zf=newOpenLayers.Control.ZoomToMaxExtent（{title:“最大范围缩放”}）；
//创建一个面板以定位“缩放范围”按钮并将该面板添加到地图中
//使用代码从ZoomToMaxExtent.js创建按钮
var panel=newopenlayers.Control.panel（{defaultControl:zf}）；
面板。添加控件（[zf]）；
地图添加控制（面板）；
addControl（新的OpenLayers.Control.Navigation（））；
map.addControl（新的OpenLayers.Control.Scale（$（'Scale'））；
//结束添加控件
layer2=新的OpenLayers.Layer.WMS（
“Gr2LundKom：地区”http://gisl.nateko.lu.se:8080/geoserver/wms",
{
投影：map.displayProjection，
高度：'600'，
宽度：“800”，
图层：“Gr2LundKom:地区”，
样式：“”，
srs:'EPSG:3006'，
格式：格式，
平铺：“真的”，
透明：“真的”，
},
{
缓冲区：0，
displayOutsideMaxExtent:true，
isBaseLayer:false，
责备：对
});
项目定义[“EPSG:3006”]=“+proj=utm+zone=33+ellps=GRS80+towgs84=0,0,0,0,0+units=m+no_定义”；
项目定义[“EPSG:4326”]=“+proj=longlat+ellps=WGS84+datum=WGS84+no_defs”；