使用颜色选择器更改图层样式颜色

我试图在我的地图中创建一个工具来选择要应用于特定图层的颜色。我试图在这下面的代码随意改变颜色，如：使用颜色选择器更改图层样式颜色

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'您;

来源

2017-06-18 Issam

您应该创建一个样式函数以实现您正在寻找的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查询更多示例。

来源

2017-06-19 14:47:24 GoinOff

使用颜色选择器更改图层样式颜色

回答

相关问题