OpenLayers加载WMS

最新推荐文章于 2024-08-11 16:38:35 发布

自己的九又四分之三站台

最新推荐文章于 2024-08-11 16:38:35 发布

阅读量3.7k

点赞数 2

分类专栏： # 其他开源GIS

本文链接：https://blog.csdn.net/a13407142317/article/details/119896892

版权

其他开源GIS 专栏收录该内容

59 篇文章 37 订阅

订阅专栏

本文记录使用OpenLayers加载WMS数据，WMS数据为ArcGIS Server 和 GeoServer 发布的数据

1. 发布数据

1.1. ArcGIS Server 发布 WMS数据

关于如何安装ArcGIS Server 请自行百度，本文中ArcGIS Desktop和ArcGIS Server 都是ArcGIS 10.2.2版本

发布过程请借鉴： https://zhuanlan.zhihu.com/p/101493415

1.2. GeoServer 发布 WMS数据

关于如何安装GeoServer 也请自行百度，本文中GeoServer使用的是GeoServer 2.15.0版本

发布过程请借鉴： https://blog.csdn.net/sinat_28797501/article/details/69668701

2. OpenLayers 加载WMS

2.1. 加载ArcGIS WMS服务

OpenLayer版本为OpenLayer4.3.1

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="C:\openlayers\v4.3.1\css\ol.css" type="text/css">
    <style>
       html,body,#map{
            width: 100%;
            height: 600px;
            border: 0ch;
            background-color:#151515
        }
    </style>
    <script src="C:\openlayers\v4.3.1\build\ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">

      var map;
      function initArcGISServerMap() {
            var format = 'image/png';
            var projection = new ol.proj.Projection({
                code: 'EPSG:4529',
                units: 'm',
                axisOrientation: 'neu',
                global: false
            });
            var arcgiswmschina = new ol.layer.Image({
                source: new ol.source.ImageWMS({
                    ratio: 1,
                    url: 'http://192.9.10.250:6080/arcgis/services/行政区地类图斑/MapServer/WmsServer?',                    
                    params: {
                        'FORMAT': format,
                        'VERSION': '1.3.0',
                        STYLES: '',
                        LAYERS: '0,1',
                    }
                })
            });
            map = new ol.Map({
                target: 'map',
                layers: [
                    arcgiswmschina,
                ],
                view: new ol.View({
                    projection: projection
                })
            });
            var bounds = [4.13984774067E7, 4120788.8176000006,
            4.14474402153E7, 4160585.149700001];
            map.getView().fit(bounds, map.getSize());
        };

        initArcGISServerMap();
    </script>
  </body>
</html>

信息获取方式

http://192.9.10.250:6080/arcgis/services/%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%9C%B0%E7%B1%BB%E5%9B%BE%E6%96%91/MapServer/WMSServer?service=wms&request=getcapabilities

在这里插入图片描述

2.2. 加载GeoServer WMS服务

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="C:\openlayers\v4.3.1\css\ol.css" type="text/css">
    <style>
       html,body,#map{
            width: 100%;
            height: 600px;
            border: 0ch
        }
    </style>
    <script src="C:\openlayers\v4.3.1\build\ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">

      var map;
      function initGeoServerMap() {
        var wmsSource = new ol.source.ImageWMS({
            url: 'http://192.9.10.250:8086/geoserver/cite/wms',
            params: {
                'FORMAT': 'image/png',
                'VERSION':'1.1.0',
                LAYERS: 'cite:DLTB',
                styles: '',  
                srs: 'EPSG:4529',  
                tiled: 'true',  
            }
        });

        var wmsLayer = new ol.layer.Image({
            source: wmsSource
        });

        var projection = new ol.proj.Projection({
            code: 'EPSG:4529',
            units: 'm',
            axisOrientation: 'neu',
            global: false
        });

        var map = new ol.Map({
            layers: [wmsLayer],
            target: 'map',
            view: new ol.View({
                projection: projection
            })
        });

        var bounds = [4.13984774067E7, 4120788.8176000006,
            4.14474402153E7, 4160585.149700001];
        map.getView().fit(bounds, map.getSize());
    }
        
    initGeoServerMap();
    </script>
  </body>
</html>
53E7, 4160585.149700001];
        map.getView().fit(bounds, map.getSize());
    }
        
    initGeoServerMap();
    </script>
  </body>
</html>

自己的九又四分之三站台

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
3
评论
OpenLayers加载WMS

本文记录使用OpenLayers加载WMS数据，WMS数据为ArcGIS Server 和 GeoServer 发布的数据1. 发布数据1.1. ArcGIS Server 发布 WMS数据关于如何安装ArcGIS Server 请自行百度，本文中ArcGIS Desktop和ArcGIS Server 都是ArcGIS 10.2.2版本发布过程请借鉴： https://zhuanlan.zhihu.com/p/1014934151.2. GeoServer 发布 WMS数据关于如何安装GeoS
复制链接

扫一扫