How to make ol.source.ImageWMS send POST request

In our project, we're using OpenLayers-3's ol.source.ImageWMS to show image provided by Mapserver WMS. Since we're using Mapserver runtime substitution, our request can become quite long, wich could cause a problem for a GET request.

Is there a way to make ol.source.ImageWMS send POST request?

I answer this just for the reference based on this Openlayers dev thread, hopefully it will help someone in the future!. I needed to pass a very long CQL request to a Geoserver wms, and GET was limited in size, so I used POST like the following:

var POSTWMSLayer = new ol.layer.Image({
    source: new ol.source.ImageWMS({
      url: 'https://test.server.com/geoserver/wms',
      params: {
        'LAYERS': 'firstworkspace:states',
        'CQL_FILTER':'gid IN (1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,2785,2786,2787,2788,2789,2790,2791,2792,2793,2794,2795,2796,2797,2798,2799,2800,2801,2802,2803,2804,2805,2806,2807,2808,2809,2810,2811,2812,2813,2814,2815,2816,2817,2818,2819,2820,2821,2822,2823,2824,2825,2826,2827,2828,2829,2830,2831,2832,2833,2834,2835,2836,2837,2838,2839,2840,2841,2842,2843,2844,2845,2846,2847,2848,2849,2850,2851,2852,2853,2854,2855,2856,2857,2858,2859,2860,2861,2862,2863,2864,2865,2866,2867,2868,2869,2870,2871,2872,2873,2874,2875,2876,2877,2878,2879,2880,2881,2882,2883,2884,2885,2886,2887,2888,2889,2890,2891,2892,2893,2894,2895,2896,2897,2898,2899,2900,2901,2902,2903,2904,2905,2906,2907,2908,2909,2910,2911,2912,2913,2914,2915,2916,2917,2918,2919,2920,2921,2922,2923,2924,2925,2926,2927,2928,2929,2930,2931,2932,2933,2934,2935,2936,2937,2938,2939,2940,2941,2942,2943,2944,2945,2946,2947,2948,2949,2950,2951,2952,2953,2954,2955,2956,2957,2958,2959,2960,2961,2962,2963,2964,2965,2966,2967,2968,2969,2970,2971,2972,2973,2974,2975,2976,2977,2978,2979,2980,2981,2982,2983,2984,2985,2986,2987,2988,2989,2990,2991,2992,2993,2994,2995,2996,2997,2998,2999,3000,3001,3002,3003,3004,3005,3006,3007,3008,3009,3010,3011,3012,3013,3014,3015,3016,3017,3018,3019,3020,3021,3022,3023,3024,3025,3026,3027,3028,3029,3030,3031,3032,3033,3034,3035,3036,3037,3038,3039,3040,3041,3042,3043,3044,3045,3046,3047,3048,3049,3050,3051,3052,3053,3054,3055,3056,3057,3058,3059,3060,3061,3062,3063,3064,3065,3066,3067,3068,3069,3070,3071,3072,3073,3074,3075,3076,3077,3078,3079,3080,3081,3082,3083,3084,3085,3086,3087,3088,3089,3090,3091,3092,3093,3094,3095,3096,3097,3098,3099,3100,3101,3102,3103,3104,3105,3106,3107,3108,3109,3110,3111,3112,3113,3114,3115,3116,3117,3118,3119,3120,3121,3122,3123,3124,3125,3126,3127,3128,3129,3130,3131,3132,3133,3134,3135,3136,3137,3138,3139,3140,3141,3142,3143,3144,3145,3146,3147,3148,3149,3150,3151,3152,3153,3154,3155,3156,3157,3158,3159)
      },
      serverType: 'geoserver',
      imageLoadFunction: function (image, src) {
        var img = image.getImage();
        if (typeof window.btoa === 'function') {
          var urlArray = src.split("?");
          var url = urlArray[0];
          var params = urlArray[1];

          var xhr = new XMLHttpRequest();
          xhr.onload = function (e) {
            if (this.status === 200) {
              var uInt8Array = new Uint8Array(this.response);
              var i = uInt8Array.length;
              var binaryString = new Array(i);
              while (i--) {
                binaryString[i] = String.fromCharCode(uInt8Array[i]);
              }
              var data = binaryString.join('');
              var type = xhr.getResponseHeader('content-type');
              if (type.indexOf('image') === 0) {
                img.src = 'data:' + type + ';base64,' + window.btoa(data);
              }
            }
          };
          xhr.open('POST', url, true);
          xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
          xhr.responseType = 'arraybuffer';
          xhr.send(params);
        } else {
          img.src = src;
        }
      }
    })
  });

Actually the httprequest is the problem, use Httprequest Post method instead of get method in ol.source.ImageWMS?

Get request can not pass long string parameters. For big parameters we need to pass request with post method.

Now the bottleneck is that the post method is not supported in openlayers 3 whereas in old version it had support for post method.

Note: This is old OpenLayers code

   var query = new OpenLayers.Layer.WMS.Post("My Layer",
        'http://192.168.6.51:8090/geoserver/VP/wms', {
            LAYERS : 'Namespace:LayerName',
            sld_body : strSld_body,
            format : 'image/jpeg',
            transparent : 'true'
        },
        {
            unsupportedBrowsers: [],
            isBaseLayer: false,
            yx : {'EPSG:4326' : true}
        } );

In openlayers 3 there may be a workaround.

来源：https://stackoverflow.com/questions/29826627/how-to-make-ol-source-imagewms-send-post-request

标签

openlayers-3