使用颜色选择器更改图层样式颜色
问题描述:
我试图在我的地图中创建一个工具来选择要应用于特定图层的颜色。 我试图在这下面的代码随意改变颜色,如:使用颜色选择器更改图层样式颜色
function getRandomColor() {
var letters = 'ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var ab =new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 255, 0.0)',
width: 0.3
}),
fill : new ol.style.Fill({
color: getRandomColor()
})
})
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({ source: new ol.source.OSM() }),
ab
],
target: document.getElementById('mapid'),
view: new ol.View({
center: [-1095791.453557, 3422374.879112],
maxZoom: 19,
zoom: 5
})
});
我发现财产以后这样的:https://jsfiddle.net/7g7Lh2L2/2/
,但我不知道如何与层礼仪
感谢取代'#background'
和'background-color'
您;
答
您应该创建一个样式函数以实现您正在寻找的fill
属性。样式功能将被要求在地图图层中的每个对象,你可以检查该功能的属性来确定fill
它或致电getRandomColor()
功能:
var styleFunction = function() {
return function(feature,resolution) {
var style;
var objProperty = feature.get('<Layer Property Name>'); //Retrieve feature property value
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
fill: createFillStyle(feature), //Would call function for each map layer feature to determine fill color
stroke: createStrokeStyle(feature,resolution) //Example calls function to create stroke for an individual layer feature
}),
text: createTextStyle(feature, resolution) //Example calls function to create text style for individual layer feature
});
return [style];
};
};
var ab =new ol.layer.Vector({
source: vectorSource,
style: styleFunction()
});
var createFillStyle = function(feature) {
var fillColor = getRandomColor();
return new ol.style.Fill({color: fillColor});
}
上面的例子将调用getRandomColor()
的每个功能上地图图层(每个要素在地图图层上都有不同的颜色)。如果地图图层上的所有要素只有一种颜色,请在var ab =new ol.layer.Vector
之前拨打getRandomColor()
为地图上的所有地图要素设置一种随机颜色。
查找openlayers style function
查询更多示例。