简体   繁体   English

使用JavaScript将CSS样式应用于openlayers3中的图层

[英]Apply css styles to layers in openlayers3 using javascript

Define layers and styles using openlayers3 API. 使用openlayers3 API定义图层和样式。 I need 2 apply css styles for layers.for that code is in below used 我需要为图层应用2种CSS样式。

//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. ol3样式应用于矢量图层,而不用于WMS图层。 But you could set the styles , SLD or SLD_BODY property manually in the params to set a style. 但是您可以在params手动设置stylesSLDSLD_BODY属性以设置样式。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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