前言

今天大姚给大家分享一个.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支持。

优秀项目和框架精选

该项目已收录到C#/.NET/.NET Core优秀项目和框架精选中,关注优秀项目和框架精选能让你及时了解C#、.NET和.NET Core领域的最新动态和最佳实践,提高开发工作效率和质量。坑已挖,欢迎大家踊跃提交PR推荐或自荐(让优秀的项目和框架不被埋没)。

DotNetGuide技术社区交流群

  • DotNetGuide技术社区是一个面向.NET开发者的开源技术社区,旨在为开发者们提供全面的C#/.NET/.NET Core相关学习资料、技术分享和咨询、项目框架推荐、求职和招聘资讯、以及解决问题的平台。
  • 在DotNetGuide技术社区中,开发者们可以分享自己的技术文章、项目经验、学习心得、遇到的疑难技术问题以及解决方案,并且还有机会结识志同道合的开发者。
  • 我们致力于构建一个积极向上、和谐友善的.NET技术交流平台。无论您是初学者还是有丰富经验的开发者,我们都希望能为您提供更多的价值和成长机会。

欢迎加入DotNetGuide技术社区微信交流群‍‍

一个 .NET 开源的地图组件库 - Mapsui的更多相关文章

  1. Vite+TS带你搭建一个属于自己的Vue3组件库

    theme: nico 前言 随着前端技术的发展,业界涌现出了许多的UI组件库.例如我们熟知的ElementUI,Vant,AntDesign等等.但是作为一个前端开发者,你知道一个UI组件库是如何被 ...

  2. .NET 开源免费图表组件库,Winform,WPF 通用

    大家好, 我是等天黑, 今天给大家介绍一个功能完善, 性能强悍的图表组件库 ScottPlot, 当我第一次在 github 上看到这个库, 我看不懂,但我大受震撼, 这么好的项目当然要分享出来了. ...

  3. 创建一个自己的Vue UI组件库,并将它发布在npm上

    本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新 ...

  4. 一个实用的 vite + vue3 组件库脚手架工具,提升开发效率

    无论是 vue2 全家桶还是 vue3 + vite + TypeScript,组件库的使用几乎大家都会,但自己开发一个独立组件库就不是每个人都掌握的,因为搭建组件库的基础开发环境,就会让很多同学望而 ...

  5. PyQt-Fluent-Widgets:一个 Fluent Design 风格的组件库

    简介 这是一个使用 PyQt/PySide 编写的 Fluent Design 风格的组件库,包含最常用的组件,支持亮暗主题无缝切换.实际上此项目是从 Groove Music 项目剥离出来的子项目, ...

  6. beeshell —— 开源的 React Native 组件库

    介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...

  7. 滴滴开源 Vue 组件库— cube-ui

    cube-ui 是滴滴去年底开源的一款基于 Vue.js 2.0 的移动端组件库,主要核心目标是做到体验极致.灵活性强.易扩展以及提供良好的周边生态-后编译. 自 17 年 11 月开源至今已有 5 ...

  8. 使用webpack4搭建一个基于Vue的组件库

    组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...

  9. Antd组件库,利用Menu组件模拟一个简单Tree组件

    当前工作中,前端的主要技术栈用是vue. 那React怎么办呢?总不至于把他扔在墙角吧! 只能在一些很小的项目上,也只有自己一个前端的时候,悄悄的上React. 当然,React项目UI组件还是最喜欢 ...

  10. Vue2.0+组件库总结

    转自:https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套 ...

随机推荐

  1. gRPC入门学习之旅(六)

    gRPC入门学习之旅(一) gRPC入门学习之旅(二) gRPC入门学习之旅(三) gRPC入门学习之旅(四) gRPC入门学习之旅(五) 3.3.客户端编译生成GRPC类 1. 在"解决方 ...

  2. spark 计算前后两条记录之间的差(diff),时间差等

    有时候会遇到这样的场景:有一个datafram,我们需要计算同一组对象中,前后两条记录之间的差值,此处并不仅限于时间,还可以是其他的数据类型 需要用到两个工具:spark窗口函数Window对对象分组 ...

  3. identity4 系列————用户数据持久化篇[六]

    前言 前面的例子已经将各种情形下的例子已经介绍了一遍,那么后面就是用户数据持久化该如何处理了. 正文 例子位置: https://github.com/IdentityServer/IdentityS ...

  4. szfpga Lattice高速下载器HW-USBN-2B 常见问题解答

    .产品特点 1). 支持windows7,Windows10 操作系统,两个操作系统非常稳定不断线. 2). 支持JTAG 模式,速度快,最高30Mb/s,调试serdes core,不会像hw-us ...

  5. 数据分布算法:hash+ 一致性 hash + redis cluster 的 hash slot

    讲解分布式数据存储的核心算法,数据分布的算法 hash 算法 -> 一致性 hash 算法(memcached) -> redis cluster 的 hash slot 算法 用不同的算 ...

  6. javascript现代编程系列教程之X——javascript人工智能

    JavaScript 在人工智能(AI)领域的应用主要体现在以下几个方面: 浏览器端的机器学习:TensorFlow.js 是一个在浏览器中运行的 JavaScript 机器学习库,它允许开发者训练和 ...

  7. Spring 源码阅读(一)环境搭建

    注意事项: 使用 2024-03-14 发布的 Spring 5.3.33 版本 IDE 工具使用了 Intellij IDEA,同时为了简化不必要的内容没单独配置 Gradle 环境 JDK 版本采 ...

  8. 面试题 02.07(Java). 链表相交(简单)

    题目: 本题与:力扣160相交链表 一致 给你两个单链表的头节点 headA 和 headB ,请你找出并返回两个单链表相交的起始节点.如果两个链表没有交点,返回 null . 图示两个链表在节点 c ...

  9. 云效Codeup代码评审中的代码协同

    简介: 云效 Codeup 汇集了阿里巴巴最新的代码托管.代码协同技术,希望能够造福更多中国和世界的开发者. 大神说:"Show me the code",于是就有了代码评审. & ...

  10. dotnet 6 创建进程 Process.Start 时设置 UseShellExecute 在 Windows 下对性能的影响

    本文将告诉大家,在 dotnet 6 或 dotnet 7 版本里,启动新的进程时,在 StartInfo 设置 UseShellExecute 为 true 和 false 时,对性能的影响 在 d ...