カラーピッカーを使用してレイヤースタイルのカラーを変更する

Question

マップで特定のレイヤーに適用したい色を選択するツールを作成しようとしています。私が好き気にいらを見つけ

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'を交換する方法がわかりません君は;

Answer 1

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()を呼び出しますマップレイヤー（各フィーチャーはマップレイヤー上で異なる色になります）。マップ画層のすべてのフィーチャーに1つの色しかない場合は、var ab =new ol.layer.Vectorの前にgetRandomColor()と呼び出して、マップ上のすべてのマップフィーチャーに1つのランダムな色を設定します。

さらなる例については、openlayers style functionを検索してください。