52°North还提供了对OGC WPS进行访问的javascript接口，该接口提供了在前端对wps服务进行操作的许多接口，详细信息在这里：
https://wiki.52north.org/Geoprocessing/Wps-js下面介绍该接口的读取操作。
(1)下载wps-js项目
下面介绍如何使用git在github上下载该项目文件。
首先到
https://git-scm.com/download/win这里下载git，进行安装，
安装完成后，打开Git CMD，或者打开任意一个cmd命令行窗口。
输入：
git clone https://github.com/52North/wps-js.git d:\wpstest打回车，git便开始从github上下载wps-js项目文件，并在D盘创建wpstest文件夹，保存在里面。
其中git地址是wps-js在github上的地址中找到的。首先找到wps-js在github上的地址：
https://github.com/52North/wps-js在其页面右方有个绿色的按钮：
点击该按钮，出现
点击地址右边的图标按钮，即可将地址复制到内存剪贴板中。在Git CMD命令行中输入：
git clone ，注意后面加个空格，然后在空格后面的位置点右键，即可将git地址粘贴上，然后输入你要保存的文件夹，例如这里是d:\wpstest。注意这个文件夹不要是已经存在的。
打回车，git便开始clone项目到你的文件夹，结果如下图。
(2)打包wps-js
下载下来的是源码，还需要对其进行处理，打包成直接可以用的js文件。
依次输入下列命令，将当前目录切换到你的文件夹，例如这里是d:\wpstest，然后开始下载wps-js相关的依赖包。
下载完成后，输入grunt，开始构建wps-js接口：
grunt构建完毕后会在文件夹内创建一个dist目录，里面包含了构建成功的js文件
其中的wps-js-all.min.js就是需要的wps-js开发接口文件，还有一个example.html示例文件。
这个wps-js-all.min.js文件就可以使用了。
(3)使用wps-js-all.min.js
跟上次做openlayer的热力图类似，使用新版本openlayer的开发方式。上次已经把nodejs等安装好了，现在直接使用。
新建一个文件夹，用于开发wps调用的功能。这里新建了一个d:\wpsjs文件夹，在命令窗口中将当前目录切换到d:\wpsjs，
cd d:\wpsjs打回车，之后输入:
npm init进行初始化，可以根据自己的实际情况填写信息，也可以都直接打回车，使用默认信息。之后nodejs在该目录下创建package.json文件。
{ "name": "wpsjs", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "parcel index.html", "build": "parcel build --public-url . index.html" }, "repository": { "type": "git", "url": "git+https://github.com/52North/wps-js.git" }, "author": "", "license": "ISC", "bugs": { "url": "https://github.com/52North/wps-js/issues" }, "homepage": "https://github.com/52North/wps-js#readme", "devDependencies": { "parcel-bundler": "^1.12.4" }, "dependencies": { "jquery": "^3.5.1" }}其中第8、9行粘贴过去。
然后安装打包用到的工具parcel，
npm install --save-dev parcel-bundler在wpsjs目录下面创建一个index.html，内容如下：
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://localhost:1234/wps-js-all.min.js">script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">script> <title>wps调用title>head><body> <div> <h3> 能力文档 h3> <div> <textarea rows="20" cols="100" id="capabilitiesText">空textarea> div> div> <div> <h3> Process描述 h3> <div> <select id="processes"> <option>选择Processoption> select> div> <div> <textarea rows="20" cols="100" id="processDescriptionText">空textarea> div> div>body><script src="./index.js">script>html>再创建一个index.js，内容如下：
var wpsUrl = 'http://localhost:8080/geoserver/ows';var wps = new WpsService({url : wpsUrl, version : "1.0.0"});var capabilitiesCallback = function (response) { var capabilities = response; var processes = response.capabilities.processes; var _select = $(''); $.each(processes, function (index, process) { _select.append( $('').val(process.identifier).html(process.identifier) ); }); $('#processes').append(_select.html()); $('#processes_execute').append(_select.html()); var capabilitiesDocument = capabilities.responseDocument; $("textarea#capabilitiesText").val((new XMLSerializer()).serializeToString(capabilitiesDocument));};var describeProcessCallback = function(response) { var processDescription = response; var processDocument = processDescription.responseDocument; $("textarea#processDescriptionText").val((new XMLSerializer()).serializeToString(processDocument));};$("#processes").change(function() { var processId = $('#processes option:selected').text(); if(! processId.startsWith("选择")) wps.describeProcess_GET(describeProcessCallback, processId);});$(document).ready(function() { wps.getCapabilities_GET(capabilitiesCallback);});创建完文件后，在命令行中输入：
npm start启动nodejs，将前面构建的wps-js-all.min.js文件拷贝至新生成的dist文件夹中。然后在浏览器中输入：
http://localhost:1234
打回车，就会看到对地址为:
http://localhost:8080/geoserver/ows的wps的能力文档和描述文档的解析。前提是你得先把你的GeoServer启动起来。
对于index.html中引入的js：
<script src="http://localhost:1234/wps-js-all.min.js">script>可以在后面使用
npm run build构建本项目后，修改为wps-js-all.min.js的实际位置，例如：
./js/wps-js-all.min.js
(4)解决GeoServer的跨域问题
在前端调用GeoServer的服务会出现跨域访问的问题，导致用上面的代码调用wps服务的时候无法获取到capabilities能力文档。查看浏览器的控制台，会出现如下错误：
这是由于跨域访问的问题，需要解决这个问题。
增加跨域访问的依赖包jetty-servlets
现在这个包的最新版本是9.4.30.v20200611，只下载jetty-servlets.jar是不够的，还有其他几个，但是不知道还有哪几个怎么办？可以让maven帮我们下载。
在Eclipse中新建一个Maven工程，在pom.xml中增加以下依赖：
<dependency> <groupId>org.eclipse.jettygroupId> <artifactId>jetty-servletsartifactId> <version>9.4.30.v20200611version> dependency>保存后，Maven自动下载jetty-servlets及其相关包，等下载完成后便会在项目的Maven Dependencies文件夹中看到这几个依赖包，将鼠标放在这几个依赖包上，可以看到其存放的Maven库的位置，下面是我的maven库的存放位置：
C:\Users\username\.m2\repository\org\eclipse\jetty\jetty-servlets\9.4.30.v20200611\jetty-servlets-9.4.30.v20200611.jar C:\Users\username\.m2\repository\org\eclipse\jetty\jetty-continuation\9.4.30.v20200611\jetty-continuation-9.4.30.v20200611.jar C:\Users\username\.m2\repository\org\eclipse\jetty\jetty-http\9.4.30.v20200611\jetty-http-9.4.30.v20200611.jar C:\Users\username\.m2\repository\org\eclipse\jetty\jetty-util\9.4.30.v20200611\jetty-util-9.4.30.v20200611.jar C:\Users\username\.m2\repository\org\eclipse\jetty\jetty-io\9.4.30.v20200611\jetty-io-9.4.30.v20200611.jar将其从所在的文件夹中拷贝出来，总共5个文件，粘贴到GeoServer的geoserver\WEB-INF\lib里面。
修改跨域配置文件
在geoserver\WEB-INF中找到web.xml，将其打开，大概在第171行找到被注释掉的下面内容：
<filter> <filter-name>cross-originfilter-name> <filter-class>org.eclipse.jetty.servlets.CrossOriginFilterfilter-class> <init-param> <param-name>chainPreflightparam-name> <param-value>falseparam-value> init-param> <init-param> <param-name>allowedOriginsparam-name> <param-value>*param-value> init-param> <init-param> <param-name>allowedMethodsparam-name> <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONSparam-value> init-param> <init-param> <param-name>allowedHeadersparam-name> <param-value>*param-value> init-param> filter>将其解除注释，并在其后面增加：
<filter-mapping> <filter-name>cross-originfilter-name> <url-pattern>/*url-pattern> filter-mapping>保存该文件。
然后启动起tomcat来，现在GeoServer就可以跨域访问了。
3458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
