颜色规则更新，layer.color()不执行

[fishhotter]

问题描述

"name": "@antv/l7",
"version": "2.19.11",
"name": "@antv/l7-maps",
"version": "2.19.11",
监听颜色和高度规则，动态更新颜色和高度
更新失效

重现链接

No response

重现步骤

let layer;
let scene;
const initLayer = () => {
// 创建3D柱状图图层
scene = new Scene({
id: map.getCanvasContainer(),
map: new Mapbox({
mapInstance: map
}),
logoVisible: false
});
scene.on('loaded', () => {
layer = new PointLayer({ zIndex: 10 })
.source([], {
parser: {
type: 'json',
y: 'y',
x: 'x'
}
})
.animate(true)
.active(true)
.shape('hexagonColumn')
.size('count', (h) => {
return [6, 6, h];
})
.color('color');
scene.addLayer(layer);
// layer?.hide();
// layer && layer.setData(pointsData.value);
});
};
initLayer();
const setColor = (d) => {
console.log('d-----------------------------------------------', d);
let color;
for (let index = 0; index < styleLegend.value.length; index++) {
const element = styleLegend.value[index];
const min = Number(element.min);
const max = Number(element.max);
if (min <= d && d < max) {
const rgbArr = element.color.replace('rgb(', '').replace(')', '').split(',');
rgbArr.push(element.opacity);
color = rgba(${rgbArr.join()});
}
}
console.log('setColor-------------------', color);
return color || '#FFDE74';
};
watch(
() => styleLegend.value,
(newVal) => {
console.log('--------------------------', newVal);
layer.color('count', setColor); //就第一次会进到callback 后面styleLegend改变，setColor没有执行
scene.render();
}
);

预期行为

希望layer.color('count', setColor);能够正常执行
目前setColor回调没有执行 颜色更新不成功
size也是一样的

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
  Windows64
  Google Chrome

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[github-actions]

hi @fishhotter, welcome!

[github-actions]

Hi @fishhotter, Please star this repo if you find it useful! Thanks ⭐!
你好 @fishhotter。如果该仓库对你有用，可以 star 一下，感谢你的 ⭐!

[lzxue]

需要调用scene.render 方法

[fishhotter]

有调用scene.render() 还是没有用额

watch(
() => styleLegend.value,
(newVal) => {
> console.log('--------------------------', newVal);
> layer.color('count', setColor); //就第一次会进到callback 后面styleLegend改变，setColor没有执行
> scene.render(); // 这里有调用啊 没有用额
}
);

[fishhotter]

把setColor直接写在回调里面就正常了，哦豁；是因为this吗

watch(
() => styleLegend.value,
(newVal) => {

console.log('--------------------------', newVal);
layer.color('count', (d) => {
console.log('d-----------------------------------------------', d);
let color;
for (let index = 0; index < styleLegend.value.length; index++) {
const element = styleLegend.value[index];
const min = Number(element.min);
const max = Number(element.max);
if (min <= d && d < max) {
const rgbArr = element.color.replace('rgb(', '').replace(')', '').split(',');
rgbArr.push(element.opacity);
color = rgba(${rgbArr.join()});
}
}
console.log('setColor-------------------', color);
return color || '#FFDE74';
}); // 这样放就可以了额
scene.render(); // 这里有调用啊 没有用额
}
);

[lzxue]

把setColor直接写在回调里面就正常了，哦豁；是因为this吗

watch(
() => styleLegend.value,
(newVal) => {

console.log('--------------------------', newVal);
layer.color('count', (d) => {
console.log('d-----------------------------------------------', d);
let color;
for (let index = 0; index < styleLegend.value.length; index++) {
const element = styleLegend.value[index];
const min = Number(element.min);
const max = Number(element.max);
if (min <= d && d < max) {
const rgbArr = element.color.replace('rgb(', '').replace(')', '').split(',');
rgbArr.push(element.opacity);
color = rgba(${rgbArr.join()});
}
}
console.log('setColor-------------------', color);
return color || '#FFDE74';
}); // 这样放就可以了额
scene.render(); // 这里有调用啊 没有用额
}
);

代码能不能加上代码标签,没法读

console.log('setColor-------------------', color);

[fishhotter]

 watch(
       () => styleLegend.value,
      (newVal) => {
         layer.color('count', (d) => {
              let color;
              for (let index = 0; index < styleLegend.value.length; index++) {
              const element = styleLegend.value[index];
              const min = Number(element.min);
              const max = Number(element.max);
              if (min <= d && d < max) {
              const rgbArr = element.color.replace('rgb(', '').replace(')', '').split(',');
              rgbArr.push(element.opacity);
              color = rgba(${rgbArr.join()});
              }
        }
      return color || '#FFDE74';
    }); // 回调这样放就可以了额
    scene.render(); 
 }
 );