Javascript OL3:如何获取矢量层的现有样式属性(例如填充颜色、笔划颜色等)
我有一个基于openlayers 3的应用程序,它提供了一个GUI,允许用户向地图添加向量层。添加新图层时,将调用“样式”函数,以根据图层中找到的要素的几何图形类型提供样式。对于填充颜色和笔划颜色等样式属性,我使用一个返回随机十六进制颜色值的函数 一旦将图层添加到贴图并渲染,如何获得这些十六进制颜色值?在我的地图的图层列表面板中,我希望能够提供一个反映图层填充颜色/笔划颜色的小图形样例 以下是一些代码摘录,以供澄清: 设置新图层的初始样式:Javascript OL3:如何获取矢量层的现有样式属性(例如填充颜色、笔划颜色等),javascript,openlayers-3,Javascript,Openlayers 3,我有一个基于openlayers 3的应用程序,它提供了一个GUI,允许用户向地图添加向量层。添加新图层时,将调用“样式”函数,以根据图层中找到的要素的几何图形类型提供样式。对于填充颜色和笔划颜色等样式属性,我使用一个返回随机十六进制颜色值的函数 一旦将图层添加到贴图并渲染,如何获得这些十六进制颜色值?在我的地图的图层列表面板中,我希望能够提供一个反映图层填充颜色/笔划颜色的小图形样例 以下是一些代码摘录,以供澄清: 设置新图层的初始样式: URL = window.URL || window.
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);
}
})
getStyle()返回最初用于设置图层样式的style函数,但我不确定如何访问style函数中的实际属性。这样看起来不会有太多效果,但是 最后,您是样式化功能,因此您可以使用不同的方法来检查这一点:
newLayer.getSource().once('addfeature', function(evt){
var style = styles[evt.feature.getGeometry().getType()];
});
看起来这样你不会得到很多,但是 最后,您是样式化功能,因此您可以使用不同的方法来检查这一点:
newLayer.getSource().once('addfeature', function(evt){
var style = styles[evt.feature.getGeometry().getType()];
});