如何使用NeoVis 2.1.0实现节点动态图片显示？

问题场景 #

现有代码可给所有product节点显示固定图片：

labels: {
    product: {                  
        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
            static: { 
                shape: "image",
                image: "drone.svg"
            }
        }
    }   
},   

尝试两种写法根据节点image属性动态设置图片，均无效：

写法一：

labels: {
    product: {               
        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
            static: { 
                shape: "image",
                image: (props) => props.image
            }
        }
    },     
},        

写法二：

labels: {
    product: {
                 
      shape: 'image',
      image: function(node) {
        return node.properties.image ? node.properties.image  : null;
        }
    }     
},    

正确实现方式 #

要实现动态图片，需在高级配置中使用mappings字段（而非static）来绑定节点属性，以下两种方式都可行：

方式一：直接绑定属性（简单场景）

labels: {
    product: {                  
        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
            static: { 
                shape: "image"
            },
            mappings: {
                image: {
                    property: "image",
                    // 可选：属性为空时显示默认图片
                    fallback: "drone.svg"
                }
            }
        }
    }   
},   

方式二：自定义函数逻辑（复杂场景）

如果需要额外判断逻辑，可使用函数返回图片路径：

labels: {
    product: {                  
        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
            static: { 
                shape: "image"
            },
            mappings: {
                image: {
                    function: (node) => {
                        return node.properties.image ? node.properties.image : "drone.svg";
                    }
                }
            }
        }
    }   
},   

关键说明 #

• static仅用于设置固定不变的配置项（比如shape: "image"），不支持动态函数；
• mappings是NeoVis高级配置中用于绑定节点属性到可视化样式的专用字段，支持直接关联属性或自定义函数；
• 之前的写法错误在于要么在static中使用动态函数，要么未将配置放在NEOVIS_ADVANCED_CONFIG的正确层级下。

内容的提问来源于stack exchange，提问作者lix joy