OL3：如何获取矢量图层已有的样式属性（如填充颜色、描边颜色等）答案

【问题标题】：OL3: How to get existing style properties (e.g. fill color, stroke color, etc.) of vector layerOL3：如何获取矢量图层已有的样式属性（如填充颜色、描边颜色等）
【发布时间】：2016-03-21 17:20:34
【问题描述】：

我有一个基于 openlayers 3 的应用程序，它提供了一个允许用户将矢量图层添加到地图的 GUI。添加新图层时，将调用样式函数以根据图层中找到的要素的几何类型提供样式。对于填充颜色和笔触颜色等样式属性，我使用了一个返回随机十六进制颜色值的函数。

将图层添加到地图并渲染后，如何获取这些十六进制颜色值？在我的地图图层列表面板中，我希望能够提供一个反映图层填充颜色/描边颜色的小图形样本。

以下是一些代码摘录以供澄清：

为新图层设置初始样式：

URL = window.URL || window.webkitURL;
    var inputFile = $("#InputFile")[0].files[0];  
    var path = window.URL.createObjectURL(inputFile);



    var image = new ol.style.Circle({
      radius: 3,
      fill: new ol.style.Fill({
          color: randomColor()/*'rgba(255, 0, 0, 0.8)'*/
        }),
      stroke: new ol.style.Stroke({color: randomColor(), width: 1})
    });

    var styles = {
      'Point': [new ol.style.Style({
        image: image
      })],
      'LineString': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: randomColor(),/*'green',*/
          width: 1
        })
      })],
      'MultiLineString': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: randomColor(),/*'green',*/
          width: 1
        })
      })],
      'MultiPoint': [new ol.style.Style({
        image: image
      })],
      'MultiPolygon': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: randomColor(),/*'blue',*/
          lineDash: [4],
          width: 3
        }),
        fill: new ol.style.Fill({
          color: randomColor()
        })
      })],
      'Polygon': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: randomColor(),/*'blue',*/
          lineDash: [4],
          width: 3
        }),
        fill: new ol.style.Fill({
          color: randomColor(),/*'rgba(0, 0, 255, 0.1)'*/
        })
      })],
      'GeometryCollection': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: randomColor(),/*'magenta',*/
          width: 2
        }),
        fill: new ol.style.Fill({
          color: randomColor()/*'magenta'*/
        }),
        image: new ol.style.Circle({
          radius: 10,
          fill: null,
          stroke: new ol.style.Stroke({
            color: randomColor()/*'magenta'*/
          })
        })
      })],
      'Circle': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: randomColor(),/*'red',*/
          width: 2
        }),
        fill: new ol.style.Fill({
          color: randomColor()/*'rgba(255,0,0,0.2)'*/
        })
      })]
    };

    var styleFunction = function(feature, resolution) {
      return styles[feature.getGeometry().getType()];
    };



    newLayer = new ol.layer.Vector({
        //create a layer 'name' property with the user input
        name:  this.refs.layerName.getValue(),/*$('#layerName').val(),*/
        basemap: false,
        source: new ol.source.Vector({
            url: path,
            format: new ol.format.GeoJSON()
        }),
        style: styleFunction
    });

现在，图层添加到地图后，如何访问现有的样式属性？

map.getLayers().forEach(function(lyr){
        if (lyr.get('name') == layerName) {
            var style = lyr.getStyle();         
                            console.log(style);
        }
    })

lyr.getStyle() 返回用于初始设置图层样式的样式函数，但我不确定如何访问样式函数中的实际属性。

【问题讨论】：

标签： javascript openlayers-3

【解决方案1】：

看起来你不会通过这种方式得到很多，但是......

最后，您是样式化功能，所以也许您可以用不同的方法来检查：

newLayer.getSource().once('addfeature', function(evt){
  var style = styles[evt.feature.getGeometry().getType()];
});

【讨论】：