前言

今天大姚給大家分享一個(gè).NET開(kāi)源（MIT License）、免費(fèi)、同時(shí)支持多平臺(tái)框架（MAUI、WPF、Avalonia、Uno、Blazor、WinUI、Eto、.NET Android 和 .NET iOS）地圖組件庫(kù)：Mapsui。

項(xiàng)目源代碼

支持的UI框架的NuGet包

創(chuàng)建Blazor WebAssembly應(yīng)用

創(chuàng)建名為：MapsuiExercise的Blazor WebAssembly應(yīng)用。

安裝Mapsui.Blazor NuGet包

在NuGet包管理器中搜索：Mapsui.Blazor安裝。

地圖組件完整代碼

@page "/"
@using Mapsui.UI.Blazor

<PageTitle>MapsuiExercise</PageTitle>
<div class="container">
    <div class="row">
        <div class="col border rounded p-2 canvas-container">
            <MapControlComponent @ref="_mapControl" />
        </div>
    </div>
</div>

<style>
    .canvas-container canvas {
        width: 100%;
        height: 80vh;
    }
</style>

@code
{
    private MapControl? _mapControl;
    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        if (firstRender)
        {
            if (_mapControl != null)
                _mapControl.Map?.Layers.Add(Mapsui.Tiling.OpenStreetMap.CreateTileLayer());
        }
    }
}

運(yùn)行效果展示

項(xiàng)目源碼地址

• GitHub開(kāi)源地址：https://github.com/Mapsui/Mapsui
• 示例源碼地址：https://github.com/YSGStudyHards/DotNetExercises/tree/master/MapsuiExercise