地理可视化

Graphic Walker 支持两种地理可视化类型：等值区域图（着色区域）和散点地图（坐标标记）。两者都需要将坐标系设置为 'geographic'。

等值区域图

等值区域图根据数据值为地理区域着色。你需要：

定义区域边界的 GeoJSON 或 TopoJSON 文件
数据中有一个字段与地理数据中的区域 ID 匹配

使用 `geographicData` 属性

直接传入地理数据：

import { GraphicWalker } from '@kanaries/graphic-walker';
 
const geoData = await fetch('/us-states.geojson').then(r => r.json());
 
<GraphicWalker
  data={salesByState}
  fields={fields}
  geographicData={{
    type: 'GeoJSON',
    data: geoData,
    key: 'name',  // property in GeoJSON features to match against
  }}
/>

在图表配置中，设置 coordSystem: 'geographic' 和 geoms: ['choropleth']，然后将州字段拖到 geoId 通道，将度量拖到 color 通道。

使用 `geoList` 属性

提供一组地理数据集供用户在界面中选择：

<GraphicWalker
  data={data}
  fields={fields}
  geoList={[
    {
      type: 'GeoJSON',
      name: 'US States',
      url: 'https://example.com/us-states.geojson',
    },
    {
      type: 'TopoJSON',
      name: 'World Countries',
      url: 'https://example.com/world-110m.json',
    },
  ]}
/>

TopoJSON 支持

TopoJSON 文件比 GeoJSON 更紧凑。指定 objectKey 来选择使用哪个图层：

<GraphicWalker
  data={data}
  fields={fields}
  geographicData={{
    type: 'TopoJSON',
    data: topoData,
    key: 'id',
    objectKey: 'countries',  // defaults to the first key in topology.objects
  }}
/>

散点地图 (POI)

散点地图在地理坐标处以标记形式展示数据。你的数据需要包含经度和纬度字段。

在图表配置中，设置 coordSystem: 'geographic' 和 geoms: ['poi']，然后将经度和纬度字段编码到对应的通道中。

const data = [
  { city: 'New York', lng: -74.006, lat: 40.7128, population: 8336817 },
  { city: 'Los Angeles', lng: -118.2437, lat: 34.0522, population: 3979576 },
];
 
const fields = [
  { fid: 'city', name: 'City', semanticType: 'nominal', analyticType: 'dimension' },
  { fid: 'lng', name: 'Longitude', semanticType: 'quantitative', analyticType: 'dimension' },
  { fid: 'lat', name: 'Latitude', semanticType: 'quantitative', analyticType: 'dimension' },
  { fid: 'population', name: 'Population', semanticType: 'quantitative', analyticType: 'measure' },
];

自定义地图瓦片

通过 IVisualLayout 中的 geoMapTileUrl 属性自定义底图瓦片 URL：

<GraphicWalker
  data={data}
  fields={fields}
  defaultConfig={{
    layout: {
      geoMapTileUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    },
  }}
/>

地图布局选项

属性	类型	说明
`scaleIncludeUnmatchedChoropleth`	`boolean`	在颜色比例尺中包含未匹配的区域
`showAllGeoshapeInChoropleth`	`boolean`	即使没有匹配数据也显示所有地理形状
`geoMapTileUrl`	`string`	自定义地图瓦片 URL 模板
`geoUrl`	`{ type: 'GeoJSON' \| 'TopoJSON'; url: string }`	加载地理数据的 URL
`geoKey`	`string`	用于将数据与要素匹配的属性键

数据计算图表导出