OL3:如何获取矢量图层的现有样式属性(例如填充颜色、描边颜色等)
OL3: How to get existing style properties (e.g. fill color, stroke color, etc.) of vector layer
我有一个基于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() 返回用于最初设置图层样式的样式函数,但我不确定如何访问样式函数内的实际属性。
看起来你不会得到太多这样,但是......
最后,您是样式功能,因此也许您可以使用不同的方法进行检查:
newLayer.getSource().once('addfeature', function(evt){
var style = styles[evt.feature.getGeometry().getType()];
});
相关文章:
- 用与线条相同的颜色填充多折线图上的点
- 用图像而不是颜色填充对象(将图像绘制到画布上)
- 椭圆字幕选择,然后在Photoshop中使用Javascript填充颜色
- 如何访问svg内部id并让CSS更改该id的填充颜色
- 在自定义坐标处获取RaphaelJS元素的颜色填充
- 一次高亮显示一个城市,并在悬停其他城市时删除颜色填充
- 用不同颜色填充的Highchart数据系列
- 如何在高图表的 2 点之间制作颜色填充区域
- PHP:用颜色填充图像块并保存信息
- 用颜色填充t恤,并在HTML画布上相应地更改文本颜色
- 使用javascript创建10*10表,并使用从黑色到白色的颜色填充单元格
- 我不能用颜色填充线条.它只是让它们变成黑色
- 如何使用CSS使用不同的颜色填充chrome中输入[type=“range”]的左侧
- 通过谷歌应用程序脚本的颜色填充电子表格中的谷歌日历事件
- 从中心用颜色填充圆形Div
- 有没有办法用颜色填充一半的按钮背景?
- 动态颜色填充渐变不起作用
- 如何用颜色填充路径项
- 用图像而不是颜色填充画布区域
- 点击时更改谷歌地图多边形颜色/填充