Question

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

我正在通过WMS服务调用此层，并成功在OpenLayers（v4.6.4）上以默认样式显示该层。

现在，我想在用户单击地图时更改此图层“区”的样式（样式称为district_sld）。

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

//definition of my style
var district_sld = '<?xml version="1.0" encoding="UTF-8"?><sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0">';
district_sld += '<sld:NamedLayer>';
district_sld += '<sld:Name>District_07072018</sld:Name>';
district_sld += '<sld:UserStyle>';
district_sld += '  <sld:Name>District_07072018</sld:Name>';
district_sld += '  <sld:FeatureTypeStyle>';
district_sld += '    <sld:Name>name</sld:Name>';
district_sld += '    <sld:Rule>';
district_sld += '      <sld:Name>Single symbol</sld:Name>';
district_sld += '      <sld:PolygonSymbolizer>';
district_sld += '        <sld:Fill>';
district_sld += '          <sld:CssParameter name="fill">#ff0000</sld:CssParameter>';
district_sld += '        </sld:Fill>';
district_sld += '        <sld:Stroke>';
district_sld += '          <sld:CssParameter name="stroke">#000001</sld:CssParameter>';
district_sld += '          <sld:CssParameter name="stroke-linejoin">bevel</sld:CssParameter>';
district_sld += '          <sld:CssParameter name="stroke-width">4.000000</sld:CssParameter>';
district_sld += '        </sld:Stroke>';
district_sld += '      </sld:PolygonSymbolizer>';
district_sld += '    </sld:Rule>';
district_sld += '  </sld:FeatureTypeStyle>';
district_sld += '</sld:UserStyle>';
district_sld += '</sld:NamedLayer>';
district_sld += '</sld:StyledLayerDescriptor>';

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

我尝试使用了updateParams（）函数，但是无法更改样式。当我停止使用该函数时，未定义值STYLES。我已经在这里检查过以下主题： https://gis.stackexchange.com/questions/45341/how-to-add-sld-to-a-wms-layer-dynamically-from-javascript https://gis.stackexchange.com/questions/124173/openlayers-3-submit-sld-text-in-wms-call。

任何建议的帮助将不胜感激。谢谢。

如何在Openlayers上更改WMS图层的样式（来自Javascript）

0 个答案: