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,内容如下: