谢谢
史蒂夫
http://docs.geoserver.org/stable/en/user/installation/war.html
我同意relet的观点。一个简单的开始是在Geoserver Web界面中点击“预览”按钮(左下角)。在那里,您可以使用openlayers预览图层。一旦您在那里看到了您的图层,只需查看页面的HTML + JS代码。您可以从那里开始复制并粘贴...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="Description" content="Central-Geo">
<title>Map Test Page</title>
<style type="text/css" media="screen">
html, body, div, header, footer, aside, nav, article, section { margin: 0; padding: 0; }
header, footer, aside, nav, article, section { display: block; }
body { color: #333; font: 12px Helvetica, Arial, sans-serif; line-height: 18px; }
h2 { color: #333; }
a { color: #337810; }
p { margin: 0 0 18px; }
#container { width: 760px; margin: 0 auto;}
/* Header */
header { background: #006666; border-bottom: 2px solid #aaa; }
header h1 { color: #fff; margin: 0 0 3px; padding: 24px 18px 0; }
header p { color: #ccc; font-size: 11px; font-weight: bold; padding: 0 18px; }
/* Content Style */
nav { border-bottom: 1px solid #ccc; margin-right: 18px; }
nav ul { padding: 0 18px 9px; }
#extra { margin-left: 18px; }
#extra small { font-size: 11px; line-height: 18px; }
#content { border-bottom: 1px solid #ccc; margin-left: 18px; }
#content p, #extra p { padding-right: 18px; }
/* Content Positioning and Size */
nav { float: right; width: 175px; }
#content { float: left; width: 540px; }
#extra { float: left; width: 540px; } /* Footer */
footer { background: #666; border-bottom: 2px solid #aaa; clear: left; width: 100%; }
footer a { color: #fff; }
footer p { color: #ccc; margin: 0; padding: 0 18px 10px; }
footer ul { border-bottom: 1px solid #999; list-style: none; margin: 0 18px 6px; padding: 10px 0 6px; }
footer li { display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }
.map { height: 400px; width: 100%: margin: 0; padding: 0}
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<header>
<h1>Test Map Page heading</h1>
<p class="description">A test page for a map</p>
</header>
<div id="wrapper">
<section id="content">
<h2>Map Heading Goes Here</h2>
<div id="map" class="map">
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var bounds = new OpenLayers.Bounds(
92599.19919326127, 1484.4293913718284,
695626.1392662271, 670208.9526868482
);
var options = {
maxExtent: bounds,
maxResolution: 1700,
projection: "EPSG:27700",
};
var map = new OpenLayers.Map('map', options);
var wms = new OpenLayers.Layer.WMS(
"Geoserver layers ", "http://urltoyourgeoserver/geoserver/yourworkspace/wms",
{'layers': 'yourlayer',
styles: '',
format:'image/png'});
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</div>
</div>
<nav>
<h2>Navigation Here</h2>
<ul>
<li><a href="">Navigation 1</a></li>
<li><a href="">Navigation 2</a></li>
<li><a href="">Navigation 3</a></li>
<li><a href="">Navigation 4</a></li>
<li><a href="">Navigation 5</a></li>
<li><a href="">Navigation 6</a></li>
</ul>
</nav>
<section id="extra">
<h2>Extra Stuff Goes Here</h2>
<p>Sometimes this would be called a <em>sidebar</em>, but it doesn't always have to be on the side to be called a <em>sidebar</em>. Sidebars can be on tops of things, below things, but they are usually beside things – hence it being a called a sidebar.</p>
<p><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small></p>
</section>
<footer>
<ul>
<li><a href="">Navigation 1</a></li>
<li><a href="">Navigation 2</a></li>
<li><a href="">Navigation 3</a></li>
<li><a href="">Navigation 4</a></li>
<li><a href="">Navigation 5</a></li>
<li><a href="">Navigation 6</a></li>
</ul>
<p>Footer stuff goes here. Copyright, disclaimers – stuff like that.</p>
</footer>
</div>
);
Base.isBaseLayer = true;
Base.setOpacity(1);
Base.setVisibility(true);
Base.displayOutsideMaxExtent = 0;
map.addLayers([Base]);
//map.setOptions(zoomLevel = 19);
因此,当您在Geoserver中配置图层时,它的数据(大多数用于地图的图像)将使用所谓的URL端点提供给您。这是一个链接,应用程序请求图像(瓦片)并为您创建地图的位置。无论您使用KML、Shapefiles还是Postgis数据库,都将是这种方式。服务器会处理它,并通过该端点使可视信息可用。
对于Web而言,最流行的是OpenLayers,它是一个JavaScript库,可以使用简单的HTML作为其环境,为您管理艰难的过程。
我发现它们一起工作的一个很好的例子是here。
请注意我下面突出显示的行:
var ccounties = new OpenLayers.Layer.WMS(
"Counties of Colorado - Untiled",
"http://thisawsomesite.com:8080/geoserver/wms",
{
width: '426',
srs: 'EPSG:4269',
layers: 'geosolutions:Counties',
height: '512',
styles: '',
format:'image/png'**
},
{singleTile: true, ratio: 1}
);
map.addLayer(ccounties);
http://thisawsomesite.com:8080/geoserver/wms -> 这是可提供瓷砖的geoserver服务器的网址。WMS是一项服务,可以将数据转换为图像。
layers: 'geosolutions:Counties', -> 通过请求向geoserver发出指令,表示要获取“geosolutions”工作区中的“Counties”图层。相当简单,不是吗?
**styles: '' -> 在这里,您可以告知我已创建的样式名称。
format:'image/png' -> 这是图像格式(image/png或image/jpeg是最常用的格式,但也有其他格式)。请记住,jpeg通常较小,但在需要透明度设置时,png是更好的选择。
srs是投影方式。我不确定此处是否需要。如果未进行投影,则默认映射投影方式会生效。
如果您不确定如何创建一个OpenLayers应用程序,Geoserver会为您提供您所拥有的图层的示例。在左侧菜单中进入“图层预览”,然后点击“OpenLayers”以查看一个简单的示例。您会注意到,在该链接旁边的菜单中有多个选项可用于检索信息。
您可能会发现其他相关链接有用:
dev.openlayers.org/releases/OpenLayers-2.13.1/examples/getfeatureinfo-control.html dev.openlayers.org/releases/OpenLayers-2.13.1/examples/ dev.openlayers.org/apidocs/files/OpenLayers-js.html
希望这有所帮助。再见
当您将形状文件添加到geoserver时, 您会被提示选择一个工作区来存储它
之后,转到图层 并单击添加新图层 选择您添加数据的位置 并指定SRS,例如EPSG:4326
计算边界框
然后点击发布.
然后打开Layer预览 找到刚发布的层 并点击Openlayer