Blazor地图概述

的Blazor地图组件显示按层组织的地理空间信息。

该组件提供砖层，形状(矢量)图层，泡沫层,标志层．

的一部分《Blazor》的teleerik UI，一个专业级的UI库，有100个本地组件，用于构建现代和功能丰富的应用程序。要想尝试一下，注册一个30天的免费试用。

免费下载试用版

创建Blazor地图

1. 使用TelerikMap标记将组件添加到razor页面。

2. 添加MapLayer标签嵌套在里面MapLayers．

3. 设置类型财产。

4. 设置归因和子域属性。

5. 提供UrlTemplate财产．

@*这个代码片段展示了一个基本Map配置的例子。*@       @code {public string[] Subdomains {get;设置;} = new string[] {"a"， "b"， "c"};公共字符串UrlTemplate {get;设置;} = " https:// # =子域名# .tile.openstreetmap.org/ # =变焦# / # = x # # = y # . png”;属性{获取;设置; } = "© OpenStreetMap contributors"; }

层

这些层负责组织Map信息。阅读更多关于支持的Blazor地图层…

标记

你可以在地图上用真实坐标添加不同的点作为标记。阅读更多关于Blazor地图标记…

平移和缩放

缩放操作可以通过双击地图或使用鼠标滚轮来执行。可以设置缩放级别变焦财产。

最终用户可以通过按住鼠标左键并将地图拖到所需位置来平移控件。

栅格地图被分成图像(图块)，以便在网络上提供服务。贴图通常是256px的正方形。顶层(缩放级别0)将整个世界显示为单个贴图。每个渐进缩放级别都会使地图的大小增加一倍。

Blazor Map还集成了一个导航工具，允许最终用户轻松缩放，平移和更改当前视图。控件可以更改导航工具的位置MapControlsNavigator。位置枚举。

事件

Blazor Map生成事件，您可以处理这些事件并进一步自定义其行为。阅读更多关于Blazor地图事件的信息…．

方法

Map方法可以通过它的引用来访问。

• 刷新-重新绘制组件。

@*这个代码片段展示了Refresh()方法的一个示例用法。*@ 更改大小! 
       @code {TelerikMap MapRef {get;设置;}公共双缩放{获取;设置;} = 4;公共无效ChangeZoom(){缩放= 1;MapRef.Refresh (); } public string[] Subdomains { get; set; } = new string[] { "a", "b", "c" }; public string UrlTemplate { get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"; public string Attribution { get; set; } = "© OpenStreetMap contributors"; }

参数

Blazor Map提供了各种参数，允许您配置组件:

MapControls参数

以下MapControlsAttribution参数使您能够自定义Blazor地图控件的外观:

以下MapControlsNavigator参数使您能够自定义Blazor地图控件的外观:

以下MapControlsZoom参数使您能够自定义Blazor地图控件的外观:

下一个步骤

配置平铺图层

使用地图事件

另请参阅

• 现场演示:地图