192 lines
7.2 KiB
Markdown
192 lines
7.2 KiB
Markdown
---
|
||
title: WMSLayer
|
||
date: 2020-03-24
|
||
author: ac
|
||
tags:
|
||
- WMSLayer
|
||
- ArcGIS for JS
|
||
categories:
|
||
- GIS
|
||
---
|
||
|
||
> ArcGIS for Javascript中使用 WMSLayer 加载OGC的WMS服务。
|
||
|
||
<!-- more -->
|
||
|
||
## 1. 简介
|
||
|
||
[WMSLayer](https://developers.arcgis.com/javascript/3/jsapi/wmslayer-amd.html#wmslayer1) 是用来加载OGC标准的WMS服务的类。如果第一个加载到map的图层是WMS服务，则map的空间参考将使用该图层的空间参考。加载一个WMSLayer实例，默认行为会发送该服务的GetCapabilities 请求，查看服务提供的功能接口，但需要使用代理。可以使用另一种方法加载WMSLayer图层而不发送GetCapabilities 请求，通过构建resourceInfo 参数对象。即WMSLayer加载WMS服务有两种方式：
|
||
|
||
1. 直接给WMS服务所在的URL地址，但需要配置代理；
|
||
2. 在构造器中使用resourceInfo对象，在其layerInfos参数中配置WMS服务的图层信息。
|
||
|
||
## 2. 图层加载
|
||
|
||
### 2.1 方式一
|
||
|
||
直接给WMS服务所在的URL地址，并在visibleLayers参数中指定要加载的图层（命名空间：图层名）。不过该方式需要使用代理。
|
||
|
||
**[代理配置](https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html)**：
|
||
|
||
1. 代理文件下载，https://github.com/Esri/resource-proxy/releases
|
||
|
||
2. 添加依赖
|
||
|
||
```groovy
|
||
//引入Spring boot 内嵌的Tomcat对jsp的解析包
|
||
compile('org.apache.tomcat.embed:tomcat-embed-jasper')
|
||
compile('javax.servlet:javax.servlet-api:4.0.1')
|
||
compile('javax.servlet:jsp-api:2.0')
|
||
compile('javax.servlet:jstl')
|
||
```
|
||
|
||
3. 设置代理文件的地址
|
||
|
||
```javascript
|
||
require(["esri/config"], function (esriConfig) {
|
||
//代理配置
|
||
esriConfig.defaults.io.proxyUrl = "/demo/proxy.jsp";//指定代理文件在项目中的实际位置
|
||
esriConfig.defaults.io.alwaysUseProxy = false;
|
||
});
|
||
```
|
||
|
||
4. 配置需要代理的请求路径
|
||
|
||
在proxy.jsp文件会从classpath中(即classes目录下)找proxy.config文件，当alwaysUseProxy 设置为false时，只有与proxy.config中匹配的url地址才会使用代理。
|
||
|
||
|
||
|
||
> proxy.config配置：
|
||
> serverUrl 标签中url属性配置要代理的地址，matchAll属性是否全匹配。另外还可以配置代理日志输出路径和日志级别。
|
||
|
||
```xml
|
||
<?xml version="1.0" encoding="utf-8" ?>
|
||
<ProxyConfig allowedReferers="*"
|
||
logFile="proxy_log.log"
|
||
logLevel="INFO"
|
||
mustMatch="true">
|
||
<serverUrls>
|
||
<serverUrl url="http://services.arcgisonline.com" matchAll="true"/>
|
||
<serverUrl url="http://localhost:8080/geoserver/ows" matchAll="true"/>
|
||
<serverUrl url="http://localhost:8080/geoserver/wms" matchAll="true"/>
|
||
<serverUrl url="http://localhost:8080/geoserver/wfs" matchAll="true"/>
|
||
</serverUrls>
|
||
</ProxyConfig>
|
||
<!-- See https://github.com/Esri/resource-proxy for more information -->
|
||
```
|
||
|
||
示例代码：
|
||
|
||
```javascript
|
||
function addWMSLayer() {
|
||
require(["esri/config", "esri/layers/WMSLayer", "esri/layers/WMSLayerInfo"],
|
||
function (esriConfig,Extent, WMSLayer, WMSLayerInfo) {
|
||
//代理配置
|
||
esriConfig.defaults.io.proxyUrl = "/demo/proxy.jsp";
|
||
esriConfig.defaults.io.alwaysUseProxy = false;
|
||
|
||
var wmsUrl = "http://localhost:8080/geoserver/wms";
|
||
var wmsLayer = new WMSLayer(wmsUrl, {
|
||
format: "png",
|
||
version: "1.3.0",
|
||
visibleLayers: ["tiger:tiger_roads"]
|
||
});
|
||
wmsLayer.on("error", function (response){
|
||
console.log("Error: %s", response.error.message);
|
||
});
|
||
map.addLayer(wmsLayer);
|
||
}
|
||
);
|
||
}
|
||
```
|
||
|
||
除了使用上述代理配置外，如果WMS 服务所在的地图服务器支持（CORS）跨域则配置corsEnabledServers属性指定服务器地址，也可以解决加载的跨域问题。
|
||
|
||
```javascript
|
||
function addWMSLayer() {
|
||
require(["esri/config","esri/geometry/Extent", "esri/layers/WMSLayer", "esri/layers/WMSLayerInfo"],
|
||
function (esriConfig,Extent, WMSLayer, WMSLayerInfo) {
|
||
var wmsUrl = "http://localhost:8080/geoserver/wms";
|
||
//当被调用方服务器支持跨域（CORS）时，配置corsEnabledServers
|
||
esri.config.defaults.io.corsEnabledServers.push(wmsUrl);
|
||
|
||
var wmsLayer = new WMSLayer(wmsUrl, {
|
||
format: "png",
|
||
version: "1.3.0",
|
||
visibleLayers: ["tiger:tiger_roads"]
|
||
});
|
||
wmsLayer.on("error", function (response){
|
||
console.log("Error: %s", response.error.message);
|
||
});
|
||
map.addLayer(wmsLayer);
|
||
}
|
||
);
|
||
}
|
||
```
|
||
|
||
|
||
|
||
该方式是先发送GetCapabilities 请求，获取服务器中的图层信息，再查找与visibleLayers中指定的图层，进行加载（GetMap）
|
||
|
||
|
||
|
||
|
||
|
||
### 2.2 方式二
|
||
|
||
在构造器中使用resourceInfo对象，在其layerInfos参数中配置WMS服务的图层信息。这种方式可以使用getFeatureInfo功能，只要将queryable和showPopup设置成true，添加代理（因为iframe标签中的地址不同源时会拒绝加载，点击劫持，所以需要使用代理来解决跨域问题），在getFeatureInfoURL地址上添加代理的url就可以实现getFeatureInfo和属性信息显示功能。
|
||
|
||
示例代码：
|
||
|
||
```javascript
|
||
function addWMSLayer() {
|
||
require(["esri/config","esri/geometry/Extent", "esri/layers/WMSLayer", "esri/layers/WMSLayerInfo"],
|
||
function (esriConfig,Extent, WMSLayer, WMSLayerInfo) {
|
||
//代理配置
|
||
esriConfig.defaults.io.proxyUrl = "/demo/proxy.jsp";
|
||
esriConfig.defaults.io.alwaysUseProxy = false;
|
||
var proxyUrl = window.location.origin + esriConfig.defaults.io.proxyUrl;
|
||
var wmsUrl = "http://localhost:8080/geoserver/wms";
|
||
var wmsLayer = new WMSLayer(wmsUrl, {
|
||
format: "png",
|
||
resourceInfo: {
|
||
extent: new Extent(-74.02722,40.684221,-73.907005,40.878178, {wkid: 4326}),
|
||
featureInfoFormat: "text/html",
|
||
// getFeatureInfoURL: wmsUrl,
|
||
getFeatureInfoURL: proxyUrl+"?"+wmsUrl+"?",
|
||
getMapURL: wmsUrl,
|
||
layerInfos: [
|
||
new WMSLayerInfo({
|
||
name: "tiger:tiger_roads",
|
||
queryable: true,
|
||
showPopup: true
|
||
})
|
||
],
|
||
version: "1.3.0"
|
||
},
|
||
version: "1.3.0",
|
||
visibleLayers: ["tiger:tiger_roads"]
|
||
});
|
||
wmsLayer.on("error", function (response){
|
||
console.log("Error: %s", response.error.message);
|
||
});
|
||
map.addLayer(wmsLayer);
|
||
}
|
||
);
|
||
}
|
||
```
|
||
|
||
结果分析：
|
||
|
||
|
||
|
||
可以看到该方式没有发送GetCapabilities请求，而是直接发送GetMap获取地图。当点击地图时会执行getFeatureInfo查询和显示查询结果。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
## 参考文章
|
||
|
||
[1] WMSLayer https://developers.arcgis.com/javascript/3/jsapi/wmslayer-amd.html#wmslayer1 |