geoserver - 地理服务器和 WMS

Question

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

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

谢谢

史蒂夫

score 5 · Accepted Answer

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

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

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

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

您现在可能已经确定需要将一些 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>

score 0 · Accepted Answer

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

Base = new OpenLayers.Layer.WMS("CMA Info - Streets", " http://test.com/geoserver/test/gwc/service/wms ", {layers: "Base_test", transparent: true, format: "图像/gif"，缓冲区：0 } 平铺：真 }

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

score 0 · Accepted Answer

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

之后，进入Layer 并点击add new layer 选择你添加数据的地方并指定SRS，例如EPSG：４３２６

计算 BOUNDING BOX</p>

并点击出版。

去层层预览找到层层你ｊ刚刚发布并点击了层层审查</p>

score 0 · Accepted Answer

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

对于 web，最流行的是 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 是将数据转换为这些图像的服务。

图层：'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

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

geoserver - 地理服务器和 WMS

6 回答 6

Related

Reference