logo标签列表

Geoserver和WMS

geoserverwms
3
我需要一些帮助。我对Geoserver和WMS的概念很陌生，所以我需要非常基础的帮助。我已经下载并安装了Geoserver，设置了图层等（包括sld），但是我不知道如何将这些信息传输到我的网站上。正如我所提到的，我是新手，不知道该怎么做，我尝试在网上搜索逐步帮助，但大多数都漏掉了上传和存储在Geoserver上的shapefiles后该如何做。任何帮助或指向正确信息方向的指点都将不胜感激。
谢谢
史蒂夫
6个回答
5
Geoserver可以使用自己的Web服务器（Jetty）运行，也可以作为Tomcat的“.war归档文件”运行。也就是说，要在您的Web服务器上部署它，您必须在托管您的网站的实际机器上安装该软件（通常的方法是在Web服务器已经运行Tomcat时部署.war归档文件）。
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代码。您可以从那里开始复制并粘贴...

1
您可能已经了解到，需要在想要显示地图的HTML页面中添加一些OpenLayers/javascript代码。下面是一个包含基本OpenLayers代码并将地图添加到页面的HTML页面示例。
需要查看/使用的部分是从````标签之间的OpenLayers/javascript代码。您需要替换您的Geoserver的URL以及工作区和图层名称。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>

0
我创建了一个测试网页，然后调用了我在该测试页面上使用的图层。
Base = new OpenLayers.Layer.WMS("CMA Info - Streets", "http://test.com/geoserver/test/gwc/service/wms", {layers: "Base_test", transparent: true, format: "image/gif", buffer: 0 } tiled: true }
        );
        Base.isBaseLayer = true;
        Base.setOpacity(1);
        Base.setVisibility(true);
        Base.displayOutsideMaxExtent = 0;
        map.addLayers([Base]);
        //map.setOptions(zoomLevel = 19);
0

因此，当您在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

希望这有所帮助。再见

0

当您将形状文件添加到geoserver时， 您会被提示选择一个工作区来存储它

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

计算边界框

然后点击发布.

然后打开Layer预览 找到刚发布的层 并点击Openlayer

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接