syncfusion-aspnetcore-maps

Name: syncfusion-aspnetcore-maps
Author: syncfusion

github.com/syncfusion开发0107 次安装3 周前更新

代码仓库

关于 syncfusion-aspnetcore-maps

面向 ASP.NET Core 开发者的 Syncfusion Maps 实现指南，用于构建交互式地理可视化。内容涵盖图层、数据绑定、地图交互及地图提供商配置。

主要功能

01GeoJSON 图层与数据绑定
02标记、气泡和标签
03颜色映射与图例
04缩放、平移和选择
05地图提供商配置
06导出与无障碍功能指南

适用场景

01构建区域销售仪表板
02标注门店和兴趣点
03可视化人口或选举数据
04展示路线和天气地图

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-maps

安装后在 Claude Code 中输入/syncfusion-aspnetcore-maps确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

annotations.md

api-reference.md

bubbles.md

color-mapping.md

data-binding.md

data-labels.md

getting-started.md

layers-and-geojson.md

legend.md

map-providers.md

markers.md

user-interactions.md

详细介绍

实现 Syncfusion Maps for ASP.NET Core

Syncfusion Maps 组件是一款功能强大的工具，可使用可缩放矢量图形（SVG）可视化地理数据。它支持 GeoJSON 数据、多图层、地图提供商（Bing、Azure、OpenStreetMap），以及缩放、平移、工具提示和选择等丰富的交互功能。

适用场景

在以下情况下使用 Syncfusion Maps 组件：

可视化地理数据 - 在交互式地图上显示国家、州或区域数据
创建分级统计地图 - 使用颜色映射展示各区域的数据分布
绘制位置标记 - 显示兴趣点、办公室、商店或自定义位置
渲染气泡地图 - 在地理位置上使用按大小区分的气泡可视化定量数据
集成地图服务提供商 - 使用 Bing Maps、Azure Maps 或 OpenStreetMap 作为底图
显示自定义形状 - 为特定区域渲染自定义 GeoJSON 形状
构建交互式仪表板 - 创建可缩放、可平移并支持工具提示和选择的地图
显示导航路线 - 显示连接不同位置的导航线
叠加注释 - 在地图上添加自定义 HTML／文本注释
创建多图层可视化 - 在单张地图上组合多个数据图层

组件概述

主要功能：

📍 多图层 - 支持无限数量的图层和子图层，且可独立配置
🗺️ GeoJSON 支持 - 加载并渲染自定义地理形状
🌐 地图服务提供商 - 集成 Bing Maps、Azure Maps 和 OpenStreetMap
🎨 颜色映射 - 使用等值、范围和去饱和度配色方案可视化数据
📌 标记和气泡 - 使用可自定义标记和按大小区分的气泡绘制位置
🏷️ 数据标签 - 通过智能定位显示形状名称和数据值
🎯 交互功能 - 支持缩放、平移、工具提示、选择和高亮显示
📊 图例 - 为颜色映射、标记和气泡提供交互式图例
✏️ 注释 - 在特定坐标处叠加自定义 HTML
🌍 投影 - 支持 6 种地图投影类型
🖨️ 导出 - 将地图打印并导出为 PNG、JPEG、SVG、PDF 格式
♿ 无障碍访问 - 符合 WCAG 标准，支持键盘导航和屏幕阅读器

文档与导航指南

入门与安装

📄 阅读： references/getting-started.md

当用户需要：

首次设置 Maps 组件
安装 NuGet 包并配置依赖项
添加标记帮助器和脚本引用
使用 GeoJSON 数据创建基本地图
了解最低配置要求

图层与 GeoJSON 数据

📄 阅读： references/layers-and-geojson.md

当用户需要：

了解地图图层架构
使用 GeoJSON 格式和自定义形状
添加多个图层或子图层
从文件或 URL 加载 GeoJSON
配置图层可见性和顺序
处理特定于图层的设置

数据绑定与数据填充

📄 阅读： references/data-binding.md

当用户需要：

将数据源绑定到地图形状
配置 ShapeDataPath 和 ShapePropertyPath
将数据记录与地理形状匹配
绑定来自 JSON、数据库或 API 的数据
动态更新数据
转换数据以用于可视化

标记

📄 阅读： references/markers.md

当用户需要：

向地图添加位置标记
使用不同类型的标记（Circle、Image、Letter、Template）
自定义标记外观（大小、颜色、边框）
使用纬度／经度定位标记
添加标记工具提示和事件
实现标记聚类
创建自定义标记模板

气泡

📄 阅读： references/bubbles.md

当用户需要：

在地图上创建气泡可视化
根据数据值设置气泡大小
配置气泡颜色和不透明度
设置气泡半径的最小值和最大值
添加气泡工具提示
实现多个气泡集
处理气泡选择

数据标签

📄 阅读： references/data-labels.md

适用于用户需要：

在地图形状上显示标签
配置标签位置和对齐方式
使用智能标签模式（Trim、Hide、None）
自定义标签字体和样式
创建基于模板的标签
处理标签交叉
为标记和气泡添加标签

颜色映射

📄 阅读： references/color-mapping.md

适用于用户需要：

根据数据为形状应用颜色
配置等值颜色映射（值到颜色）
设置范围颜色映射（最小值-最大值范围）
使用去饱和度颜色映射（渐变不透明度）
创建分级设色地图
定义自定义调色板
处理无障碍访问和对比度

图例

📄 阅读： references/legend.md

适用于用户需要：

为地图添加图例
配置图例位置和对齐方式
启用交互式图例（切换、高亮）
自定义图例形状和文本
为颜色映射创建图例
为标记和气泡添加图例
为大量项目实现图例分页

注释

📄 阅读： references/annotations.md

适用于用户需要：

向地图添加自定义 HTML 内容
在特定坐标放置注释
创建文本或基于模板的注释
设置注释样式和对齐方式
处理注释的 z-index 和图层
添加动态注释
创建响应式注释

用户交互

📄 阅读： references/user-interactions.md

适用于用户需要：

启用缩放（鼠标滚轮、捏合、工具栏）
配置平移功能
使用自定义模板添加工具提示
实现形状选择和多选
启用悬停高亮
处理点击事件
添加位置之间的导航线
设置缩放级别和限制

地图提供商集成

📄 阅读： references/map-providers.md

适用于用户需要：

集成 Bing Maps（道路、航拍、混合）
使用 API 密钥设置 Azure Maps
使用 OpenStreetMap（OSM）切片
配置自定义切片服务器
将提供商与 GeoJSON 图层结合使用
处理提供商身份验证
比较提供商的功能和限制

高级功能

适用于用户需要：

使用自定义数据渲染多边形
添加带箭头的导航线
将地图打印或导出为图像/PDF
实现国际化（i18n）
配置本地化（l10n）
启用无障碍功能
实现状态持久化
使用编程方法
优化性能
从 EJ1 迁移到 EJ2

快速入门示例

使用 GeoJSON 和颜色映射的基本地图

@using Newtonsoft.Json
@using Syncfusion.EJ2.Maps

@{
    // Load GeoJSON data
    string geoJson = System.IO.File.ReadAllText("wwwroot/scripts/MapsData/WorldMap.json");
    var worldMapData = JsonConvert.DeserializeObject(geoJson);
    
    // Load data source
    string dataJson = System.IO.File.ReadAllText("wwwroot/scripts/MapsData/population.json");
    var populationData = JsonConvert.DeserializeObject(dataJson);
    
    // Define color mapping
    var colorMapping = new List<MapsColorMapping> {
        new MapsColorMapping { From = 0, To = 100000000, Color = "#C6E7F0", Label = "< 100M" },
        new MapsColorMapping { From = 100000000, To = 500000000, Color = "#6AB7D6", Label = "100M - 500M" },
        new MapsColorMapping { From = 500000000, To = 1500000000, Color = "#1A7FA0", Label = "> 500M" }
    };
    
    var propertyPath = new[] { "name" };
}

<ejs-maps id="maps" height="600px">
    <e-maps-titlesettings text="World Population by Country">
        <e-titlesettings-textstyle size="16px" fontWeight="500"></e-titlesettings-textstyle>
    </e-maps-titlesettings>
    
    <e-maps-legendsettings visible="true" position="Bottom"></e-maps-legendsettings>
    
    <e-maps-layers>
        <e-maps-layer shapeData="worldMapData" 
                      dataSource="populationData"
                      shapeDataPath="Country" 
                      shapePropertyPath="propertyPath">
            <e-layersettings-shapesettings 
                fill="#E5E5E5" 
                colorValuePath="Population"
                colorMapping="colorMapping">
            </e-layersettings-shapesettings>
            
            <e-layersettings-tooltipsettings visible="true" valuePath="Country" template="#tooltipTemplate">
            </e-layersettings-tooltipsettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

<div id="tooltipTemplate" style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">
    <h4 style="margin: 0 0 8px 0; color: #333;">${Country}</h4>
    <div style="font-size: 14px;">
        <div><strong>Population:</strong> ${Population}</div>
        <div><strong>Capital:</strong> ${Capital}</div>
    </div>
</div>

带标记的地图

@using Newtonsoft.Json
@using Syncfusion.EJ2.Maps

@{
    var worldMapData = JsonConvert.DeserializeObject(System.IO.File.ReadAllText("wwwroot/scripts/MapsData/WorldMap.json"));
    
    var cities = new[]
    {
        new { Name = "New York", Latitude = 40.7128, Longitude = -74.0060, Population = "8.4M" },
        new { Name = "Tokyo", Latitude = 35.6762, Longitude = 139.6503, Population = "13.9M" },
        new { Name = "London", Latitude = 51.5074, Longitude = -0.1278, Population = "9.0M" },
        new { Name = "Sydney", Latitude = -33.8688, Longitude = 151.2093, Population = "5.3M" }
    };

    var tooltip = new MapsTooltipSettings
    {
        Visible = true,
        ValuePath = "Name"
    };
}

<ejs-maps id="maps" height="600px">
    <e-maps-zoomsettings enable="true" zoomFactor="2"></e-maps-zoomsettings>
    
    <e-maps-layers>
        <e-maps-layer shapeData="worldMapData">
            <e-layersettings-shapesettings fill="#C3E6ED"></e-layersettings-shapesettings>
            
            <e-layersettings-markers>
                <e-layersettings-marker 
                    visible="true" 
                    dataSource="cities"
                    shape="Circle"
                    fill="#FF6347"
                    height="15"
                    width="15"
                    tooltipSettings="tooltip">
                </e-layersettings-marker>
            </e-layersettings-markers>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

API 参考

Maps 类

Maps 主要组件类，包含用于控制地图行为和外观的属性、方法和事件。

命名空间： Syncfusion.EJ2.Maps
程序集： Syncfusion.EJ2.dll
官方 API 参考

核心属性（共 63 项）

属性	类型	默认值	描述	API 链接
AllowImageExport	bool	false	启用或禁用地图导出为图像（PNG、JPEG、SVG）的功能	了解更多
AllowPdfExport	bool	false	启用或禁用地图导出为 PDF 的功能	了解更多
AllowPrint	bool	false	启用或禁用地图打印功能	了解更多
Annotations	List	null	获取或设置用于自定义地图注释的选项。注释允许在指定坐标处叠加自定义 HTML/文本	了解更多
Background	string	null	获取或设置地图容器的背景颜色	了解更多
BaseLayerIndex	double	0	获取或设置作为底图层的图层索引。用于确定地图中可见的图层	了解更多
Border	MapsBorder	null	获取或设置用于自定义地图边框样式属性（宽度、颜色）的选项	了解更多
CenterPosition	MapsCenterPosition	null	获取或设置地图的中心位置，使用纬度和经度坐标表示	了解更多
Description	string	null	获取或设置地图描述，以支持辅助技术和无障碍访问	了解更多
EnablePersistence	bool	false	启用或禁用在页面重新加载期间保留组件状态。保留缩放级别、平移位置等	了解更多
EnableRtl	bool	false	启用或禁用针对 RTL 语言以从右到左的方向渲染组件	了解更多
Format	string	null	获取或设置应用于地图文本国际化的格式	了解更多
Height	string	null	获取或设置地图的渲染高度。可以是百分比或像素值	了解更多
HtmlAttributes	object	null	允许以键值对格式添加 title、name、data-* 等 HTML 属性	了解更多
Layers	List	null	获取或设置用于自定义地图图层的选项。支持无限数量的图层和子图层	了解更多
LegendSettings	MapsLegendSettings	null	获取或设置用于自定义地图图例的选项（位置、对齐方式、可见性等）	了解更多
Locale	string	"en-US"	覆盖此组件的全局区域性和本地化值	了解更多
MapsArea	MapsMapsAreaSettings	null	获取或设置用于自定义地图周围区域（背景、边框）的选项	了解更多
Margin	MapsMargin	null	获取或设置用于自定义地图边距（上、下、左、右）的选项	了解更多
ProjectionType	ProjectionType	Mercator	获取或设置投影类型（Mercator、EquirectangularProjection、MercatorProjection 等）	了解更多
TabIndex	double	0	获取或设置地图的 Tab 索引值	了解更多
Theme	MapsTheme	Material	获取或设置地图支持的主题样式（Material、Fabric、HighContrast、BootstrapDark 等）	了解更多
TitleSettings	MapsTitleSettings	null	获取或设置用于自定义地图标题的选项（文本、对齐方式、字体等）	了解更多
TooltipDisplayMode	TooltipGesture	MouseMove	获取或设置工具提示的显示模式（MouseMove、Click、DoubleClick）	了解更多
UseGroupingSeparator	bool	false	启用或禁用格式化数字中分组分隔符的显示	了解更多
Width	string	null	获取或设置地图的渲染宽度。可以是百分比或像素值	了解更多
ZoomSettings	MapsZoomSettings	null	获取或设置用于自定义地图缩放操作的选项	了解更多

地图事件（共 28 个）

事件	类型	触发条件	描述
AnimationComplete	string	null	地图中的动画完成后触发
AnnotationRendering	string	null	地图中的注释渲染前触发
BeforePrint	string	null	开始打印前触发
BubbleClick	string	null	在地图中对气泡元素执行单击操作时触发
BubbleMouseMove	string	null	鼠标悬停在地图中的气泡元素上时触发
BubbleRendering	string	null	地图上的气泡元素渲染前触发
Click	string	null	用户单击地图中的元素时触发
DataLabelRendering	string	null	数据标签渲染前触发
DoubleClick	string	null	在地图中对元素执行双击操作时触发
ItemHighlight	string	null	形状、气泡或标记高亮显示前触发
ItemSelection	string	null	形状、气泡或标记被选中前触发
LayerRendering	string	null	地图图层渲染前触发
LegendRendering	string	null	图例渲染前触发
Load	string	null	地图渲染前触发
Loaded	string	null	地图渲染后触发
MarkerClick	string	null	单击标记元素时触发
MarkerClusterClick	string	null	单击地图中的标记聚类时触发
MarkerClusterMouseMove	string	null	鼠标移过标记聚类元素时触发
MarkerClusterRendering	string	null	地图中的标记聚类渲染前触发
MarkerDragEnd	string	null	标记在地图上的拖动停止时触发此事件
MarkerDragStart	string	null	标记开始在地图上拖动时触发此事件
MarkerMouseMove	string	null	鼠标移过地图中的标记元素时触发
MarkerRendering	string	null	地图中的标记渲染前触发
MouseMove	string	null	鼠标指针移过地图时触发此事件
Pan	string	null	执行平移操作前触发
PanComplete	string	null	执行平移操作后触发此事件
Resize	string	null	窗口大小调整时触发，以通知地图尺寸已更改
RightClick	string	null	在地图中对元素执行右键单击操作时触发
ShapeHighlight	string	null	形状高亮显示前触发
ShapeRendering	string	null	地图中的形状渲染前触发
ShapeSelected	string	null	在地图中选中形状时触发
TooltipRender	string	null	地图中的工具提示渲染前触发
TooltipRenderComplete	string	null	地图中的工具提示渲染后触发
Zoom	string	null	缩放操作（如放大和缩小）前触发
ZoomComplete	string	null	缩放操作完成后触发此事件

MapsLayer 类

定义各个地图图层的配置，支持几何数据、地图提供方和数据绑定。

官方 API 参考

MapsLayer 的主要属性

属性	类型	默认值	描述
DataSource	object	null	用于与形状绑定的数据源
ShapeData	object	null	用于渲染形状的 GeoJSON 数据
ShapeDataPath	string	null	数据源中用于与形状匹配的属性路径
ShapePropertyPath	string[]	null	形状数据中用于与数据源匹配的属性路径
BubbleSettings	List	null	气泡可视化的配置
MarkerSettings	List	null	标记可视化的配置
DataLabelSettings	MapsDataLabelSettings	null	形状上数据标签的配置
NavigationLineSettings	List	null	导航线的配置
SelectionSettings	MapsSelectionSettings	null	形状选择的配置
HighlightSettings	MapsHighlightSettings	null	鼠标悬停时形状高亮的配置
TooltipSettings	MapsTooltipSettings	null	图层工具提示的配置
ShapeSettings	MapsShapeSettings	null	形状样式的配置
Type	string	"Layer"	图层类型（Layer 或 SubLayer）
Visible	bool	true	获取或设置图层的可见性

MapsZoomSettings 类

管理地图缩放和平移行为。

官方 API 参考

MapsZoomSettings 的主要属性

属性	类型	默认值	描述
Enable	bool	false	启用或禁用地图缩放
ToolbarOrientation	string	"Vertical"	指定缩放工具栏的方向（Horizontal/Vertical）
Toolbars	string[]	null	定义缩放工具栏按钮（Zoom、ZoomIn、ZoomOut、Pan、Reset）
ZoomFactor	double	2	每次放大或缩小时的缩放因子
MinZoom	double	1	最小缩放级别
MaxZoom	double	28	最大缩放级别
EnableMouseWheelZoom	bool	false	启用鼠标滚轮缩放
EnablePinchZoom	bool	false	启用触控设备上的双指缩放手势
EnableSelectionZooming	bool	false	启用框选缩放（绘制矩形框进行缩放）
EnableDoubleTapZoom	bool	true	启用双击缩放

MapsShapeSettings 类

配置地图中形状的外观和行为。

官方 API 参考

MapsShapeSettings 的主要属性

属性	类型	默认值	描述
Fill	string	"#E5E5E5"	形状的填充颜色
Opacity	double	1.0	形状的不透明度（0 到 1）
Palette	string[]	null	用于颜色映射的调色板
ColorValuePath	string	null	数据源中用于颜色映射的属性路径
ColorMapping	List	null	颜色映射配置
DashArray	string	""	定义形状边框的虚线样式

MapsMarker 类

定义要在地图指定坐标处显示的标记。

官方 API 参考

MapsMarker 的关键属性

属性	类型	默认值	描述
DataSource	object	null	包含标记位置和属性的数据源
Latitude	double	null	放置标记的纬度坐标
Longitude	double	null	放置标记的经度坐标
Shape	MarkerType	Circle	标记形状（Circle、Rectangle、Image、Letter、Template）
Width	double	20	标记宽度
Height	double	20	标记高度
Fill	string	"#F41747"	标记填充颜色
Border	string	null	边框配置
ImageUrl	string	null	Image 类型标记的图片 URL
TooltipSettings	MapsTooltipSettings	null	标记的工具提示配置

枚举

ProjectionType

定义支持的地图投影。

值	描述
Mercator	Web 墨卡托投影（默认）
EquirectangularProjection	等距圆柱投影／Plate Carée 投影
MercatorProjection	墨卡托投影
Miller	米勒圆柱投影
NaturalEarth1	Natural Earth 1 投影
NaturalEarth2	Natural Earth 2 投影

MarkerType

定义可用的标记形状。

值	描述
Circle	圆形标记
Rectangle	矩形标记
Triangle	三角形标记
Diamond	菱形标记
Image	自定义图片标记
Letter	字母标记
Template	自定义模板标记

MapsTheme

定义可用的主题。

值	描述
Material	Material 设计主题
Fabric	Fabric 设计主题
HighContrast	高对比度主题
BootstrapDark	Bootstrap 深色主题
BootstrapLight	Bootstrap 浅色主题

TooltipGesture

定义工具提示显示模式。

值	描述
MouseMove	鼠标移动时显示（默认）
Click	单击时显示
DoubleClick	双击时显示

LegendType

定义图例类型。

值	描述
Layers	图层图例
Markers	标记图例
Bubbles	气泡图例

常见模式

模式 1：数据绑定分级统计地图

用例： 使用颜色编码的形状可视化各区域的统计数据。

@{
    var colorMapping = new List<MapsColorMapping> {
        new MapsColorMapping { Value = "Low", Color = "#90EE90" },
        new MapsColorMapping { Value = "Medium", Color = "#FFD700" },
        new MapsColorMapping { Value = "High", Color = "#FF6347" }
    };
}

<e-maps-layer shapeData="@geoJsonData" 
              dataSource="@statisticsData"
              shapeDataPath="RegionName" 
              shapePropertyPath="@(new[] { "name" })">
    <e-layersettings-shapesettings 
        colorValuePath="DataLevel"
        colorMapping="colorMapping">
    </e-layersettings-shapesettings>
</e-maps-layer>

模式 2：带缩放和选择功能的交互式地图

用例： 支持用户交互，以便详细探索。

<ejs-maps id="maps">
    <e-maps-zoomsettings 
        enable="true" 
        enableSelectionZooming="true"
        toolbars='new string[] {"Zoom", "ZoomIn", "ZoomOut", "Pan", "Reset"}'>
    </e-maps-zoomsettings>
    
    <e-maps-layers>
        <e-maps-layer shapeData="@mapData">
            <e-layersettings-selectionsettings 
                enable="true" 
                fill="#8B0000"
                opacity="0.5">
            </e-layersettings-selectionsettings>
            
            <e-layersettings-highlightsettings 
                enable="true" 
                fill="#FF6347">
            </e-layersettings-highlightsettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

模式 3：多个数据图层

用例： 在单张地图上叠加多个数据集。

<e-maps-layers>
    
    <e-maps-layer shapeData="@countryData" type="Layer">
        <e-layersettings-shapesettings fill="#E5E5E5"></e-layersettings-shapesettings>
    </e-maps-layer>
    
    
    <e-maps-layer shapeData="@stateData" type="SubLayer">
        <e-layersettings-shapesettings fill="transparent" border-width="1"></e-layersettings-shapesettings>
    </e-maps-layer>
    
    
    <e-maps-layer type="Layer">
        <e-layersettings-markers>
            <e-layersettings-marker dataSource="@locations" shape="Circle"></e-layersettings-marker>
        </e-layersettings-markers>
    </e-maps-layer>
</e-maps-layers>

模式 4：Bing Maps 集成

用例： 使用 Bing Maps 作为底图，并叠加自定义数据。

<ejs-maps id="maps">
    <e-maps-layers>
        
        <e-maps-layer layerType="Bing" bingMapType="Aerial" key="YOUR_BING_MAPS_KEY">
        </e-maps-layer>
        
        
        <e-maps-layer type="SubLayer" shapeData="@customData">
            <e-layersettings-shapesettings fill="#FF6347" opacity="0.5"></e-layersettings-shapesettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

关键属性参考

基本属性

属性	用途	示例
`shapeData`	用于渲染形状的 GeoJSON 数据	`shapeData="worldMapData"`
`dataSource`	绑定到形状的数据	`dataSource="populationData"`
`shapeDataPath`	用于匹配形状的 dataSource 中的属性	`shapeDataPath="Country"`
`shapePropertyPath`	用于匹配数据的 GeoJSON 中的属性	`shapePropertyPath="@(new[] { "name" })"`
`colorValuePath`	用于颜色映射的数据属性	`colorValuePath="Population"`
`colorMapping`	定义颜色范围/值	`colorMapping="@colorMappingList"`

图层配置

属性	用途	常用值
`type`	图层类型	`Layer`、`SubLayer`
`layerType`	提供程序类型	`Geometry`、`Bing`、`OSM`
`visible`	显示/隐藏图层	`true`、`false`
`shapeSettings`	形状样式	填充、边框、调色板
`markerSettings`	标记配置	形状、大小、颜色
`bubbleSettings`	气泡配置	大小、颜色、半径

交互设置

属性	用途	配置
`zoomSettings`	缩放配置	`enable`、`zoomFactor`、`minZoom`、`maxZoom`
`tooltipSettings`	工具提示配置	`visible`、`valuePath`、`template`
`selectionSettings`	选择配置	`enable`、`fill`、`opacity`
`highlightSettings`	悬停高亮	`enable`、`fill`、`border`

常见用例

用例 1：按区域划分的销售仪表板

创建分级统计地图，通过颜色强度显示不同区域的销售表现。

适用功能： 颜色映射、数据绑定、图例、工具提示

用例 2：门店定位器

在地图上显示零售门店位置并使用自定义标记，让用户可以缩放地图并点击查看详情。

适用功能： 标记、工具提示、缩放、Bing/OSM 集成

用例 3：人口密度可视化

使用气泡大小显示人口密度，气泡越大表示人口越多。

适用功能： 气泡、数据绑定、图例、颜色映射

用例 4：选举结果地图

通过颜色编码和交互式选择可视化各州/区域的选举结果。

适用功能： 颜色映射、选择、高亮、数据标签、图例

用例 5：航运路线可视化

使用带方向箭头的导航线显示城市之间的航运路线。

适用功能： 导航线、标记、注释、图层

用例 6：天气地图仪表板

在地图上叠加天气数据，并添加自定义注释和实时数据更新。

适用功能： 注释、动态数据、多个图层、地图提供程序

用例 7：房地产地图

使用自定义标记显示房源信息，并支持筛选和详细工具提示。

适用功能： 标记、自定义模板、工具提示、缩放、平移

Additional Resources

支持 Markdown

登录后评论

基本信息

作者: syncfusion
仓库: syncfusion/aspnetcore-ui-components-skills
分类: 开发
安装次数: 107
GitHub Stars: 0

报告问题

类	用途	API 链接
MapsLegendSettings	配置和自定义图例	链接
MapsTooltipSettings	配置工具提示行为	链接
MapsBubble	气泡可视化设置	链接
MapsColorMapping	定义颜色映射规则	链接
MapsDataLabelSettings	自定义数据标签	链接
MapsAnnotation	注释配置	链接
MapsNavigationLine	导航线设置	链接
MapsMarkerClusterSettings	标记聚类配置	链接
MapsTitleSettings	自定义地图标题	链接
MapsMargin	边距配置	链接

syncfusion-aspnetcore-maps

关于 syncfusion-aspnetcore-maps

主要功能

适用场景

安装

包含的文件

详细介绍

实现 Syncfusion Maps for ASP.NET Core

目录

适用场景

组件概述

文档与导航指南

入门与安装

图层与 GeoJSON 数据

数据绑定与数据填充

标记

气泡

数据标签

颜色映射

图例

注释

用户交互

地图提供商集成

高级功能

快速入门示例

使用 GeoJSON 和颜色映射的基本地图

带标记的地图

API 参考

Maps 类

核心属性（共 63 项）

地图事件（共 28 个）

MapsLayer 类

MapsLayer 的主要属性

MapsZoomSettings 类

MapsZoomSettings 的主要属性

MapsShapeSettings 类

MapsShapeSettings 的主要属性

MapsMarker 类

MapsMarker 的关键属性

相关类（40 多个可用类）

枚举

ProjectionType

MarkerType

MapsTheme

TooltipGesture

LegendType

常见模式

模式 1：数据绑定分级统计地图

模式 2：带缩放和选择功能的交互式地图

模式 3：多个数据图层

模式 4：Bing Maps 集成

关键属性参考

基本属性

图层配置

交互设置

常见用例

用例 1：按区域划分的销售仪表板

用例 2：门店定位器

用例 3：人口密度可视化

用例 4：选举结果地图

用例 5：航运路线可视化

用例 6：天气地图仪表板

用例 7：房地产地图

相关组件

Additional Resources

评论