一个 .NET 开源的地图组件库 - Mapsui
前言
今天大姚给大家分享一个.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
优秀项目和框架精选
该项目已收录到C#/.NET/.NET Core优秀项目和框架精选中,关注优秀项目和框架精选能让你及时了解C#、.NET和.NET Core领域的最新动态和最佳实践,提高开发工作效率和质量。坑已挖,欢迎大家踊跃提交PR推荐或自荐(让优秀的项目和框架不被埋没)。
DotNetGuide技术社区交流群
- DotNetGuide技术社区是一个面向.NET开发者的开源技术社区,旨在为开发者们提供全面的C#/.NET/.NET Core相关学习资料、技术分享和咨询、项目框架推荐、求职和招聘资讯、以及解决问题的平台。
- 在DotNetGuide技术社区中,开发者们可以分享自己的技术文章、项目经验、学习心得、遇到的疑难技术问题以及解决方案,并且还有机会结识志同道合的开发者。
- 我们致力于构建一个积极向上、和谐友善的.NET技术交流平台。无论您是初学者还是有丰富经验的开发者,我们都希望能为您提供更多的价值和成长机会。
一个 .NET 开源的地图组件库 - Mapsui的更多相关文章
- Vite+TS带你搭建一个属于自己的Vue3组件库
theme: nico 前言 随着前端技术的发展,业界涌现出了许多的UI组件库.例如我们熟知的ElementUI,Vant,AntDesign等等.但是作为一个前端开发者,你知道一个UI组件库是如何被 ...
- .NET 开源免费图表组件库,Winform,WPF 通用
大家好, 我是等天黑, 今天给大家介绍一个功能完善, 性能强悍的图表组件库 ScottPlot, 当我第一次在 github 上看到这个库, 我看不懂,但我大受震撼, 这么好的项目当然要分享出来了. ...
- 创建一个自己的Vue UI组件库,并将它发布在npm上
本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新 ...
- 一个实用的 vite + vue3 组件库脚手架工具,提升开发效率
无论是 vue2 全家桶还是 vue3 + vite + TypeScript,组件库的使用几乎大家都会,但自己开发一个独立组件库就不是每个人都掌握的,因为搭建组件库的基础开发环境,就会让很多同学望而 ...
- PyQt-Fluent-Widgets:一个 Fluent Design 风格的组件库
简介 这是一个使用 PyQt/PySide 编写的 Fluent Design 风格的组件库,包含最常用的组件,支持亮暗主题无缝切换.实际上此项目是从 Groove Music 项目剥离出来的子项目, ...
- beeshell —— 开源的 React Native 组件库
介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
- 滴滴开源 Vue 组件库— cube-ui
cube-ui 是滴滴去年底开源的一款基于 Vue.js 2.0 的移动端组件库,主要核心目标是做到体验极致.灵活性强.易扩展以及提供良好的周边生态-后编译. 自 17 年 11 月开源至今已有 5 ...
- 使用webpack4搭建一个基于Vue的组件库
组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...
- Antd组件库,利用Menu组件模拟一个简单Tree组件
当前工作中,前端的主要技术栈用是vue. 那React怎么办呢?总不至于把他扔在墙角吧! 只能在一些很小的项目上,也只有自己一个前端的时候,悄悄的上React. 当然,React项目UI组件还是最喜欢 ...
- Vue2.0+组件库总结
转自:https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套 ...
随机推荐
- 第八篇:socket网络编程
一.网络编程简绍 二.socket连接过程 三.socket文件传输 四.socket循环接收 五.socket粘包处理 六.FTP文件传输 七.socketServer 八.web框架 #!/usr ...
- 重新整理 .net core 实践篇—————应用层[三十]
前言 简单介绍一下应用层. 正文 应用层用来做什么的呢? 应用层用来做处理api请求的. [HttpPost] public Task<long> CreateOrder([FromBod ...
- vue watch的this 到底是什么?
正文 watch: { value: (newV, oldV) => { this.a = newV; } } 加入该vue对象中,data 有: { data:{ a:5 } } 那么请问,如 ...
- LeetCode:999. 车的可用捕获量
999. 车的可用捕获量 在一个 8 x 8 的棋盘上,有一个白色车(rook).也可能有空方块,白色的象(bishop)和黑色的卒(pawn).它们分别以字符 "R"," ...
- marquee实现滚动
marquee的基本语法:<marquee> ... </marquee> 参数:1.滚动方向 (direction):left(左).right(右).up(上).down( ...
- 同义词查找,关键词扩展,使用腾讯Tencent AILAB的800万词向量,gensim,annoy
最近在做一个关键词匹配系统,为了更好的效果, 添加一个关键词扩展的功能.使用Tencent AIlab的800万词向量文件. 腾讯AILAB的800万词向量下载地址:https://ai.tencen ...
- 修改中文、英文参考文献在文末列表中的顺序:EndNote
本文介绍在EndNote软件中,使得参考文献按照语种排列,中文在前.英文在后的方法. 前期我们在EndNote参考文献格式Output Styles界面介绍一文中,详细介绍了文献管理软件End ...
- Qt 从 QTransform 逆向解出 Translate/Scale/Rotate(平移/缩放/旋转)分析
QTransform 用于图形绘制,它定义了如何平移(translate).缩放(scale).切变(shear).旋转(rotate)或投射(project)坐标系.注意:QTransform 是作 ...
- Oracle 数据库误删操作闪回
Oracle 数据库误删操作闪回 闪回功能是内置的,类似于服务器快照,看运气要在的数据在不在 select * from testtable as of timestamp to_timestamp( ...
- 力扣162(java&python)-寻找峰值(中等)
题目: 峰值元素是指其值严格大于左右相邻值的元素. 给你一个整数数组 nums,找到峰值元素并返回其索引.数组可能包含多个峰值,在这种情况下,返回 任何一个峰值 所在位置即可. 你可以假设 nums[ ...