OL3:如何获得矢量图层的现有样式属性(例如填充颜色,笔触颜色等)

时间:2016-03-21 17:20:34

标签: javascript openlayers-3

我有一个基于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()返回最初为图层设置样式的样式函数,但我不确定如何访问样式函数中的实际属性。

1 个答案:

答案 0 :(得分:0)

看起来你不会这么做但是......

最后,你是造型功能所以也许你可以用不同的方法来检查它:

void delete_list(List* self)
{
  while ((*self)->next)
  {
    List tmp = *self;
    List last;
    while ( tmp->next != NULL)
    {
      last = tmp;
      tmp = tmp->next;
    }
    free(last->next); // delete the last node in the list
    last->next = NULL;
  }
  free(*self); // now delete the only existing node
}