Question

我正在尝试使用HTML <input type="color">元素动态更改地图中GeoJSON图层的颜色。我的代码可以工作，但是仅当我移动地图或放大/缩小时，Fill对象的color参数才会刷新。有什么办法可以即时进行吗？我正在使用setColor（）函数来编辑color属性的值。

//Change Vector Layer Color 
//Hex to RGB
function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

let layerColorInput1 = document.getElementById('layerColorInput_1')
let layerColorInput2 = document.getElementById('layerColorInput_2')
let layerColorInput3 = document.getElementById('layerColorInput_3')
let layerColorInput4 = document.getElementById('layerColorInput_4')
let layerColorInput5 = document.getElementById('layerColorInput_5')
let layerColorInput6 = document.getElementById('layerColorInput_6')
let layerColorInput7 = document.getElementById('layerColorInput_7')
let layerColorInput8 = document.getElementById('layerColorInput_8')
let layerColorInput9 = document.getElementById('layerColorInput_9')

document.addEventListener("DOMContentLoaded", function (event) {
    layerColorInput1.addEventListener('change', function(){changeLayerColor(5, layerColorInput1)});
});
document.addEventListener("DOMContentLoaded", function (event) {
    layerColorInput2.addEventListener('change', function(){changeLayerColor(6, layerColorInput2)});
});
document.addEventListener("DOMContentLoaded", function (event) {
    layerColorInput3.addEventListener('change', function(){changeLayerColor(7, layerColorInput3)});
});
document.addEventListener("DOMContentLoaded", function (event) {
    layerColorInput4.addEventListener('change', function(){changeLayerColor(8, layerColorInput4)});
});
document.addEventListener("DOMContentLoaded", function (event) {
    layerColorInput5.addEventListener('change', function(){changeLayerColor(9, layerColorInput5)});
});
document.addEventListener("DOMContentLoaded", function (event) {
    layerColorInput6.addEventListener('change', function(){changeLayerColor(10, layerColorInput6)});
});
document.addEventListener("DOMContentLoaded", function (event) {
    layerColorInput7.addEventListener('change', function(){changeLayerColor(11, layerColorInput7)});
});
document.addEventListener("DOMContentLoaded", function (event) {
    layerColorInput8.addEventListener('change', function(){changeLayerColor(12, layerColorInput8)});
});
document.addEventListener("DOMContentLoaded", function (event) {
    layerColorInput9.addEventListener('change', function(){changeLayerColor(13, layerColorInput9)});
});

function changeLayerColor(i, layerColorInput){  
    let newColor = hexToRgb(layerColorInput.value);
    let newColorArray = [newColor.r, newColor.g, newColor.b, 1.00]
    mapLayers[i].style_.fill_.setColor(newColorArray);
}

Answer 1

设置对象的私有属性不会生成事件。使用已记录的API函数setStyle()，显示将更新。

let style = mapLayers[i].getStyle();
style.getFill().setColor(newColorArray);
mapLayers[i].setStyle(style);



  /**
  * Set the style for features.  This can be a single style object, an array
  * of styles, or a function that takes a feature and resolution and returns
  * an array of styles. If it is `undefined` the default style is used. If
  * it is `null` the layer has no style (a `null` style), so only features
  * that have their own styles will be rendered in the layer. See
  * {@link module:ol/style} for information on the default style.
  * @param {import("../style/Style.js").default|Array<import("../style/Style.js").default>|import("../style/Style.js").StyleFunction|null|undefined} style Layer style.
  * @api
  */
  setStyle(style) {
    this.style_ = style !== undefined ? style : createDefaultStyle;
    this.styleFunction_ = style === null ?
      undefined : toStyleFunction(this.style_);
    this.changed();
  }

动态样式化Openlayers中的矢量层样式，而无需刷新地图

1 个答案: