MapsUI MAUI折线绘制失败求助：按示例操作折线仍不显示

核心问题分析 #

你的代码存在三个关键错误：

• 坐标系统不匹配：SphericalMercator.FromLonLat返回的是Web墨卡托投影坐标（米单位），但Mapsui.UI.Maui.Polyline的Position需要的是经纬度（WGS84），直接传入投影坐标会导致折线出现在错误位置。
• Position参数顺序错误：Position构造函数是(纬度, 经度)，你传入的是投影坐标的x/y（对应经度、纬度），顺序完全颠倒。
• 不必要的MapControl创建：你新建了一个MapControl但未使用，反而用XAML中的MapVi，造成逻辑混淆。

修正后的代码 #

InitializeComponent();
BindingContext = vm;

// 直接使用XAML中定义的MapVi控件
var map = MapVi.Map;
map?.Layers.Add(Mapsui.Tiling.OpenStreetMap.CreateTileLayer());

// 原始经纬度坐标
var targetLon = 15.01917;
var targetLat = 46.58806;

// 转换为Web墨卡托坐标用于地图定位
var mapPoint = SphericalMercator.FromLonLat(targetLon, targetLat);
map.Home = n => n.NavigateTo(new MPoint(mapPoint.x, mapPoint.y), map.Resolutions[12]);

// 创建折线，使用经纬度坐标
var line = new Mapsui.UI.Maui.Polyline 
{ 
    StrokeWidth = 5, // 150过于粗大，调整为合理值
    StrokeColor = Mapsui.UI.Maui.KnownColor.Red, 
    IsClickable = true 
};
// Position参数顺序：纬度在前，经度在后
line.Positions.Add(new Position(targetLat, targetLon));
// 添加第二个经纬度点（示例偏移0.01度）
line.Positions.Add(new Position(targetLat - 0.01, targetLon + 0.01));

MapVi.Drawables.Add(line);

关键说明 #

1. 坐标类型匹配：折线的Position必须使用经纬度，不能直接用Web墨卡托投影坐标。如果需要基于投影坐标计算偏移，需先转换回经纬度：

   var secondMapPoint = new MPoint(mapPoint.x + 1000, mapPoint.y - 1000); // 偏移1000米
   var secondLatLon = SphericalMercator.ToLonLat(secondMapPoint.x, secondMapPoint.y);
   line.Positions.Add(new Position(secondLatLon.y, secondLatLon.x));
   

2. StrokeWidth调整：150的线宽会导致折线超出地图视图范围，建议设置为5-10之间的合理值。
3. 复用现有控件：直接操作XAML中定义的MapVi，避免重复创建MapControl引发的上下文问题。

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