前言
今天大姚给大家分享一个.NET开源(MIT License)、免费、同时支持多平台框架(MAUI、WPF、Avalonia、Uno、Blazor、WinUI、Eto、.NET Android 和 .NET iOS)地图组件库:Mapsui。
项目源代码
图片
支持的UI框架的NuGet包
图片
创建Blazor WebAssembly应用
创建名为:MapsuiExercise的Blazor WebAssembly应用。
图片
图片
图片
安装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());
}
}
}
运行效果展示
图片
图片
图片
项目源码地址
更多项目实用功能和特性欢迎前往项目开源地址查看👀,别忘了给项目一个Star支持💖。
- GitHub开源地址:https://github.com/Mapsui/Mapsui
- 示例源码地址:https://github.com/YSGStudyHards/DotNetExercises/tree/master/MapsuiExercise