Preview Updated 2026-05-10

FlowMap 迁徙地图

在简单底图上画起点→终点的弧线，线宽按 value 自动映射，支持箭头与标签。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

points 是带经纬度的节点列表，edges 通过 from / to 关联 id。value 自动映射到 widthRange 区间；curvature 控制弧线曲率（0 = 直线）。

背景视口

src/App.vue

<script setup lang="ts">
import { CfMapTile, CfFlowMap } from '@chufix-design/maps-vue';
import { samplePointsChina } from '../_shared/sample-geo';

const edges = [
  { from: 'BJ', to: 'SH', value: 120, label: '北京 → 上海' },
  { from: 'BJ', to: 'GZ', value: 80, label: '北京 → 广州' },
  { from: 'CD', to: 'SH', value: 60, label: '成都 → 上海' },
  { from: 'GZ', to: 'SH', value: 200, label: '广州 → 上海' },
  { from: 'SY', to: 'BJ', value: 95, label: '沈阳 → 北京' },
  { from: 'XA', to: 'SH', value: 70, label: '西安 → 上海' },
];
</script>
<template>
  <CfMapTile
    :center="{ lng: 113, lat: 33 }"
    :zoom="4"
    :width="720"
    :height="520"
  >
    <CfFlowMap
      :points="samplePointsChina"
      :edges="edges"
      :show-labels="true"
    />
  </CfMapTile>
</template>

<script setup>
import { CfMapTile, CfFlowMap } from '@chufix-design/maps-vue';
import { samplePointsChina } from '../_shared/sample-geo';

const edges = [
  { from: 'BJ', to: 'SH', value: 120, label: '北京 → 上海' },
  { from: 'BJ', to: 'GZ', value: 80, label: '北京 → 广州' },
  { from: 'CD', to: 'SH', value: 60, label: '成都 → 上海' },
  { from: 'GZ', to: 'SH', value: 200, label: '广州 → 上海' },
  { from: 'SY', to: 'BJ', value: 95, label: '沈阳 → 北京' },
  { from: 'XA', to: 'SH', value: 70, label: '西安 → 上海' },
];
</script>
<template>
  <CfMapTile
    :center="{ lng: 113, lat: 33 }"
    :zoom="4"
    :width="720"
    :height="520"
  >
    <CfFlowMap
      :points="samplePointsChina"
      :edges="edges"
      :show-labels="true"
    />
  </CfMapTile>
</template>

import { CfFlowMap, CfMapTile } from '@chufix-design/react';

export default function Demo() {
  import { CfMapTile, CfFlowMap } from '@chufix-design/maps-vue';
  import { samplePointsChina } from '../_shared/sample-geo';

  const edges = [
    { from: 'BJ', to: 'SH', value: 120, label: '北京 → 上海' },
    { from: 'BJ', to: 'GZ', value: 80, label: '北京 → 广州' },
    { from: 'CD', to: 'SH', value: 60, label: '成都 → 上海' },
    { from: 'GZ', to: 'SH', value: 200, label: '广州 → 上海' },
    { from: 'SY', to: 'BJ', value: 95, label: '沈阳 → 北京' },
    { from: 'XA', to: 'SH', value: 70, label: '西安 → 上海' },
  ];
  return (
    <>
      <CfMapTile center={{ lng: 113, lat: 33 }} zoom={4} width={720} height={520} >
          <CfFlowMap points={samplePointsChina} edges={edges} showLabels={true} />
        </CfMapTile>
    </>
  );
}

import { CfFlowMap, CfMapTile } from '@chufix-design/react';

export default function Demo() {
  import { CfMapTile, CfFlowMap } from '@chufix-design/maps-vue';
  import { samplePointsChina } from '../_shared/sample-geo';

  const edges = [
    { from: 'BJ', to: 'SH', value: 120, label: '北京 → 上海' },
    { from: 'BJ', to: 'GZ', value: 80, label: '北京 → 广州' },
    { from: 'CD', to: 'SH', value: 60, label: '成都 → 上海' },
    { from: 'GZ', to: 'SH', value: 200, label: '广州 → 上海' },
    { from: 'SY', to: 'BJ', value: 95, label: '沈阳 → 北京' },
    { from: 'XA', to: 'SH', value: 70, label: '西安 → 上海' },
  ];
  return (
    <>
      <CfMapTile center={{ lng: 113, lat: 33 }} zoom={4} width={720} height={520} >
          <CfFlowMap points={samplePointsChina} edges={edges} showLabels={true} />
        </CfMapTile>
    </>
  );
}

API

属性	类型	默认	说明
`points`	`{ id, name?, lng, lat }[]`	—	节点
`edges`	`{ from, to, value?, label? }[]`	—	起→终边
`geojson`	`FeatureCollection`	—	可选底图
`extent`	`MapBounds`	自动	投影范围
`width` / `height`	`number`	`480` / `280`	SVG 尺寸
`widthRange`	`[number, number]`	`[0.6, 3]`	value → 线宽映射
`curvature`	`number`	`0.22`	弧线弯曲度，0 为直线
`showArrow`	`boolean`	`true`	显示箭头
`showNodes`	`boolean`	`true`	显示节点圆点
`showLabels`	`boolean`	`false`	显示节点名称