Geoserver的 rest、wfs、wms、wps接口请求指南

前言

时光如白驹过隙,不知不觉间已经干了7年的GIS开发了,一路走来跌跌撞撞的,跟随着时代的洪流行尸走肉般的生存着(此处省略n个字,全是感慨)

一、官方API地址

geoserver官方的api地址还是比较全的,我整理了下放到了下面

  1. 文档地址:传送门
  2. rest接口地址:传送门
  3. wfs服务接口地址:传送门
  4. wms服务接口地址:传送门
  5. wps服务接口地址:传送门

二、请求示例

以wfs查询为例做一个查询的示例

TypeScript 复制代码
/**
 * 图层wfs查询
 * @param {WfsQueryParams} obj 查询条件
 * @returns 图层wfs结果
 */
export function wfsQuery(obj: WfsQueryParams) {
  const { layername, cql, fid, startIndex, maxFeatures } = obj
  const featureRequest: { [key: string]: string | number } = {
    service: "WFS",
    version: "1.0.0",
    request: "GetFeature",
    srsName: "EPSG:4326",
    typename: layername,
    outputFormat: "application/json"
  }
  if (fid) featureRequest.featureId = fid
  if (cql) featureRequest.CQL_FILTER = cql
  if (startIndex != null && startIndex !== undefined) featureRequest.startIndex = startIndex
  if (maxFeatures != null && maxFeatures !== undefined) featureRequest.maxFeatures = maxFeatures
  const params = new URLSearchParams()
  for (const attr in featureRequest) {
    params.append(attr, featureRequest[attr] as any)
  }
  return http.independentGet<WfsQueryResult>(`${MAPSERVER}/ows?${params.toString()}`)
}

在上述代码中封装了一个wfs查询的方法,最下面的请求的http用的是axios

三、geoserver-helper示例

geoserver-helper是专门封装的用于请求geoserver的wfs,mws、wps以及rest接口的帮助类

使用方法如下

1、安装依赖

TypeScript 复制代码
# 安装依赖
npm i geoserver-helper

2、引用依赖

TypeScript 复制代码
// 整体引入依赖
import geoserverHelper from 'geoserver-helper'

// 按需引入依赖
import utils from 'geoserver-helper/utils'
import wfsHelper from 'geoserver-helper/wfs'
import wpsHelper from 'geoserver-helper/wps'
import wmsHelper from 'geoserver-helper/wms'
import restHelper from 'geoserver-helper/rest'

3.使用

TypeScript 复制代码
const restHelperInstance = new restHelper({
    url: "http://localhost:8080/geoserver"
})
const wpsHelper = new geoserverRest.wpsHelper("/geoserver/ows",);
const wfsHelperInstance = new wfsHelper({
  url: "/geoserver/wfs",
  workspace: "test",
});
const wmsHelperInstance = new wmsHelper({
  url: "/geoserver/wms",
  workspace: "test",
});

//查询所有的图层列表
const res = await restHelperInstance.getLayerListApi()
console.log(res.layers)
//查询所有的工作空间列表
const res = await restHelperInstance.getWorkspaceListApi()
console.log(res.workspaces)
//查询所有的样式列表
restHelperInstance.getStylesListApi().then(res => {
  debugger
  console.log(res)
})
//查询单个图层详情
restHelperInstance.getLayerInfoApi("test:xzqh_shi").then(res => {
  debugger
  res.layer
  console.log(res)
})
//查询单个工作空间详情
restHelperInstance.getWorkspaceInfoApi("qhd").then(res => {
  debugger
  console.log(res)
})

const currentLayerModifyInfo: ILayer.LayerModifyInfo = {
  defaultStyle: {
    name: "test:xzqh_shi",
    // name: "polygon",
  },
}
//修改图层信息
restHelperInstance.modifyLayerApi(
  "xzqh_shi",
  currentLayerModifyInfo,
  "test",
).then(res => {
  debugger
}).catch(e => {
  debugger
})
//用post请求要素
wfsHelperInstance.GetFeatureByPost({
  // "workspace": "test", 
  // "workspaceUri": "http://test", 
  "typename": "test:基本农田",
  "startIndex": 0,
  "maxFeatures": 10,
  "cql": "type = '种植非粮食作' AND INTERSECTS (the_geom, MULTIPOLYGON(((119.149559 40.60191,119.1549 40.597565,119.176018 40.609817,119.220772 40.604893。。。))))"
}).then(res => {
  debugger
  console.log(res)
})
//要素查询
wfsHelperInstance.GetFeature({
  propertyname: "name,gb",
  typename: "qhd:xzqh_xian",

}).then(res => {
  debugger
  console.log(res)
})
//获取图层字段描述信息
wfsHelperInstance.DescribeFeatureType({
  typeName: "topp:states",
}).then(res => {
  debugger
  console.log(res)
})
//获取wfs能力集合
wfsHelperInstance.GetCapabilities({
  version: "1.0.0",
}).then(res => {
  debugger
  console.log(res)
})
//获取单属性属性表
wfsHelperInstance.GetPropertyValue({
  typeNames: "topp:states",
  valueReference: "STATE_NAME"
}).then(res => {
  debugger
  console.log(res)
})
//获取wms能量集合
wmsHelperInstance.GetCapabilities({
  version: "1.0.0"
}).then(res => {
  debugger
  console.log(res)
})
//获取要素(多用于点选查询)
wmsHelperInstance.GetFeatureInfo({
  layers: "ellip_visual:1000510942192095232",
  version: "1.1.1",
  bbox: "118.85559,39.47113,119.17419,39.776",
  srs: "EPSG:4326"
}).then(res => {
  debugger
  console.log(res)
})
//获取图例
wmsHelperInstance.GetLegendGraphic({
  layer: "ellip_visual:1000510942192095232",
}).then(res => {
  debugger
  console.log(res)
})
//获取wps能力集
wpsHelper.GetCapabilities().then(res => {
  debugger
  console.log(res)
})
//获取某个算子的详情信息
wpsHelper.DescribeProcess({
  identifier: "JTS:buffer"
}).then(res => {
  debugger
  console.log(res)
})
相关推荐
m0_748255261 分钟前
easyExcel导出大数据量EXCEL文件,前端实现进度条或者遮罩层
前端·excel
web1478621072335 分钟前
C# .Net Web 路由相关配置
前端·c#·.net
m0_7482478035 分钟前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
飞的肖39 分钟前
前端使用 Element Plus架构vue3.0实现图片拖拉拽,后等比压缩,上传到Spring Boot后端
前端·spring boot·架构
青灯文案11 小时前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_748254881 小时前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.1 小时前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营1 小时前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood2 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端2 小时前
0基础学前端-----CSS DAY9
前端·css