《Blazor》的teleerik UI免费下载30天试用版

泡沫层

泡沫层允许您在地理位置上创建不同类型的形状,并通过与形状相关的值计算半径。

地图组件根据数据源中可用的最大值和最小值自动计算气泡的半径。

控件定义表示形状的位置和值的数据源字段LocationFieldValueField的性质MapLayer标签。

选项设置气泡的样式MapLayerBubbleSettings内标签-MapLayerBubbleSettingsStyle

配置一个类型为Bubble的映射层:

  1. 添加TelerikMap标签。
  2. 设置类型的参数。MapLayer泡沫
  3. 设置数据参数。
  4. 设置LocationFieldValueField参数。

下面的示例演示如何配置Map Bubble Layer。

地图气泡层配置。

这个代码片段展示了一个Bubble Layer配置的例子。*@     < MapLayerBubbleSettingsStyle>                < maplayertype ="@MapLayersType。标记" Data="@MarkerData1" LocationField="@nameof(MarkerModel.LatLng)"TitleField = " @nameof (MarkerModel.Title)">    @code{公共字符串[]子域{get;设置;} = new string[] {"a", "b", "c"};公共字符串UrlTemplate {get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"; public string Attribution { get; set; } = "© OpenStreetMap contributors"; public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 }; public List MarkerData1 { get; set; } = new List() { new MarkerModel() { LatLng = new double[] { 30.268107, -97.744821 }, Title = "Austin, TX" } }; public List MarkerData2 { get; set; } = new List() { new MarkerModel() { LatLng = new double[] { 37.7749, -122.4194 }, Title = "San Francisco, CA" } }; public List BubbleData { get; set; } = new List() { new BubbleModel() { LatLng = new double[] { 37.7749, -122.4194 }, Revenue = 1000 }, new BubbleModel() { LatLng = new double[] { 41.8781, -87.6298 }, Revenue = 200 } }; public class MarkerModel { public double[] LatLng { get; set; } public string Title { get; set; } } public class BubbleModel { public double[] LatLng { get; set; } public int Revenue { get; set; } } }

上述代码片段的结果。

Blazor地图气泡层

在本文中
Baidu
map