Как изменить стиль слоя WMS на Openlayers (из Javascript) - PullRequest
Новая
       65

Как изменить стиль слоя WMS на Openlayers (из Javascript)

0 голосов
/ 31 мая 2019

У меня есть файл geojson, который я сохранил на своем GeoServer. Этот файл содержит около 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.

Любая помощь совета была бы очень признательна. Спасибо.

...