使用Openlayers加载Geoserver发布的WFS和WCS服务

1、发布WFS和WCS服务

发布WFS服务

Web 要素服务(WFS)

支持对地理要素的插入,更新,删除,检索和发现服务。该服务根据HTTP客户请求返回GML数据。

其基础接口是:GetCapabilities,DescribeFeatureType,GetFeature

  • GetCapabilities同上。
  • DescribeFeatureType返回要素结构,以便客户端进行查询和其他操作。
  • GetFeature可根据查询要求返回一个符合GML规范的数据文档。GetFeature是最重要的接口。

其它接口如Transaction 它不仅能提供要素读取,同时支持要素在线编辑和事务处理。

WFS对应于常见桌面程序中的条件查询功能,WFS通过OGC Filter构造查询条件,支持基于空间几何关系的查询,基于属性域的查询,当然还包括基于空间关系和属性域的共同查询。

在Web上,WFS的请求不是以SQL实现的,而是通过Filter XML来实现,可扩展性更强。WFS所返回的是查询的结果集,从某种程度上说,区别于WMS的数据的表现,WFS的结果集是由完整的Schema定义和约束的结果集,以GML为载体。这个结果集,类似于桌面程序查询结果的数据表。

命名和启用

输入图层名称等基本信息,将图层勾选为启用

image-20230312155722907

配置坐标系和边框

选择坐标系,这里选择的是EPSG: 4326,即WGS84。

image-20230312160316995

下方边框,主要是用于每次初始化加载时,显示的边界范围,即在web页面里面,默认缩放到能够刚好放下本数据的范围。直接点击从数据中读取即可,下面也是点击从数据中计算。

image-20230312160855585

配置shp文件style

style文件主要是对发布出来的文件,进行样式的调整,本次不做详细讲解,只要能使用即可,后续系列文章中可能会做讲解。
上面的步骤完成后返回最上方,点击发布按钮,下方default style 就是本次数据默认的样式,如果有已经配置好的其他style可以选择其他央视,但一般style要与shp文件本身几何特征匹配,例如:polygon特征的要素,只能使用polygon的style文件,同理还有point和line。

image-20230312161117523

配置文件的缓存服务

点击上方Tile caching 按钮,进入文件缓存配置,通过这个配置可以使geoserver开启被动切片,把Tile cache configuration的两个选项勾选上,即可开启被动缓存。

image-20230312161215482

发布完成

点击保存,发布图层,之后会自动跳转至图层管理,这里能够看到我们发布的数据图层,但是浏览需要通过其他位置来浏览。

image-20230312161453751

发布WCS服务

上传栅格数据至Geoserver,并发布WCS服务

Web地理覆盖服务(WCS)

提供的是包含了地理位置信息或属性的空间栅格图层,而不是静态地图的访问。

根据HTTP客户端要求发送相应数据,包括影像,多光谱影像和其它科学数据.

有二个重要操作GetCapabilities,GetCoverage

  • GetCapabilities返回一个描述服务和XML文档,从中可获取覆盖的数据集合。
  • GetCoverage是在GetCapabilities确定查询方案和需要获取的数据之后执行,返回覆盖数据。

还有可选操作DescribeCoverageType。

命名和启用

输入图层名并启用图层

image-20230329210345176

配置坐标系和边框

配置图层的坐标系等信息:

image-20230401150716437

查看图层的波段信息:

image-20230329210500165

发布完成

点击保存,发布图层,之后会自动跳转至图层管理,这里能够看到我们发布的数据图层,但是浏览需要通过其他位置来浏览。

image-20230401150926047

2、在物理机中使用任意支持WCS和WFS客户端访问其中数据

使用OpenLayers访问数据

加载WFS服务

查看api可知,调用wfs有两种方式,一种是采用loader加载,另一种是通过url加载,前者可设置为jsonp的方式可直接解决跨域的问题,后一种需要在服务器端设置跨域。这里选择第一种方式加载WFS服务。

2023432317_4

HTML代码

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>WFS - GetFeature</title>
  <link rel="stylesheet" href="node_modules/ol/ol.css">
  <style>
    .map {
      width: 100%;
      height: 400px;
    }
  </style>
</head>

<body>
  <div id="map" class="map"></div>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://cdn.jsdelivr.net/npm/elm-pep@1.0.6/dist/elm-pep.js"></script>
  <script type="module" src="main.js"></script>
</body>

</html>
复制代码

js代码

  

调用WFS服务结果

image-20230402235350320

加载WCS服务

openlayer调用wcs服务是通过wms来实现的。

image-20230402211134993

HTML代码

复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Single Image WMS</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
    <script src="https://cdn.jsdelivr.net/npm/elm-pep@1.0.6/dist/elm-pep.js"></script>
    <script type="module" src="main.js"></script>
  </body>
</html>
复制代码

js代码

复制代码
import ImageWMS from 'ol/source/ImageWMS.js';
import Map from 'ol/Map.js';
import Projection from 'ol/proj/Projection.js';
import View from 'ol/View.js';
import {Image as ImageLayer} from 'ol/layer.js';
import {getCenter} from 'ol/extent';

const layers = [
  new ImageLayer({
    extent: [
      398708.62925706623, 3462872.5714283627, 497798.62925706623,
      3525422.5714283627,
    ],
    source: new ImageWMS({
      url: 'http://8.130.73.89:8080/geoserver/tjl_webgis/wms',
      params: {
        'LAYERS': 'tjl_webgis:tdly_2015',
        'ratio': 1,
        'serverType': 'geoserver',
        'exceptions': 'application/vnd.ogc.se_inimage',
        'FORMAT': 'image/png',
        'VERSION': '1.1.0',
      },
    }),
  }),
];
const projection = new Projection({
  code: 'EPSG:32649',
  extent: [
    398708.62925706623, 3462872.5714283627, 497798.62925706623,
    3525422.5714283627,
  ],
});

const extent = [
  398708.62925706623, 3462872.5714283627, 497798.62925706623,
  3525422.5714283627,
];
const map = new Map({
  layers: layers,
  target: 'map',
  view: new View({
    projection: projection,
    center: getCenter(extent),
    zoom: 4,
  }),
});
复制代码

调用WCS服务结果

image-20230402164941301

posted @   南珂丶一梦  阅读(572)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!

喜欢请打赏

扫描二维码打赏

了解更多

点击右上角即可分享
微信分享提示