巧用Arcgis Server的REST接口实现OL2中WMS添加过滤

概述：

在实际的应用中，很多时候我们需要对展示的图层进行属性或者空间的过滤，在Geoserver发布的WMS中，可以通过CQL_FILTER来设置过滤条件，但是Arcgis Server发布的WMS不支持CQL_FILTER的过滤，这样就无法实现对展示的图层进行过滤。好在Arcgis Server的REST接口中，EXPORT接口实现了图层的导出功能，并可添加过滤条件，借于此，本文通过扩展OL2图层，结合EXPORT接口，实现Geoserver中CQL_FILTER的功能。

EXPORT接口介绍：

export接口所需参数如下图所示：

在上述的参数中，有以下几个参数是实现中必须的：

1、bbox：

地图生成的四至，中间以逗号隔开（eg:-13.309976914878,1.509713621378,221.73777919702,70.185476718488）。

2、layers：

地图需要展示的图层，是按照rest的顺序，不是WMS的顺序（eg:show：6）。
3、layerDefs：

图层的过滤条件，6为展示的图层，后面为过滤条件（eg:{“6″:”NAME=’甘肃'”}）。

4、size：

图片的输出大小，前面为宽度，后面为高度，中间以逗号隔开（eg:1956,571）。
5、format：

输出的图片格式，透明状态下必须为png。
6、transparent：

是否以透明输出，是，true；否，false。
7、f：

输出格式，默认为html，本例中格式必须为image。

具体参数说明如下：

{
  "<layerId1>" : {
    //If true, use the time extent specified by the time parameter
    "useTime" : < true | false >,
    //If true, draw all the features from the beginning of time for that data
    "timeDataCumulative" : < true | false >,
    //Time offset for this layer so that it can be overlaid on the top of a previous or future time period
    "timeOffset" : <timeOffset1>,
    "timeOffsetUnits" : "<esriTimeUnitsCenturies | esriTimeUnitsDays | esriTimeUnitsDecades | 
                             esriTimeUnitsHours | esriTimeUnitsMilliseconds | esriTimeUnitsMinutes | 
                             esriTimeUnitsMonths | esriTimeUnitsSeconds | esriTimeUnitsWeeks | esriTimeUnitsYears |
                             esriTimeUnitsUnknown>"
  },
  "<layerId2>" : {
    "useTime" : < true | false >,
    "timeDataCumulative" : < true | false >,
    "timeOffsetOffset" : <timeOffset2>,
    "timeOffsetUnits" : "<timeOffsetUnits2>"
  }
}

{
  "0" : {
    "useTime" : true,
    "timeDataCumulative" : false,
    "timeOffset" : 1,
    "timeOffsetUnits" : "esriTimeUnitsYears"
  },
  "3" : {
    "useTime" : false
  }
}

[
  {
    "id": <layerOrTableId>,
    "source": <layer source>,
    "definitionExpression": "<definitionExpression>",
    "drawingInfo": 
    {
      "renderer": <renderer>,
      "transparency": <transparency>,
      "scaleSymbols": <true | false >,
      "showLabels": <true | false >,
      "labelingInfo": <labeling info>
    },
    "layerTimeOptions":
    {
      "useTime" : <true | false>,
      "timeDataCumulative" : <true | false>,
      "timeOffset" : <timeOffset>,
      "timeOffsetUnits" : "<esriTimeUnitsCenturies | esriTimeUnitsDays | esriTimeUnitsDecades | 
                             esriTimeUnitsHours | esriTimeUnitsMilliseconds | esriTimeUnitsMinutes | 
                             esriTimeUnitsMonths | esriTimeUnitsSeconds | esriTimeUnitsWeeks | esriTimeUnitsYears |
                             esriTimeUnitsUnknown>"
    }
  },
  {
    "id": <layerOrTableId>,
    "source": <layer source>,
    "definitionExpression": "<definitionExpression>",
    "drawingInfo": 
    {
      "renderer": <renderer>,
      "transparency": <transparency>,
      "scaleSymbols": <true | false >,
      "showLabels": <true | false >,
      "labelingInfo": <labeling info>
    },
    "layerTimeOptions":
    {
      "useTime" : <true | false>,
      "timeDataCumulative" : <true | false>,
      "timeOffset" : <timeOffset>,
      "timeOffsetUnits" : "<esriTimeUnitsCenturies | esriTimeUnitsDays | esriTimeUnitsDecades | 
                             esriTimeUnitsHours | esriTimeUnitsMilliseconds | esriTimeUnitsMinutes | 
                             esriTimeUnitsMonths | esriTimeUnitsSeconds | esriTimeUnitsWeeks | esriTimeUnitsYears |
                             esriTimeUnitsUnknown>"
    }
  }
]

[
  //disable time on existing map service layer and turn off labels
  {
    "id": 501,
    "source":
    {
      "type": "mapLayer",
      "mapLayerId": 0
    },
    "drawingInfo":
    {
	  "showLabels": false
    },
    "layerTimeOptions":
    {
	  "useTime": false
    }
  },
  //add a new layer from registered workspace and label features with a feature attribute value {TaxLotId]
  {
    "id": 502,
    "source":
    {
      "type": "dataLayer",
      "dataSource":
      {
        "type": "table",
        "workspaceId": "MAP",
        "dataSourceName": "MAP.user1.Taxlots"
      }
    },
    "drawingInfo": 
    {
      "renderer":
      {
        "type": "simple",
        "symbol":
        {
          "type" : "esriSFS", 
          "style" : "esriSFSSolid", 
          "color" : [166,36,0,255], 
          "outline" : 
          {
            "type" : "esriSLS", 
            "style" : "esriSLSSolid", 
            "color" : [110,110,110,255], 
            "width" : 1.0
          }
        },
        "label": "TaxLots",
        "description": ""
      },
      "transparency": 60
    },
    "showLabels": true,
    "labelingInfo":
    [
      {
        "labelPlacement": "esriServerPolygonPlacementAlwaysHorizontal",
        "labelExpression": "[TaxLotId]",
        "useCodedValues": false,
        "symbol": 
        {
          "type": "esriTS",
          "color": [255,255,0,255],
          "verticalAlignment": "bottom",
          "horizontalAlignment": "left",
          "font": 
          {
            "family": "Arial",
            "size": 12,
            "style": "normal",
            "weight": "bold",
            "decoration": "none"
          }
        },
        "minScale": 15000,
        "maxScale": 30000,
        "where": ""
      }
    ]
  },
  //change the Version of existing map service layer
  {
    "id": 503,
    "source":
    {
      "type": "mapLayer",
      "mapLayerId": 1,
      "gdbVersion": "USER1"
    },
    "definitionExpression": "neighborhood = 'French Quarter'"
  },
  //add a raster from registered workspace
  {
    "id": 504,
    "source":
    {
      "type": "dataLayer",
      "dataSource":
      {
        "type": "raster",
        "workspaceId": "rasterWS",
        "dataSourceName": "NewOrleans.tif"
      }
    },
    "drawingInfo": 
    {
      "transparency": 0
    }
  }
]

实现：

1、扩展的AgsRestWMS图层

OpenLayers.Layer.AgsRestWMS = OpenLayers.Class(OpenLayers.Layer.Grid, {
    DEFAULT_PARAMS: { service: "WMS",
                      version: "1.1.1",
                      request: "GetMap",
                      styles: "",
                      format: "image/jpeg"
                     },
    
    isBaseLayer: true,
    encodeBBOX: false,
    noMagic: false,
    layers:"",
    filter:"",
    yx: {},
    initialize: function(name, url, params, options) {
        var newArguments = [];
        params = OpenLayers.Util.upperCaseObject(params);
        this.layers = params.LAYERS;
        this.filter=params.FILTER;
        if (parseFloat(params.VERSION) >= 1.3 && !params.EXCEPTIONS) {
            params.EXCEPTIONS = "INIMAGE";
        } 
        newArguments.push(name, url, params, options);
        OpenLayers.Layer.Grid.prototype.initialize.apply(this, newArguments);
        OpenLayers.Util.applyDefaults(
                       this.params, 
                       OpenLayers.Util.upperCaseObject(this.DEFAULT_PARAMS)
                       );

        if (!this.noMagic && this.params.TRANSPARENT && 
            this.params.TRANSPARENT.toString().toLowerCase() == "true") {
            if ( (options == null) || (!options.isBaseLayer) ) {
                this.isBaseLayer = false;
            } 
            if (this.params.FORMAT == "image/jpeg") {
                this.params.FORMAT = OpenLayers.Util.alphaHack() ? "image/gif"
                                                                 : "image/png";
            }
        }

    },    
    reverseAxisOrder: function() {
        var projCode = this.projection.getCode();
        return parseFloat(this.params.VERSION) >= 1.3 && 
            !!(this.yx[projCode] || (OpenLayers.Projection.defaults[projCode] && 
            OpenLayers.Projection.defaults[projCode].yx));
    },
    getURL: function (bounds) {
        bounds = this.adjustBounds(bounds);
        var imageSize = this.getImageSize();
        var newParams = {};
        var reverseAxisOrder = this.reverseAxisOrder();
        newParams.BBOX = this.encodeBBOX ?
            bounds.toBBOX(null, reverseAxisOrder) :
            bounds.toArray(reverseAxisOrder);
        newParams.WIDTH = imageSize.w;
        newParams.HEIGHT = imageSize.h;
        var requestString = this.getFullRequestString(newParams);
        return requestString;
    },
    getFullRequestString:function(newParams) {
    	var url = this.url;
        if (OpenLayers.Util.isArray(url)) {
            url = this.selectUrl(s, url);
        }
        url = url+'?bbox=${bbox}&layers=${layers}&layerDefs=${layerDefs}&size=${size}&format=png&transparent=true&f=image';
        var layers = "show:"+this.layers;
        var layerDefs = '{"'+this.layers+'":"'+this.filter+'"}';
        url = OpenLayers.String.format(url, {
        	'bbox': newParams.BBOX.toString(),
        	'layers': layers, 
        	'layerDefs': layerDefs,
        	'size':newParams.WIDTH+","+newParams.HEIGHT
        });
        return url;
    },
    CLASS_NAME: "OpenLayers.Layer.AgsRestWMS"
});

2、前台调用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>openlayers map</title>
    <link rel="stylesheet" href="../../../plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
    <style>
        html, body, #map{
            padding:0;
            margin:0;
            height:100%;
            width:100%;
            overflow: hidden;
        }
    </style>
    <script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
    <script src="extend/AgsRestWMS.js"></script>
    <script src="../../../plugin/jquery/jquery-1.8.3.js"></script>
    <script>
        var map;
        $(window).load(function() {
            var format = 'image/png';
            var bounds = new OpenLayers.Bounds(
                    73.45100463562233, 18.16324718764174,
                    134.97679764650596, 53.531943152223576
            );
            var options = {
                controls: [],
                maxExtent: bounds,
                maxResolution: 0.2403351289487642,
                projection: "EPSG:4326",
                units: 'degrees'
            };
            map = new OpenLayers.Map('map', options);
            var base1 = new OpenLayers.Layer.WMS(
                    "base1",
                    "http://localhost:8088/geoserver/lzugis/wms",
                    {
                        "LAYERS": 'province',
                        format: format,
                        transparent: true,
                        CQL_FILTER:"dzm='620000'"
                    },
                    {
                        isBaseLayer: true,
                        singleTile: true
                    }
            );
            var base2 = new OpenLayers.Layer.AgsRestWMS(
                    "base2",
                    "http://localhost:6080/arcgis/rest/services/lzugis/boundrychina/MapServer/export",
                    {
                        "LAYERS": '6',
                        format: format,
                        transparent: true,
                        filter:"dzm='620000'"
                    },
                    {
                        isBaseLayer: true,
                        singleTile: true
                    }
            );
            map.addLayers([base1,base2]);
            map.addControl(new OpenLayers.Control.Zoom());
            map.addControl(new OpenLayers.Control.Navigation());
            map.addControl(new OpenLayers.Control.OverviewMap());
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.zoomToExtent(bounds);
        });
    </script>
</head>
<body>
<div id="map"></div>
</body>
</html>

实现后效果：

转载自：https://blog.csdn.net/GISShiXiSheng/article/details/52971329