如何标记Azure Maps中点击的要素及解决弹窗位置异常

一、高亮点击的要素 #

以下两种方式可实现点击要素的视觉识别：

方式1：新增CircleLayer显示选中标记 #

创建独立的数据源和图层，专门渲染选中要素的标记（比如红色圆点）：

// 初始化选中要素的数据源与图层
DataSource selectedDataSource = new DataSource();
map.sources.add(selectedDataSource);

CircleLayer selectedLayer = new CircleLayer(selectedDataSource, 
    circleColor("red"),
    circleRadius(8),
    circleStrokeColor("white"),
    circleStrokeWidth(2)
);
map.layers.add(selectedLayer);

// 要素点击事件中更新选中数据源
map.events.add((OnFeatureClick)(feature) -> {
    Feature f = feature.get(0);
    // 清空之前的选中标记
    selectedDataSource.clear();
    // 添加当前选中要素到数据源
    selectedDataSource.add(f);

    // 原有弹窗逻辑...
    return true;
});

// 点击地图空白处清空选中标记
map.events.add((OnClick) (lat, lon) -> {
    selectedDataSource.clear();
    popup.close();
    return true;
});

方式2：动态修改原SymbolLayer样式 #

通过给要素添加自定义属性，用样式表达式切换选中状态：

1. 初始化SymbolLayer时配置动态样式：

SymbolLayer symbolLayer = new SymbolLayer(dataSource,
    iconImage("your-icon-id"),
    iconColor(
        switchCase(
            eq(get("isSelected"), true),
            "red", // 选中时的图标颜色
            "blue" // 默认图标颜色
        )
    )
);
map.layers.add(symbolLayer);

2. 点击事件中更新要素选中属性：

map.events.add((OnFeatureClick)(feature) -> {
    // 重置所有要素的选中状态（可选，若仅允许单选）
    dataSource.getFeatures().forEach(f -> f.removeProperty("isSelected"));

    Feature f = feature.get(0);
    // 设置当前要素为选中状态
    f.setProperty("isSelected", true);
    dataSource.updateFeature(f);

    // 原有弹窗逻辑...
    return true;
});

// 点击地图空白处重置选中状态
map.events.add((OnClick) (lat, lon) -> {
    dataSource.getFeatures().forEach(f -> f.removeProperty("isSelected"));
    popup.close();
    return true;
});

二、弹窗与要素重叠的问题解决 #

弹窗重叠主要是锚点设置不匹配+重复添加事件导致，修改方案如下：

// 地图点击关闭弹窗的事件只添加一次，放在外层
map.events.add((OnClick) (lat, lon) -> {
    popup.close();
    // 同步清空选中标记（如果用了上述选中逻辑）
    selectedDataSource.clear();
    return true;
});

map.events.add((OnFeatureClick)(feature) -> {
    Feature f = feature.get(0);
    View customView = LayoutInflater.from(this).inflate(R.layout.popup_text, null);
    TextView tv = customView.findViewById(R.id.message);
    tv.setText(f.getStringProperty("Name") + "\n" + f.getStringProperty("Pvm"));

    Position pos = MapMath.getPosition((Point)f.geometry());

    popup.setOptions(
        position(pos),
        // 调整弹窗锚点为TOP，让弹窗顶部对齐要素中心，避开图标
        anchor(AnchorType.TOP),
        // 可选：添加偏移量，让弹窗向上移动（数值根据图标大小调整）
        offset(new Pixel(0, -20)),
        content(customView),
        closeButton(false)
    );

    popup.open();
    return true;
});

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