用于前端请求 geoserver 的 OGC 服务包括 rest 接口、wfs 接口、wms 接口、wps 接口等,http 请求采用原生的 js 的 fetch 方法,同时简化了 geoserver 原始请求方式,调用更加简单,方便。
以 geoserver 为地图服务的 webgis 开发者
# 1.创建入口
npm create vite
# 2.按照指引安装依赖(如果电脑上以前没有安装create-vite的话,此项目是用的create-vite@5.5.1)以及设置项目名称(Project name:)
# 3.不要选择开发框架而是选择Others(Select a framework: » Others)
# 4.选择预配置变体,其实就是默认生成哪种配置(Select a variant: » create-vite-extra)
# 5.选择模板为工具库(Select a template: » library)
# 5.选择预配置语言变量(Select a variant: » TypeScript)
├─dist 打包后的文件目录
├─lib 代码库
│ ├─interface 接口
│ ├─config 配置文件
│ └─utils 工具
├─public 普通前端的 public 用于预览和测试
└─src 普通前端的 src 用于预览和测试
git clone https://github.com/DLinser/geoserver-helper.git
npm i / pnpm i
npm run dev
npm run build
# 测试的geoserver地址可能要做一下变更
npm run test
npm run link
pnpm link --global
npm link geoserver-helper
pnpm link --global geoserver-helper
npm run unlink
pnpm unlink geoserver-helper
# 安装依赖
npm i geoserver-helper
// 整体引入依赖
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";
//对象转Query字符串
const aa = utils.common.formateObjToParamStr({
name: "zhangsan",
});
//查询所有的图层列表
const restHelperInstance = new restHelper({
url: "http://localhost:8080/geoserver",
});
//查询所有的图层列表
const res = await restHelperInstance.getLayerListApi();
console.log(res.layers);
//查询所有的工作空间列表
const res = await restHelperInstance.getWorkspaceListApi();
console.log(res.workspaces);
// 整体引入依赖
import geoserverHelper from "geoserver-helper";
// 按需引入依赖
import utils from "geoserver-helper/dist/utils";
import wfsHelper from "geoserver-helper/dist/wfs";
import wpsHelper from "geoserver-helper/dist/wps";
import wmsHelper from "geoserver-helper/dist/wms";