javascript - 在不刷新地图的情况下动态设置 Openlayers 中的矢量图层样式
问题描述
我正在尝试使用 HTML<input type="color">
元素动态更改地图中 GeoJSON 图层的颜色。我的代码有效,但图层填充对象的颜色参数仅在我移动地图或放大/缩小时刷新。有什么方法可以即时执行此操作吗?我正在使用 setColor() 函数来编辑颜色属性的值。
//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);
}
解决方案
设置对象的私有属性不会产生事件。使用记录在案的 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();
}
推荐阅读
- karate - 在 Jenkins 中跳过空手道执行
- reactjs - 如何在 Ion React 中将侧边菜单与选项卡导航相结合
- java - 如何修复多次单击按钮(数据库测验应用程序)
- azure - 针对 ProtectedWebWebi 的 Azure AD 身份验证
- python - 通过从 python 文件中引用来安装 requirements.txt 中存在的包
- python - 如何使用自定义相等函数从 Python 中的自定义对象列表中删除重复项?
- flutter - Flutter/解析部分url
- etag - minio etag是如何生成的
- pandas - 如何用 max() 值填充熊猫数据框
- bash - 如何识别如何运行脚本?