菜单

地理可视化

相关源文件

目的与范围

本文档介绍了 Apache ECharts 中的地理可视化组件,这些组件使开发者能够创建交互式地图和地理数据可视化。地理可视化系统由两个主要组件组成:geo 组件和 map 系列。本页涵盖了这些组件的架构、配置选项和使用模式。

有关折线图和柱状图等基本图表类型的信息,请参阅折线图和柱状图。有关通用数据管理的信息,请参阅数据管理

地理组件概述

ECharts 提供了两种主要的地理可视化方法

  1. 地理组件(Geo Component):其他系列可以引用的坐标系
  2. 地图系列(Map Series):一种用于在地理区域上可视化数据的专用图表类型

来源: test/map.html97-101 test/geoScatter.html273-300 test/mapWorld.html96-100

架构

地理可视化系统由几个相互关联的组件组成,它们协同工作以渲染地图并在其上可视化数据。

来源: src/component/geo/GeoView.ts31-108

GeoView 类是地理可视化的主要视图组件。它使用 MapDraw 来渲染地图并处理与地图区域的交互。 GeoModel 类存储地理组件的配置和状态,而 ExtensionAPI 则提供了与 ECharts 实例交互的方法。

地图数据注册

在使用地理可视化之前,您需要向 ECharts 注册地图数据。地图数据可以从 JSON 文件加载,也可以直接在代码中指定。

来源: test/map.html44-46 test/mapWorld.html39-50

组件类型

地理组件

组件定义了一个地理坐标系,其他系列(如散点图、线图)可以引用它。它本身不显示数据,但提供地图背景和坐标映射。geo

主要功能

  • 作为其他可视化的坐标系
  • 可漫游(平移和缩放)
  • 支持区域选择
  • 可自定义单个区域的样式

配置示例

来源: test/geoScatter.html273-300

地图系列

map 系列是一种专门的图表类型,直接在地理区域上可视化数据。它将值赋给地图区域并根据这些值应用视觉编码。

主要功能

  • 直接在地图区域上可视化数据
  • 可与 visualMap 组件一起使用,进行基于值的着色
  • 支持区域的选择和高亮
  • 可在区域上显示自定义标签

配置示例

来源: test/map.html96-173 test/mapWorld.html96-288

数据结构

区域数据格式

对于地图系列,数据以包含区域名称和值的对象数组形式提供

属性类型描述
名称字符串与地图数据匹配的区域名称
数字与区域关联的值
是否选中布尔值区域是否被选中

示例

来源: test/map.html345-351

点数据格式

对于地理坐标系上的散点图和其他基于点的系列,数据以地理坐标形式提供

格式描述
[经度, 纬度, 值]经度、纬度和值
{name, value: [经度, 纬度, 值]}包含名称和坐标+值的对象

示例

来源: test/geoScatter.html246-265

视觉编码

视觉编码将数据值转换为颜色、大小和不透明度等视觉属性。visualMap 组件常用于地理可视化中,将数据值映射到视觉元素。

配置示例

来源: test/map.html87-94 test/mapWorld.html87-94

交互功能

ECharts 中的地理可视化支持丰富的交互功能

  1. 漫游:平移和缩放地图

  2. 区域选择:选择地图上的区域

  3. 提示框:悬停时显示信息

  4. 动画:在不同地图视图之间进行动画切换

来源: test/map.html459-470 test/map.html485-487

实现细节

地理可视化系统通过几个关键类实现

  1. GeoView:地理组件的视图类
  2. MapDraw:处理实际地图绘制的辅助类
  3. GeoModel:存储地理组件配置的模型类

处理区域点击的内部流程是

来源: src/component/geo/GeoView.ts70-84 src/component/geo/GeoView.ts86-96

常见用例

分级统计图

分级统计图使用颜色变化来表示跨区域的数据值。这通常使用地图系列和 visualMap 组件来实现。

来源: test/mapWorld.html87-289

点状地图

点状地图在特定的地理位置显示标记。这通常使用散点图系列和地理组件来实现。

来源: test/geoScatter.html267-265

自定义区域

可以通过设置特定样式来自定义单个区域

来源: test/geoScatter.html285-298

与其他组件的集成

地理可视化与 ECharts 的其他组件良好集成

  1. 图例:用于区分同一地图上的多个系列
  2. 提示框:用于在悬停时显示详细信息
  3. 视觉映射(VisualMap):用于将数据值映射到视觉属性
  4. 时间轴:用于显示地理数据随时间的变化

这种集成允许创建具有丰富用户交互功能的复杂交互式地理数据可视化。

来源: test/map.html82-86 test/map.html77-81