简体   繁体   中英

Apply css styles to layers in openlayers3 using javascript

Define layers and styles using openlayers3 API. I need 2 apply css styles for layers.for that code is in below used

//applying styles for wms layer
var fill = new ol.style.Fill({color: 'rgba(237, 26, 170, 0.82)'});
var stroke = new ol.style.Stroke({color: '#4A12ED',width: 1.25});
var text = new ol.style.Text({color: '#F21A6C'});

var styles = [new ol.style.Style({
    image: new ol.style.Circle({
           fill: fill,
           stroke: stroke,
           radius: 5
     }),
     fill: fill,
     stroke: stroke,
})];

var wms = new ol.layer.Tile({
     source: new ol.source.TileWMS({
         title: "Population Density",
         url: 'http://sedac.ciesin.columbia.edu/geoserver/wms',
         params: {LAYERS: 'gpw-v3:gpw-v3-population-density_2000'}
     }),
     style: styles
});

/*****************************************************************************/
//applying styles for unescap layer

var unescap = new ol.layer.Tile({
     source: new ol.source.TileWMS({
          url: 'http://203.159.29.11:8200/geoserver/unescap/wms?',
          params: {LAYERS: 'unescap:rg_di_any_all'}
     }),
     style: new ol.style.Style({
          stroke: new ol.style.Stroke({color: '#319FD3',width: 1}),
          fill: new ol.style.Fill({color: 'rgba(17, 224, 36, 0.66)'}),
          text: new ol.style.Text({
                font: '12px Calibri,sans-serif',
                fill: new ol.style.Fill({color: '#ff0'}),
                stroke: new ol.style.Stroke({ color: '#09C',width: 3})
          })
     })
});

but styles are not applied error messages are not available in console I want to know what is wrong with this code and how to apply styles properly.

The ol3 styles are meant to be used for vector layers, not for WMS layers. But you could set the styles , SLD or SLD_BODY property manually in the params to set a style.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM