前言

今天大姚给大家分享一个.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. mysql 悲观锁和乐观锁(二)

    前言 简单介绍一下,在mysql 优化系列中会重新介绍,仅仅是留个印象. 悲观锁和乐观锁其实都是概念性问题. 正文 悲观锁: 悲观锁,正如其名,具有强烈的独占和排他特性. 它指的是对数据被外界(包括本 ...

  2. 千万级可观测数据采集器--iLogtail代码完整开源

    简介: 2022年6月29日,阿里云iLogtail开源后迎来首次重大更新,正式发布完整功能的iLogtail社区版.本次更新开源全部C++核心代码,该版本在内核能力上首次对齐企业版,开发者可以构建出 ...

  3. dubbogo 3.0:牵手 gRPC 走向云原生时代

    作者 | 李志信  于雨来源|阿里巴巴云原生公众号 自从 2011 年 Dubbo 开源之后,被大量中小公司采用,一直是国内最受欢迎的 RPC 框架.2014 年,由于阿里内部组织架构调整,Dubbo ...

  4. EDAS 4.0 助力企业一站式实现微服务架构转型与 K8s 容器化升级

    ​简介: EDAS 正式来到 4.0 时代,发布多项重磅新能力:同时联合新产品-云原生应用设计开发平台 ADD 1.0,一起发布云原生应用研发&运维 PaaS 产品家族,助力企业应用架构现代化 ...

  5. HTML中元素分类与对应的CSS样式特点

    元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~ ...

  6. [GPT] 有哪些人工智能辅助工具?

      开发人工智能辅助工具可以帮助人们更高效地完成各种任务,并提高生产力和创造力.这些工具可以基于机器学习.深度学习等技术,通过对大量数据进行分析和学习,提供自动化的解决方案. 例如,一个文本翻译工具可 ...

  7. [Go] go build 和 go install 的区别

    $ go build 源文件及其包依赖 编译成二进制. install 不仅执行build过程 而且会把编译的二进制放到 $GOPATH/bin/,包放到 $GOPATH/pkg/ Link:http ...

  8. [FAQ] Golang error strings should not be capitalized or end with punctuation

    当我们在 Golang 中使用 errors.New("Aaa.") 形式返回 error 信息时,文字内容不应该以大写字母开头或者标点符号结尾. 所以这样是可以的 errors. ...

  9. [Caddy2] Caddyfile 指令

    以下是 Caddyfile 的标准指令. acme_server An embedded ACME server basicauth Enforces HTTP Basic Authenticatio ...

  10. WPF 已知问题 传入错误数据给到 WriteableBitmap 可能导致渲染线程锁住

    本文记录一个 WPF 已知问题,此问题已经被我修复.传入错误的数据给到 WriteableBitmap 对象,比如调用 WritePixels 时传入错误的 stride 数值,将可能导致渲染线程进入 ...