在openlayers3中分配多个样式(来自geoserver的sld)

时间:2016-03-28 10:40:07

标签: javascript openlayers-3

嗨,这是我的代码我想添加一个后端层osm和平铺和未经处理的wms图层,外部sld文件从geoserver中获取样式。请指正。单击时的样式不会随着添加后端osm层的用户选择而改变。所以我想要在wms图层上改变样式的osm图层。

layer:
<script>
var untiled = new ol.layer.Image({
    source: new ol.source.ImageWMS({
      ratio: 1,
      url: 'http://localhost:8080/geoserver/wg/wms',
      params: {'FORMAT': format,
               'VERSION': '1.1.1',  
            STYLES: '',
            LAYERS: 'wg:UKNEWPANESR2015',
      }
    })
  });
  var tiled = new ol.layer.Tile({
    visible: false,
    source: new ol.source.TileWMS({
      url: 'http://localhost:8080/geoserver/wg/wms',
      params: {'FORMAT': format, 
               'VERSION': '1.1.1',
               tiled: true,
            STYLES: '',
            LAYERS: 'wg:UKNEWPANESR2015',
      }
    })
  });
  //Openstreetmap layer
  var osm = new ol.layer.Tile({
    source: new ol.source.MapQuest({layer: 'osm'})
  }); 
osm.set('name', 'OSM');

var map = new ol.Map({
    controls: ol.control.defaults({
      attribution: false
    }).extend([mousePositionControl]),
    target: 'map',
    layers: [ osm,
      untiled,
      tiled  
    ]
 });

//Function to call styles
function setStyle(style){
    map.getLayers().forEach(function(lyr) {
      lyr.getSource().updateParams({'STYLES': style});
    });
  }
<script>
<body>
<div id="toolbar" style="display: none;">
  <ul><li>
      <a>Styles:</a>
      <select id="imageFormatSelector" onchange="setStyle(value)">
        <option value="">Default</option>
           <option value="BIOMASSGG-WEI">BIOMASSGG-WEI</option>  
           <option value="AGRO-WEIGHT">AGRO-WEIGHT</option>  
           <option value="BIOMASSGG">BIOMASSGG</option>  
           <option value="BIOENERGYSD">BIOENERGYSD</option>  
           <option value="BIOENERGYSD-WEIsld">BIOENERGYSD-   WEIsld</option>  
           <option value="AGROCLIMATICZONE">AGROCLIMATICZONE</option>  
      </select>
    </li>
</ul>
</body>

0 个答案:

没有答案