eclipse javascript_52North OGC WPS访问javascript接口——wpsjs的使用

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

            
                    
                    

你可能感兴趣的:(eclipse,javascript)