地理服务器和 WMS

发布于 2024-09-12 11:56:58 字数 235 浏览 7 评论 0原文

我需要一些帮助。我对 Geoserver 和 WMS 的概念很陌生，我正在寻找非常基本的帮助。我已经下载并安装了 Geoserver，设置了图层等（包括 sld），但是，我不知道如何从这里获取这些信息到我的网站。正如我所提到的，我对此很陌生，不知道自己在做什么，我尝试在网上搜索一步一步的帮助，但最简单的是错过了一旦您将形状文件上传并存储在地理服务器。

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

谢谢

史蒂夫

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我是男神闪亮亮 2024-09-19 11:56:58

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

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

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

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

回复收藏 0 原文

动听の歌 2024-09-19 11:56:58

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

回复收藏 0 原文

丑丑阿 2024-09-19 11:56:58

您现在可能已经确定需要将一些 OpenLayers/javascript 代码添加到您想要放置地图的 HTML 页面中。下面是一个 HTML 页面，其中包含一些基本的 OpenLayers 代码，可将地图添加到该页面。

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

如果您不熟悉 javascript，那么一个好的起点是：http://www.w3schools.com/js/default.asp" 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 – 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>

You've probably established by now that you need to add some OpenLayers/javascript code to the HTML page where you want your map to be. Below is an HTML page with some basic OpenLayers code that adds a map to the page.

The bit to look at/use is and then the OpenLayers/javascript from the to the tag. You need to substitute the URL to your Geoserver as well as the workspace and layer name. The bounds and maxResolution are set to England and Wales and the projection is set to British National Grid, so you may need to change these to your area of interest.

If you're not familier with javascript, then a good place to start is: http://www.w3schools.com/js/default.asp, as well as the OpenLayers documentation.

<?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>

回复收藏 0 原文

没企图 2024-09-19 11:56:58

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

Base = new OpenLayers.Layer.WMS("CMA 信息 - 街道",
“http://test.com/geoserver/test/gwc/service/wms”,
{图层：“Base_test”，透明：true，格式：“图像/gif”，缓冲区：0 }
平铺：真
}

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

I created a test webpage and then called the layers that i'm using on that test page.

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 原文

思慕 2024-09-19 11:56:58

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

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

计算Ｂounding Ｂbox

，然后单击 Publish。

然后转到层预览
找到您刚刚发布的图层
然后单击打开图层

回复收藏 0 原文

尘世孤行 2024-09-19 11:56:58

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

对于网络来说，最流行的是 OpenLayers，它是一个 Javascript 库，可以使用简单的 HTML 作为环境，为您管理硬流程。

我发现他们一起工作的一个很好的例子是这里。

请注意我在下面突出显示的行：

 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 服务器的 url。 WMS 是将数据转换为这些图像的服务。

图层：'geosolutions：县'， ->这通过请求通知地理服务器您需要来自“geosolutions”工作区的“Counties”图层。很简单，不是吗？

**样式：'' ->在这里您告知我创建的样式的名称。

格式：'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

我希望这对您有所帮助。再见

So, when you configure a layer in Geoserver it's data (most images for the map) are served to you using what's called URL endpoint. It's a link for where the application requests the images (tiles) and creates the map for you. It will be this way, no matter if you are using KML, Shapefiles of Postgis database. The server takes care of it and make the visual information available via that endpoint.

For the web, the most popular is the OpenLayers, witch is a Javascript library that can manage the hard process for you, using simple HTML as it's enviroment.

A good example I've found of them working together is here.

Note the lines I'm hightlighting bellow:

 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 -> this is the url of the geoserver server that will give you the tiles. WMS is the service that transforms data into those images.

layers: 'geosolutions:Counties', -> this informs to geoserver, via the request, that you want the "Counties" layer, from the "geosolutions" workspace. Pretty simple, isn't it?

**styles: '' -> here you inform the name of the style I've created.

format:'image/png' -> This one is the image format (image/png or image/jpeg are the most used, but there are more). Just remember that jpeg is usually smaller, but png is the option for when you need transparency/opacity settings.

srs is the projection. I don't remember of it's need here. The default map projection should take place if this is left.

If you are unsure of how to create an OpenLayers application, Geoserver gives you an example of the layers you have. Go to Layer Preview, in the left menu and click "OpenLayers" to see a simple example. You will notice that there are multiple options to retrieve the information in the menu right beside that link.