Blazor地图概述

的Blazor Map组件显示分层组织的地理空间信息。

组件提供砖层，塑造(矢量)图层，泡沫层,标志层．

Map组件是为Blazor的Telerik UI，一个具有100个本地组件的专业级UI库，用于构建现代和功能丰富的应用程序。想要试用它，请注册一个30天的免费试用。

下载免费试用

创建Blazor地图

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

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”;公共字符串属性{get;设置; } = "© OpenStreetMap contributors"; }

层

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

标记

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

潘和Zoom

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

终端用户只需按住鼠标左键并将地图拖动到所需的位置，就可以移动控件。

栅格地图被划分为图像(瓷砖)，用于在网络上服务。瓷砖通常是256px的正方形。最顶层(缩放级别0)将整个世界显示为单个贴图。每一个渐进缩放级别都使地图的大小加倍。

Blazor地图还包含了一个导航工具，允许终端用户轻松缩放，平移和更改当前视图。方法可以更改导航工具的位置MapControlsNavigator。位置枚举。

事件

Blazor Map生成您可以处理和进一步定制其行为的事件。阅读更多关于Blazor地图事件…．

方法

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

• 刷新-重绘组件。

这段代码展示了Refresh()方法的示例用法。*@ 改变大小! 
 
       @code {TelerikMap MapRef {get;设置;} public double Zoom {get;设置;} = 4;public void ChangeZoom() {Zoom = 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地图控件的外观:

下一个步骤

配置平铺层

使用地图事件

另请参阅

• 现场演示:地图