Syncfusion Flutter Maps(SfMaps)是用于在 Flutter 应用中展示和可视化地理与空间数据的组件,支持两种主要图层类型。
用途
该组件用于在 Flutter 应用中实现交互式地图与地理数据可视化,适用于需要以地图形式呈现区域数据、位置标记或真实街道底图的场景。
主要能力
组件包含两种图层类型:
MapShapeLayer:基于 GeoJSON 的形状渲染,用于统计与地理数据可视化。支持按颜色或数值区间映射的等值区域图(choropleth)、气泡可视化、数据标签、形状选择、图例、工具提示、用于层级数据的子图层、矢量图层(弧线、圆、线、多边形、折线)、标记、缩放与平移手势,以及离线支持。
MapTileLayer:集成 Web 地图瓦片服务,如 OpenStreetMap、Bing Maps、Google Maps 和 TomTom。支持带详细地理信息的真实街道地图、位置标记、子图层、矢量图层、可配置级别的缩放与平移、初始焦点与缩放级别,以及 WMTS URL 模板。使用时需要网络连接。
两种图层类型都支持标记(内置符号与自定义组件)、缩放与平移行为(捏合、鼠标滚轮、双击手势)、矢量图层叠加、无障碍功能、RTL 支持,以及通过 SfMapsTheme 进行主题设置。
使用方式
使用 MapShapeLayer 时,通过 MapShapeSource.asset 加载 GeoJSON 资源,指定 shapeDataField 进行字段映射,结合 shapeColorValueMapper 与 shapeColorMappers 实现颜色映射,并通过 MapShapeLayer 的 legend、showDataLabels、onSelectionChanged 等属性配置图例、数据标签和选择交互。
使用 MapTileLayer 时,通过 urlTemplate 配置瓦片地址,通过 initialFocalLatLng 与 initialZoomLevel 设置初始焦点和缩放级别,通过 controller 管理标记,并在 markerBuilder 中构建 MapMarker。可通过 MapZoomPanBehavior 启用双击缩放、捏合缩放和平移。
气泡与工具提示可通过 bubbleSizeMapper、bubbleColorValueMapper 以及 MapBubbleSettings 配置在形状图层上。
适用场景
MapShapeLayer 适用于选举地图、销售区域地图、人口普查数据可视化、区域对比等场景。MapTileLayer 适用于门店定位、配送跟踪、导航应用、位置选择器等场景。
限制
MapTileLayer 需要网络连接,而 MapShapeLayer 支持离线使用(嵌入 GeoJSON)。MapShapeLayer 不具备真实街道地图细节,MapTileLayer 对数据绑定的支持仅限于标记,不支持等值区域图、气泡可视化、数据标签、形状选择、颜色映射和形状图例。Google Maps 等部分提供商的接入方式与限制暂未提供详细信息。文中代码中的 urlTemplate 使用占位符 'url',实际模板格式需参考对应文档。