css6图层 解锁,javascript

我有一个geojson文件，我存储在我的GeoServer上。 该文件包含大约150个多边形。

我正在通过WMS服务调用此层，并成功在OpenLayers(v4.6.4)上显示具有默认样式的图层。

现在，我想在用户点击地图时更改此图层“区域”的样式(样式描述为zone_sld)。

我不想调用存储在GeoServer中的样式(不适合我项目的最终版本)，我想在OpenLayers中动态更改样式。

//definition of my style

var district_sld = '<?xml version="1.0" encoding="UTF-8"?>';

district_sld += '';

district_sld += 'District_07072018';

district_sld += '';

district_sld += ' District_07072018';

district_sld += ' ';

district_sld += ' name';

district_sld += ' ';

district_sld += ' Single symbol';

district_sld += ' ';

district_sld += ' ';

district_sld += ' #ff0000';

district_sld += ' ';

district_sld += ' ';

district_sld += ' #000001';

district_sld += ' bevel';

district_sld += ' 4.000000';

district_sld += ' ';

district_sld += ' ';

district_sld += ' ';

district_sld += ' ';

district_sld += '';

district_sld += '';

district_sld += '';

var format = 'image/png';

/*DISTRICT LAYER*/

var district = new ol.layer.Tile({

source: new ol.source.TileWMS({

url: 'http://'+ $location.host() + ':8080/geoserver/project/wms',

params: {'FORMAT': format,

'VERSION': '1.1.1',

tiled: true,

LAYERS: 'project:District_07072018',

//'SLD_BODY': district_sld,

STYLES: '',

},

crossOrigin: 'Anonymous'

})

});

var projection = new ol.proj.Projection({

code: 'EPSG:4326',

units: 'degrees',

axisOrientation: 'neu'

});

var map = new ol.Map({

controls: ol.control.defaults({

attribution: false

}).extend([mousePositionControl]),

overlays: [overlay],

target: 'map',

layers: [

district

],

view: new ol.View({

projection: projection

})

});

map.on('click', function(evt) {

//alert('clicK to change the style of the district layer');

//district.getSource().clear();

//district.getSource().updateParams({STYLES: undefined, SLD_BODY: district_sld});

district.getSource().updateParams({STYLES: district_sld});

});

任何建议的帮助将非常感激。 谢谢。