---
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地址才会使用代理。

   ![proxys](./images/proxys.png)

   > 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）

![在这里插入图片描述](./images/20200324003605358.png)



### 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);
         }
     );
 }
```

结果分析：

![在这里插入图片描述](./images/20200324010317175.png)

 可以看到该方式没有发送GetCapabilities请求，而是直接发送GetMap获取地图。当点击地图时会执行getFeatureInfo查询和显示查询结果。

![](./images/2020032401050638.png)




## 参考文章

[1] WMSLayer https://developers.arcgis.com/javascript/3/jsapi/wmslayer-amd.html#wmslayer1