Question

我需要一些帮助。我是Geoserver和WMS概念的新手，我正在寻找非常基本的帮助。我已经下载并安装了Geoserver，设置了图层等（包括sld），但是，我不知道如何从这里获取这些信息到我的网站。正如我所提到的，我是新手，并且不知道我在做什么，我已经尝试在网上寻找一步一步的帮助，但是大多数人只是在你上传和存储你的shapefile之后错过了怎么做或做了什么。的GeoServer。

非常感谢任何帮助或指向正确的信息方向。

由于

史蒂夫

Answer 1

Geoserver可以使用自己的Web服务器（jetty）运行，也可以作为Tomcat的“.war存档”运行。也就是说，要将其部署在您的Web服务器上，您必须在托管您网站的实际计算机上安装该软件（当您的Web服务器已经运行tomcat时，常见的方法是部署.war存档）。 / p>

geoserver的工作是根据WMS协议提供的规范渲染地图图块。要在实际网站中包含这些图块并将其显示为地图，您需要一个客户端应用程序，如OpenLayers，它可以处理整个用户交互。

http://docs.geoserver.org/stable/en/user/installation/war.html

http://geoserver.org/display/GEOSDOC/OpenLayers

Answer 2

我同意relet。轻松启动它，点击Geoserver Web界面中的“预览”按钮（左下角）。在那里，您可以使用openlayers预览图层。在那里看到你的图层后，只需查看页面的HTML + JS代码即可。你可以从那里开始复制和粘贴......

Answer 3

您现在可能已经确定需要将一些OpenLayers / javascript代码添加到您希望地图所在的HTML页面。下面是一个HTML页面，其中包含一些基本的OpenLayers代码，用于向页面添加地图。

要查看/使用的位是，然后是从标签到OpenLayers / javascript。您需要将URL替换为Geoserver以及工作区和图层名称。 bounds和maxResolution设置为英格兰和威尔士，投影设置为英国国家网格，因此您可能需要将这些更改为您感兴趣的区域。

如果你不熟悉javascript，那么一个好的起点是：http://www.w3schools.com/js/default.asp，以及OpenLayers文档。

<?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 &ndash; 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 &ndash; stuff like that.</p>
    </footer>
</div>

Answer 4

我创建了一个测试网页，然后调用了我在该测试页面上使用的图层。

Base = new OpenLayers.Layer.WMS（“CMA Info - Streets”， “http://test.com/geoserver/test/gwc/service/wms”， {layers：“Base_test”，透明：true，格式：“image / gif”，缓冲区：0} 平铺：真实 }

        );
        Base.isBaseLayer = true;
        Base.setOpacity(1);
        Base.setVisibility(true);
        Base.displayOutsideMaxExtent = 0;
        map.addLayers([Base]);
        //map.setOptions(zoomLevel = 19);

Answer 5

将形状文件添加到geoserver时你被提示选择一个工作场所来存储它

之后，转到图层然后点击添加新图层 选择您添加数据的位置并指定SRS，例如EPSG：4326

计算边界框

并点击发布。

然后转到图层预览找到刚刚发布的图层和陈词滥调OPENlayer

Answer 6

因此，当您在Geoserver中配置图层时，它的数据（地图的大多数图像）将使用所谓的URL端点提供给您。它是应用程序请求图像（图块）并为您创建地图的链接。无论你是使用KML，Postfis数据库的Shapefiles，都会这样。服务器负责处理并通过该端点提供可视信息。

对于网络来说，最受欢迎的是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 - ＆gt;这是geoserver服务器的url，它将为您提供切片。 WMS是将数据转换为这些图像的服务。

图层：'地理解决方案：县'， - ＆gt;这通过请求告知geoserver您希望“geiesolutions”工作区中的“Counties”图层。很简单，不是吗？

** styles：'' - ＆gt;在这里，您可以告知我创建的样式的名称。

格式：'image / png' - ＆gt;这个是图像格式（图像/ png或图像/ 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

我希望这有用。 See'ya

Geoserver和WMS

6 个答案: