openlayers+wms 发送post 请求，解决sld_body太长请求失败的问题

需求：支持赋值操作，由于每个地区的类型是不同的，所以不能再geoserver中将通过sld将样式固定写死，所以就想到了使用openlayers中提供的sld_body的方式动态修改wms样式，但是由于get方式sld_body太长了，导致headers 请求头太长，请求不成功，所以就想到了用post请求wms

效果如下

核心代码：借助tileLoadFunction

tileLoadFunction: 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;
              }
            }

完整代码 

import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import TileWMS from 'ol/source/TileWMS.js';
import View from 'ol/View.js';

const layers = [
  new TileLayer({
    source: new OSM(),
  }),
  new TileLayer({
    extent: [-13884991, 2870341, -7455066, 6338219],
    source: new TileWMS({
      url: 'https://ahocevar.com/geoserver/wms',
      params: {'LAYERS': 'topp:states', 'TILED': true},
      serverType: 'geoserver',
      // Countries have transparency, so do not fade tiles:
      transition: 0,
      tileLoadFunction: 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;
              }
            }
    }),
  }),
];
const map = new Map({
  layers: layers,
  target: 'map',
  view: new View({
    center: [-10997148, 4569099],
    zoom: 4,
  }),
});