3-Openlayers加载GeoServer发布的WMS服务

最新推荐文章于 2024-05-22 11:08:28 发布

lovewhoilove

最新推荐文章于 2024-05-22 11:08:28 发布

阅读量1.1k

点赞数 1

分类专栏： OpenLayers 文章标签： javascript

本文链接：https://blog.csdn.net/lovewhoilove/article/details/120654534

版权

OpenLayers 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

首先根据1-借助Node搭建OpenLayers开发环境来搭建一个项目。

1 加载图层组

新建一个index.html，代码如下：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <title>Using OpenLayers with Parcel</title>
    <style>
      @import "node_modules/ol/ol.css";
    </style>
    <style>
      html, body {
        margin: 0;
        height: 100%;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="elm-pep.js"></script>
    <script src="./main.js" type="module"></script>
  </body>
</html>

如下图所示，点击在【Layer Preview】中查看WMS的url参数，关于如何创建图层组，请参考5-借助GeoServer创建图层组一文。
复制?前面的地址即为url的参数。

新建一个main.js文件，代码如下：

import 'ol/ol.css';
import ImageWMS from "ol/source/ImageWMS";
import Map from 'ol/Map';
import View from 'ol/View'
import {Image as ImageLayer} from 'ol/layer';


const layers = [
    new ImageLayer({
        extent: [12620511.818300, 4122531.384400, 12658467.178700, 4145118.878400],//数据范围
        source: new ImageWMS({
            url: 'http://localhost:8080/geoserver/zhengzhou/wms',//WMS服务地址
            params: {
                'LAYERS': 'zhengzhou:zy',//图层参数
            },
            ratio: 1,
            serverType: 'geoserver',//服务类型
            crossOrigin: 'anonymous',//允许跨域
        }),
    }),
];

const map = new Map({
    layers: layers,
    target: 'map',
    view: new View({
        center: [12640484, 4134721],
        zoom: 12,
    }),
});

然后运行npm start命令，访问http://localhost:1234/即可查看发布的图层组，效果图略。

另外，加载多个图层，也可以修改params参数下的LAYERS属性为数组形式，也可以加载多个图层。

params: {
    'LAYERS': [
        'zhengzhou:区县级行政区划',
        'zhengzhou:植被',
        'zhengzhou:建筑物区域',
        'zhengzhou:水系',
        'zhengzhou:商圈',
        'zhengzhou:小区',
        'zhengzhou:地铁站出入口形状',
        'zhengzhou:道路中心线',
        'zhengzhou:城市轨道交通',
        'zhengzhou:铁路',
        'zhengzhou:道路交叉点',
        'zhengzhou:行政地名',
        'zhengzhou:自然地名',
        'zhengzhou:地铁站出入口',
        'zhengzhou:地铁站',
    ],
    'TILED': true
},

2 加载单个图层

修改LAYERS参数为工作区:图层名称即可。

const layers = [
 new TileLayer({
     source: new TileWMS({
         url: 'http://localhost:8080/geoserver/zhengzhou/wms',
         params: {
             'LAYERS': 'zhengzhou:图层名称',//此处替换为单个图层名称即可
             'TILED': true
         },
         //...
     }),
 })
];

3 加载WMS的其他方式

加载WMS总共有3种方式，上面我们采用的是：ol.layer.Image+ol.source.ImageWMS。
另外还有另外两种方式：

ol.layer.Tile+ol.source.TileWMS，并且其与第一种方式的关键参数一致。

import 'ol/ol.css';
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';
import View from 'ol/View';

const layers = [
    new TileLayer({
        extent: [12620511.818300, 4122531.384400, 12658467.178700, 4145118.878400],//数据范围
        source: new TileWMS({
            url: 'http://localhost:8080/geoserver/zhengzhou/wms',//WMS服务地址
            params: {'LAYERS': 'zhengzhou:zy', 'TILED': true},
            serverType: 'geoserver',
            transition: 0,
            crossOrigin: 'anonymous',//允许跨域
        }),
    }),
];

同样采用ol.layer.Tile+ol.source.TileWMS，与上面不同的是，这种方式采用的是512×256的瓦片网格加载，即进一步设置了瓦片网格的信息参数，即实例化的ol.tilegrid.TileGrid网格对象。

import 'ol/ol.css';
import Map from 'ol/Map';
import TileGrid from 'ol/tilegrid/TileGrid';
import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';
import View from 'ol/View';
import {get as getProjection} from 'ol/proj';
import {getWidth} from 'ol/extent';

const projExtent = getProjection('EPSG:3857').getExtent();
const startResolution = getWidth(projExtent) / 256;
const resolutions = new Array(22);
for (let i = 0, ii = resolutions.length; i < ii; ++i) {
    resolutions[i] = startResolution / Math.pow(2, i);
}
const tileGrid = new TileGrid({
    extent: [12620511.818300, 4122531.384400, 12658467.178700, 4145118.878400],
    resolutions: resolutions,
    tileSize: [512, 256],
});

const layers = [
    new TileLayer({
        source: new TileWMS({
            url: 'http://localhost:8080/geoserver/zhengzhou/wms',
            params: {
                'LAYERS': 'zhengzhou:zy',
                'TILED': true
            },
            serverType: 'geoserver',
            tileGrid: tileGrid,
            crossOrigin: 'anonymous',//允许跨域
        }),
    })
];
//...

总结：Image WMS与Tiled WMS的区别是，Tiled WMS的Tiles（即瓦片）可以被缓存，因此浏览器将不会重新获取已经查看过的区域的数据，但可能存在未知瓦片重复标签的问题（原文为：But there may be problems with repeated labels for WMS servers that are not aware of tiles），使用Image WMS则可以避免这一问题。

参考资料

https://openlayers.org/en/latest/examples/wms-image.html
https://openlayers.org/en/latest/examples/wms-tiled.html
https://openlayers.org/en/latest/examples/wms-custom-tilegrid-512x256.html

lovewhoilove

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
3-Openlayers加载GeoServer发布的WMS服务

首先根据1-借助Node搭建OpenLayers开发环境来搭建一个项目。1 加载图层组新建一个index.html，代码如下：<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8"> <title>Using OpenLayers with Parcel</title> <style> @import "no
复制链接

扫一扫