如何在WPF的Mapsui OpenStreetMap中添加经纬度标记？

核心问题分析 #

你的代码仅定义了坐标点，但未创建标记图层和标记要素，所以地图上不会显示标记。另外Mapsui默认使用EPSG:3857（Web墨卡托）坐标系，你输入的是WGS84经纬度（EPSG:4326），需要完成坐标转换；同时MPoint的参数顺序是经度在前、纬度在后，你之前的赋值顺序颠倒了，这也是标记无法正常显示的原因之一。

完整实现步骤 #

1. 坐标转换 #

将WGS84经纬度转换为Mapsui默认的Web墨卡托坐标：

// 注意：MPoint构造参数顺序是 (经度, 纬度)
var beginLatLon = new MPoint(78.96288, 20.593684);
var beginWebMercator = beginLatLon.ToMapUnit(); // 转Web墨卡托

var endLatLon = new MPoint(-91.969028, 34.544261);
var endWebMercator = endLatLon.ToMapUnit();

2. 创建标记图层与要素 #

Mapsui需要通过VectorLayer承载标记，每个标记对应一个Feature对象：

// 创建标记图层
var markerLayer = new VectorLayer("Markers");

// 起点标记
var beginFeature = new Feature();
beginFeature.Geometry = beginWebMercator;
beginFeature.Styles.Add(CreateMarkerStyle()); // 应用标记样式

// 终点标记
var endFeature = new Feature();
endFeature.Geometry = endWebMercator;
endFeature.Styles.Add(CreateMarkerStyle(Colors.Red));

// 将标记添加到图层
markerLayer.Features.Add(beginFeature);
markerLayer.Features.Add(endFeature);

// 将标记图层添加到地图
mapControl.Map?.Layers.Add(markerLayer);

3. 自定义标记样式（支持默认圆点/自定义图片） #

你可以选择使用默认圆点标记，也可以替换为自定义图片：

private IStyle CreateMarkerStyle(Color? color = null)
{
    // 方式1：默认蓝色圆点标记
    if (color == null)
        return new SymbolStyle();
    
    // 方式2：自定义颜色的圆点标记
    return new SymbolStyle
    {
        Fill = new Brush(color.Value),
        Stroke = new Brush(Colors.Black),
        StrokeWidth = 1,
        SymbolScale = 1.5
    };

    // 方式3：自定义图片标记（替换为你的图片路径）
    // var bitmap = new BitmapImage(new Uri("pack://application:,,,/Assets/marker.png"));
    // return new SymbolStyle
    // {
    //     BitmapId = mapControl.Map?.BitmapRegistry.Register(bitmap),
    //     SymbolScale = 0.5
    // };
}

4. 修正地图缩放范围 #

使用转换后的Web墨卡托坐标完成地图缩放：

mapControl.ZoomToBox(beginWebMercator, endWebMercator);

完整后台代码 #

替换你的MainWindow代码：

using Mapsui;
using Mapsui.Layers;
using Mapsui.Styles;
using Mapsui.Tiling;
using Mapsui.UI.Wpf;
using System.Windows;
using System.Windows.Media;

namespace Newmap
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var mapControl = new MapControl();

            // 添加OpenStreetMap底图图层
            mapControl.Map?.Layers.Add(OpenStreetMap.CreateTileLayer());

            // 经纬度转Web墨卡托坐标
            var beginLatLon = new MPoint(78.96288, 20.593684);
            var beginWebMercator = beginLatLon.ToMapUnit();
            var endLatLon = new MPoint(-91.969028, 34.544261);
            var endWebMercator = endLatLon.ToMapUnit();

            // 创建并添加标记图层
            var markerLayer = new VectorLayer("Markers");
            
            var beginFeature = new Feature { Geometry = beginWebMercator };
            beginFeature.Styles.Add(CreateMarkerStyle());
            markerLayer.Features.Add(beginFeature);

            var endFeature = new Feature { Geometry = endWebMercator };
            endFeature.Styles.Add(CreateMarkerStyle(Colors.Red));
            markerLayer.Features.Add(endFeature);

            mapControl.Map?.Layers.Add(markerLayer);

            // 缩放至包含所有标记的范围
            mapControl.ZoomToBox(beginWebMercator, endWebMercator);

            Content = mapControl;
        }

        private IStyle CreateMarkerStyle(Color? color = null)
        {
            if (color == null)
                return new SymbolStyle();

            return new SymbolStyle
            {
                Fill = new Brush(color.Value),
                Stroke = new Brush(Colors.Black),
                StrokeWidth = 1,
                SymbolScale = 1.5
            };

            // 若使用自定义图片，取消注释以下代码并替换路径
            // var bitmap = new BitmapImage(new Uri("pack://application:,,,/Assets/marker.png"));
            // return new SymbolStyle
            // {
            //     BitmapId = mapControl.Map?.BitmapRegistry.Register(bitmap),
            //     SymbolScale = 0.5
            // };
        }
    }
}

关于标记图片的问题 #

不是必须使用图片，Mapsui自带的SymbolStyle可以生成圆点标记；如果需要更个性化的视觉效果，才需要添加自定义图片，代码中已包含图片标记的实现示例，只需替换图片路径即可。

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