4openlayers控制wms图层动态修改渲染样式

1.前提

除了渲染后的地图和数据无滞后，能够动态改变地图渲染样式，也是wms图层的另外一个优势。

2.实战

（1）在3openlayers加载wms图层-优快云博客一文中创建的loadwms项目基础上，进行修改。

function changeWMSStyle(){
   
	 fetch('wuhanpopulation2.sld').then(function(response) {
        
		wmsSource.updateParams({'sld': response.url });
	    
     }); 	
}

通过动态更新wms请求的sld参数，使用如下区间进行渲染，population字段值小于等于100万的用绿色渲染，大于100万的用红色渲染。调用wmsSource的updateParams方法。

能够达到如下效果：

这里使用的是sld参数。sld_body参数同样能达到这种效果，只不过真正使用时，建议用后端去处理样式生成一个sld文件，放到能够通过url能访问的http server上，前端直接调用。否则对于复杂的样式渲染，sld_body的内容很容易超过get请求的长度限制。

（2）对数据的过滤同样是一个常用的需求，比如对于满足某种条件的要素进行高亮展示。如果只是单纯的过滤可以使用CQL_FILTER来完成。如果是过滤加改变样式，建议生成一个新的sld文件，前端openlayers来调用。

function filterData(){
    wmsSource.updateParams({'CQL_FILTER':  'population>150' });  	
}

通过CQL_FILTER，实现过滤处超过150万人口的区。

function filterDataAndHilight(){
     
	 fetch('wuhanpopulation3.sld').then(function(response) {        
		wmsSource.updateParams({'sld': response.url ,'CQL_FILTER':  'population>150' });	    
     }); 
}

通过更改sld、CQL_FILTER实现同时高亮和筛选数据。