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

最新推荐文章于 2024-06-17 10:19:03 发布

霸道流氓气质

最新推荐文章于 2024-06-17 10:19:03 发布

阅读量4.6k

点赞数 11

分类专栏： GIS相关文章标签： Openlayers

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114320531

版权

GIS相关专栏收录该内容

130 篇文章 49 订阅

订阅专栏

场景

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

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
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

Openlayers官网

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

https://openlayers.org/download/#

选择dist版本进行下载

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

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

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

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

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

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

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

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

<link rel="stylesheet" href="lib/ol65/ol.css" type="text/css">

 <script type="text/javascript" src="lib/ol65/ol.js"></script>

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

<divid = "map"></div>

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

    </style>

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

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

然后再对其进行修改

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

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

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

完整的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，查看效果

霸道流氓气质

关注

11
点赞
踩
40

收藏

觉得还不错? 一键收藏
打赏
1
评论
Openlayers下载与加载geoserver的wms服务显示地图

场景GeoServer简介、下载、配置启动、发布shapefile全流程(图文实践)：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/109636080在上面介绍了geoserver的使用后，怎样通过Openlayers在html中显示地图。OpenlayersOpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。OpenLayers是一个开
复制链接

扫一扫