使用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代码

import Map from 'ol/Map.js';
import VectorSource from 'ol/source/Vector.js';
import View from 'ol/View.js';
import {Circle as CircleStyle, Fill, Style} from 'ol/style.js';
import {GeoJSON, WFS} from 'ol/format.js';
import {Vector as VectorLayer} from 'ol/layer.js';
import {getCenter} from 'ol/extent';

const vectorSource = new VectorSource();
const vector = new VectorLayer({
  source: vectorSource,
  style: new Style({
    image: new CircleStyle({
      radius: 5,
      fill: new Fill({
        color: 'orange',
      }),
    }),
  }),
});

const extent = [109.6475, 29.495, 115.9675, 33];
const map = new Map({
  layers: [vector],
  target: document.getElementById('map'),
  view: new View({
    extent: extent,
    projection: 'EPSG:4326',
    center: getCenter(extent),
    maxZoom: 19,
    zoom: 12,
  }),
});

// generate a GetFeature request
const featureRequest = new WFS().writeGetFeature({
  srcName: 'EPSG:4326',
  featureNS: 'http://8.130.73.89:8080/geoserver/tjl_webgis/wfs',
  featureTypes: ['tjl_webgis:point'],
  outputFormat: 'application/json',
});

// then post the request and add the received features to a layer
fetch('http://8.130.73.89:8080/geoserver/tjl_webgis/wfs', {
  method: 'POST',
  body: new XMLSerializer().serializeToString(featureRequest),
})
  .then(function (response) {
    return response.json();
  })
  .then(function (json) {
    const features = new GeoJSON().readFeatures(json);
    vectorSource.addFeatures(features);
    map.getView().fit(vectorSource.getExtent());
  });

　　

调用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 @ 2024-08-23 14:48  南珂丶一梦  阅读(585)  评论(0)  编辑  收藏  举报