地理服务器和 WMS答案

【问题标题】：Geoserver and WMS地理服务器和 WMS
【发布时间】：2010-08-03 16:52:56
【问题描述】：

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

任何帮助或指出正确的信息方向将不胜感激。

谢谢

史蒂夫

【问题讨论】：

标签： geoserver wms

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

要查看/使用的位是，然后是标签中的 OpenLayers/javascript。您需要将 URL 替换为 Geoserver 以及工作空间和图层名称。 bounds 和 maxResolution 设置为 England 和 Wales，projection 设置为 British National Grid，因此您可能需要将这些更改为您感兴趣的区域。

如果您不熟悉 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>

【讨论】：

【解决方案4】：

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

Base = new OpenLayers.Layer.WMS("CMA 信息 - 街道", "http://test.com/geoserver/test/gwc/service/wms", {图层：“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);

【讨论】：

【解决方案5】：

当您将形状文件添加到地理服务器时系统提示您选择存储它的工作场所

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

公司计算　这个　Ｂｏｕｎｄｉｎｇ　Ｂｏｘ

和　licick　出版。

Ｔｈｅｎｇｏ　去　　LayerPreview 发现　　层　　你ｊ坚持出版和

【讨论】：

【解决方案6】：

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

对于网络来说，最流行的是 OpenLayers，witch 是一个 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 -> 这是地理服务器服务器的 URL，它将为您提供图块。 WMS 是将数据转换为这些图像的服务。

layers: 'geosolutions:Counties', -> 这通过请求通知地理服务器，您需要来自“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

我希望这会有所帮助。再见

【讨论】：