如何基于ASPxGridView聚焦行动态更改Azure Maps JS SDK符号颜色？

可以通过数据驱动样式或动态更新数据源属性实现需求，你提到的iconOptions是可行方向，结合ASPxGridView的FocusedRowIndex变化触发更新即可，具体实现步骤如下：

实现方案 #

1. 初始化地图时配置数据驱动样式 #

创建符号图层时，不要写死颜色值，而是绑定到数据源的自定义属性（比如isFocused），用Azure Maps的表达式语法实现条件切换：

// 创建符号图层
const symbolLayer = new atlas.layer.SymbolLayer(dataSource, null, {
    iconColor: [
        'case',
        ['boolean', ['get', 'isFocused'], false],
        '#ff0000', // 聚焦行对应的图钉颜色
        '#0078d7'  // 默认颜色
    ],
    // 其他符号配置（如图标大小、偏移等）
});
map.layers.add(symbolLayer);

这里通过case表达式判断要素的isFocused属性值，自动切换图钉颜色。

2. 绑定ASPxGridView聚焦行变化事件 #

在ASPxGridView的客户端FocusedRowChanged事件中，更新数据源对应要素的属性，触发图层样式重绘：

// 假设dataSource是Azure Maps数据源实例，grid是ASPxGridView客户端对象
function onFocusedRowChanged(s, e) {
    const focusedRowIndex = s.GetFocusedRowIndex();
    const focusedRowId = s.GetRowKey(focusedRowIndex); // 获取聚焦行的guid

    // 获取数据源所有要素，重置聚焦状态
    dataSource.getSource().then(features => {
        features.forEach(feature => {
            feature.properties.isFocused = false;
        });

        // 找到聚焦行对应的要素，设置聚焦状态
        const focusedFeature = features.find(f => f.properties.id === focusedRowId);
        if (focusedFeature) {
            focusedFeature.properties.isFocused = true;
        }

        // 通知数据源更新，触发图层重绘
        dataSource.setShapes(features);
    });
}

3. 利用iconOptions属性的替代方案 #

如果想直接通过数据源的iconOptions控制颜色，可在图层初始化时绑定该属性，再动态更新：

// 初始化符号图层，绑定iconOptions中的颜色属性
const symbolLayer = new atlas.layer.SymbolLayer(dataSource, null, {
    iconColor: ['get', 'iconOptions.color'],
    // 可扩展绑定其他图标属性，如iconSize: ['get', 'iconOptions.size']
});

然后在聚焦行变化事件中更新对应要素的iconOptions.color：

function onFocusedRowChanged(s, e) {
    const focusedRowIndex = s.GetFocusedRowIndex();
    const focusedRowId = s.GetRowKey(focusedRowIndex);

    dataSource.getSource().then(features => {
        features.forEach(feature => {
            feature.properties.iconOptions.color = '#0078d7'; // 默认颜色
        });

        const focusedFeature = features.find(f => f.properties.id === focusedRowId);
        if (focusedFeature) {
            focusedFeature.properties.iconOptions.color = '#ff0000'; // 聚焦颜色
        }

        dataSource.setShapes(features);
    });
}

关键注意事项 #

• 确保数据源每个要素的id属性与ASPxGridView的行key（guid）完全匹配，保证精准定位要素。
• 更新属性后必须调用dataSource.setShapes()或feature.setProperties()触发图层重绘，否则样式不会生效。
• Azure Maps表达式语法支持match等更复杂的条件判断，可适配多状态颜色规则。

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