Openlayers下载与加载geoserver的wms服务显示地图

╰+哭是因爲堅強的太久メ 2022-11-05 00:53 209阅读 0赞

# 场景 #

GeoServer简介、下载、配置启动、发布shapefile全流程(图文实践)：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/109636080][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_109636080]

在上面介绍了geoserver的使用后，怎样通过Openlayers在html中显示地图。

## Openlayers ##

OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。

OpenLayers是一个开源的项目，其设计之意是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，并具有灵活的扩展机制。

OpenLayers 可以用于开发各类桌面和移动端的WEGIS系统，包括地图显示和地图编辑功能。其最终的开发目标是能够在各种设备和浏览器中显示和管理地图数据。

OpenLayers是一个专为WcbGIS客户端开发提供的JavaScript类库包，用于实现地图数据的网络访问。它访问地理空间数据的方法都符合行业标准，支持各种公开的和私有的数据标  
准和资源。OpenLayers采用纯面向对象的JavaScript方式开发，同时借用了Prototype框架和Rico库的一些组件。

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

# 实现 #

## Openlayers官网 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

点击右上角的Code-Download进入下载页面

[https://openlayers.org/download/\#][https_openlayers.org_download]

选择dist版本进行下载

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

下载之后的内容中有相关的css文件和js文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

然后按照上面的博客启动Geoserver并登陆

然后在Layer Preview中选择一个自带的示例的，这里以Spearfish roads为例，点击其后面的Openlayers按钮

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][]

然后会进入地图的预览页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4][]

接下来就是怎样使用Openlayers在html中进行显示这个地图。

新建一个文件夹，文件夹下新建lib,lib下新建ol65目录，并将上面下载的dist中的内容复制进来

然后再建立一个map.html文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 5][]

然后在map.html中引入上面lib目录下的css和js文件

然后在body中新增一个div并设置其样式

<divid = "map"></div>
    
        <style>
            html,
            body,
            #map {
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
    
        </style>

然后找到上面geoserver中预览的页面，右键选择查看网页源代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 6][]

然后从网页源代码中抽离出用来显示地图的js代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 7][]

然后再对其进行修改

注意上面的url其实就是预览地址栏中的前面的部分

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 8][]

然后LAYERS是要和你geoserver中LayersPreview的Name属性对应

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 9][]

完整的map.html示例代码、

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>OpenLayers example</title>
        <link rel="stylesheet" href="lib/ol65/ol.css" type="text/css">
        <style>
            html,
            body,
            #map {
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    
    <body>
        <div id="map"></div>
        <script type="text/javascript" src="lib/ol65/ol.js"></script>
        <script type="text/javascript">
            var untiled = new ol.layer.Image({
                source: new ol.source.ImageWMS({
                    ratio: 1,
                    url: 'http://localhost:8000/geoserver/sf/wms',
                    params: {
                        'FORMAT': "image/jpeg",
                        'VERSION': '1.1.1',
                        "STYLES": '',
                        "LAYERS": 'sf:roads',
                        "exceptions": 'application/vnd.ogc.se_inimage',
                    }
                })
            });
            var projection = new ol.proj.Projection({
                code: 'EPSG:26713',
                units: 'm',
                global: false
            });
            var map = new ol.Map({
                controls: ol.control.defaults({
                    attribution: false
                }).extend([]),
                target: 'map',
                layers: [
                    untiled,
                ],
                view: new ol.View({
                    projection: projection,
                })
            });
            var bounds = [589434.8564686741, 4914006.337837095,
                609527.2102150217, 4928063.398014731
            ];
            map.getView().fit(bounds, map.getSize());
        </script>
    </body>
    
    </html>

然后在浏览器中打开map.html，查看效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 10][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_109636080]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/109636080
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: /images/20221023/0da267fa821149078d351926c8b95e7f.png
[https_openlayers.org_download]: https://openlayers.org/download/#
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: /images/20221023/7325937bd6a84c76a172170d648d4eec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: /images/20221023/c3b5506f7bf84642a92c6e8fef91c016.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: /images/20221023/adab7a8f82164281928fe69cd74cb17b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4]: /images/20221023/3c0fb02fc68d4149b1de62f40e0dd019.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 5]: /images/20221023/b85ea13fc70342af90d0db19afcaa487.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 6]: /images/20221023/07d2a6160c554eaab85cb0d804c70bd1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 7]: /images/20221023/be0f3a5f072547ebbdfc5ae9dc1487a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 8]: /images/20221023/ce1a1b6a74b24fa2ac3f2e9a6036261c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 9]: /images/20221023/f0ff41e5778444f5830d38a7ed4150bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 10]: /images/20221023/9ba6447777c8474dae41210e093e8ad3.png