Web .地图未显示在浏览器中_Web_Geoserver

Web .地图未显示在浏览器中

web

Web .地图未显示在浏览器中,web,geoserver,Web,Geoserver,我可以看到一些人有类似的问题，但仍然无法找出我的代码有什么问题形状文件已上载到GeoServer，但地图未显示在网页中。我猜代码有一些非常基本的错误，但我看不出是什么。文档中的URL绝对正确 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Open

我可以看到一些人有类似的问题，但仍然无法找出我的代码有什么问题

形状文件已上载到GeoServer，但地图未显示在网页中。我猜代码有一些非常基本的错误，但我看不出是什么。文档中的URL绝对正确

<!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">

<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>

<script type="text/javascript" src="http://www.openlayers.org/dev/OpenLayers.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 bounds = new OpenLayers.Bounds(
// modify parameters
984018.1663741902,207673.09513056703,
991906.4970533887,219622.53973435296
);

var options = {
controls: [],
maxExtent: bounds,
//modify parameter
maxResolution: 46.67751798353879,
//modify parameter
projection: "EPSG:2908",
//setting zoom levels
numZoomLevels:6,
units: 'm'


};
map = new OpenLayers.Map('map', options);

tiled = new OpenLayers.Layer.WMS(
"wsNYCRoads:nyc_roads - Tiled", "http://localhost:8080/geoserver/wsNYCRoads/wms",
{

 height: '358',
 width: '512',
layers: 'wsNYCRoads:nyc_roads',
styles: '',
srs: 'EPSG:2908',
format: format,
tiled: 'true',
tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
},
{
buffer: 0,
displayOutsideMaxExtent: true
} 
);  



map.addLayer(tiled);                
map.zoomToExtent(bounds);
}
</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>
</html>


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'；
var bounds=新的OpenLayers.bounds(
//修改参数
984018.1663741902,207673.09513056703,
991906.4970533887,219622.53973435296
);
变量选项={
控件：[]，
maxExtent:bounds，
//修改参数
最大分辨率：46.67751798353879，
//修改参数
投影：“EPSG:2908”，
//设置缩放级别
numZoomLevels:6，
单位：m
};
map=newOpenLayers.map（'map'，选项）；
平铺=新OpenLayers.Layer.WMS(
“wsNYCRoads:nyc_道路-瓷砖”http://localhost:8080/geoserver/wsNYCRoads/wms",
{
高度：'358'，
宽度：“512”，
图层：“wsNYCRoads:nyc_roads”，
样式：“”，
srs:‘EPSG:2908’，
格式：格式，
平铺：“真的”，
tilesOrigin:map.maxExtent.left+'，'+map.maxExtent.bottom
},
{
缓冲区：0，
displayOutsideMaxExtent:真
} 
);  
map.addLayer（平铺）；
map.zoomToExtent（边界）；
}
使用Geoserver和MapLayers的地图查看器





位置




-->单击地图以获取要素信息

您的脚本链接不再工作。如果你把它放在浏览器中，你会得到一个404错误。将其替换为以下内容：

<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>

有时候，最好下载一个本地副本并引用它，这样web上的目录更改就不会引起负载问题。

您可以使用控制台日志和inspect element或Firebug来查看在开发时是否存在网络错误。对td_edge：非常感谢您的解释，它解决了我的问题。