如何在Xamarin Android的MAPSUI中使用Mapbox等在线矢量瓦片源？

MAPSUI目前没有内置的Mapbox在线矢量瓦片源，但可以通过自定义TileSource结合矢量渲染管线实现，以下是具体步骤：

1. 自定义在线矢量瓦片源 #

创建继承自TileSource的类，构造Mapbox的矢量瓦片请求URL。Mapbox在线矢量瓦片的标准格式为https://api.mapbox.com/v4/{mapId}/{z}/{x}/{y}.vector.pbf?access_token={yourAccessToken}。

using Mapsui.Tiling;
using Mapsui.Utilities;

public class MapboxVectorTileSource : TileSource
{
    private readonly string _mapId;
    private readonly string _accessToken;

    public MapboxVectorTileSource(string mapId, string accessToken)
    {
        _mapId = mapId;
        _accessToken = accessToken;
        // 匹配Mapbox默认坐标系，与MAPSUI默认一致
        CRS = "EPSG:3857";
        // Mapbox矢量瓦片默认尺寸为512x512
        TileWidth = 512;
        TileHeight = 512;
    }

    public override Uri GetTileUri(int x, int y, int zoomLevel)
    {
        // Mapbox瓦片Y轴索引与TMS标准相反，需翻转
        var flippedY = (int)Math.Pow(2, zoomLevel) - 1 - y;
        var url = $"https://api.mapbox.com/v4/{_mapId}/{zoomLevel}/{x}/{flippedY}.vector.pbf?access_token={_accessToken}";
        return new Uri(url);
    }
}

2. 加载矢量渲染样式 #

MAPSUI依赖样式文件（如Mapbox的style.json）解析并渲染矢量瓦片，你可以：

• 下载Mapbox官方样式文件到本地，放入Xamarin Android的Resources/Raw目录
• 直接请求在线样式（需注意网络权限与缓存策略）

以下是加载本地样式并创建矢量图层的代码：

using Mapsui.Layers;
using Mapsui.Nts;
using Mapsui.Rendering.Skia.Styles;

// 初始化自定义瓦片源，替换为你的Mapbox参数
var mapboxSource = new MapboxVectorTileSource("mapbox.streets-v11", "your-mapbox-access-token");

// 加载本地style.json资源
var styleJson = LoadStyleFromRawResource(Resources, Resource.Raw.mapbox_streets_style);

// 创建矢量图层
var vectorLayer = new VectorLayer("Mapbox Vector Layer")
{
    DataSource = new VectorTileDataSource(mapboxSource),
    Style = VectorStyle.CreateFromJson(styleJson)
};

// 辅助方法：从Raw资源读取样式文本
private string LoadStyleFromRawResource(Resources resources, int resourceId)
{
    using var stream = resources.OpenRawResource(resourceId);
    using var reader = new StreamReader(stream);
    return reader.ReadToEnd();
}

3. 将图层添加到MapControl #

最后把矢量图层挂载到MAPSUI的MapControl中：

var mapControl = FindViewById<MapControl>(Resource.Id.mapControl);
mapControl.Map.Layers.Add(vectorLayer);
mapControl.Map.NavigateTo(0, 0, 1); // 设置初始视角

注意事项 #

• Mapbox Access Token：需在Mapbox官网申请，注意配额限制与权限范围，避免请求超限。
• 样式匹配：确保style.json与指定的mapId瓦片匹配，比如mapbox.streets-v11对应街道样式。
• 网络权限：在AndroidManifest.xml中添加<uses-permission android:name="android.permission.INTERNET" />，允许应用访问网络。

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