开发预览更新于 2026-05-10

MapLegend 图例

配套地图组件的颜色 / 大小图例；连续 + 分级两种模式；可作角落覆盖层或内联使用。

基础用法

分级模式：传 stops: { value, swatch, label? }[]，每行一行色块 + 标签。
连续模式（color）：传 gradient: { offset, color }[] + domain: [min, max]，画一条横向色条 + 两端数字。
连续模式（size）：kind="size" + domain，画三个递增的圆点。

背景视口

src/App.vue

<script setup lang="ts">
import { CfMapTile, CfMapLegend, CfBubbleMap } from '@chufix-design/maps-vue';

const stops = [
  { value: 200, swatch: 'oklch(from var(--accent-1) l c h / 0.18)' },
  { value: 800, swatch: 'oklch(from var(--accent-1) l c h / 0.45)' },
  { value: 1500, swatch: 'oklch(from var(--accent-1) l c h / 0.70)' },
  { value: 2500, swatch: 'oklch(from var(--accent-1) l c h / 0.95)' },
];

const cities = [
  { id: 'BJ', name: '北京', lng: 116.4, lat: 39.9, value: 2154 },
  { id: 'SH', name: '上海', lng: 121.5, lat: 31.2, value: 2487 },
  { id: 'GZ', name: '广州', lng: 113.3, lat: 23.1, value: 1530 },
  { id: 'XA', name: '西安', lng: 108.9, lat: 34.3, value: 1295 },
];
</script>
<template>
  <div class="demo-stack">
    <CfMapTile
      :center="{ lng: 112, lat: 32 }"
      :zoom="4"
      :width="720"
      :height="500"
    >
      <CfBubbleMap :data="cities" unit=" 万" />
      <CfMapLegend
        :stops="stops"
        title="人口（分级）"
        unit=" 万"
        position="top-left"
      />
      <CfMapLegend
        kind="size"
        :domain="[200, 2500]"
        title="点位大小"
        unit=" 万"
        position="bottom-right"
      />
    </CfMapTile>
  </div>
</template>
<style scoped>
.demo-stack { display: flex; gap: 16px; flex-wrap: wrap; }
</style>

<script setup>
import { CfMapTile, CfMapLegend, CfBubbleMap } from '@chufix-design/maps-vue';

const stops = [
  { value: 200, swatch: 'oklch(from var(--accent-1) l c h / 0.18)' },
  { value: 800, swatch: 'oklch(from var(--accent-1) l c h / 0.45)' },
  { value: 1500, swatch: 'oklch(from var(--accent-1) l c h / 0.70)' },
  { value: 2500, swatch: 'oklch(from var(--accent-1) l c h / 0.95)' },
];

const cities = [
  { id: 'BJ', name: '北京', lng: 116.4, lat: 39.9, value: 2154 },
  { id: 'SH', name: '上海', lng: 121.5, lat: 31.2, value: 2487 },
  { id: 'GZ', name: '广州', lng: 113.3, lat: 23.1, value: 1530 },
  { id: 'XA', name: '西安', lng: 108.9, lat: 34.3, value: 1295 },
];
</script>
<template>
  <div class="demo-stack">
    <CfMapTile
      :center="{ lng: 112, lat: 32 }"
      :zoom="4"
      :width="720"
      :height="500"
    >
      <CfBubbleMap :data="cities" unit=" 万" />
      <CfMapLegend
        :stops="stops"
        title="人口（分级）"
        unit=" 万"
        position="top-left"
      />
      <CfMapLegend
        kind="size"
        :domain="[200, 2500]"
        title="点位大小"
        unit=" 万"
        position="bottom-right"
      />
    </CfMapTile>
  </div>
</template>
<style scoped>
.demo-stack { display: flex; gap: 16px; flex-wrap: wrap; }
</style>

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

export default function Demo() {
  import { CfMapTile, CfMapLegend, CfBubbleMap } from '@chufix-design/maps-vue';

  const stops = [
    { value: 200, swatch: 'oklch(from var(--accent-1) l c h / 0.18)' },
    { value: 800, swatch: 'oklch(from var(--accent-1) l c h / 0.45)' },
    { value: 1500, swatch: 'oklch(from var(--accent-1) l c h / 0.70)' },
    { value: 2500, swatch: 'oklch(from var(--accent-1) l c h / 0.95)' },
  ];

  const cities = [
    { id: 'BJ', name: '北京', lng: 116.4, lat: 39.9, value: 2154 },
    { id: 'SH', name: '上海', lng: 121.5, lat: 31.2, value: 2487 },
    { id: 'GZ', name: '广州', lng: 113.3, lat: 23.1, value: 1530 },
    { id: 'XA', name: '西安', lng: 108.9, lat: 34.3, value: 1295 },
  ];
  return (
    <>
      <div className="demo-stack">
          <CfMapTile center={{ lng: 112, lat: 32 }} zoom={4} width={720} height={500} >
            <CfBubbleMap data={cities} unit=" 万" />
            <CfMapLegend stops={stops} title="人口（分级）" unit=" 万" position="top-left" />
            <CfMapLegend kind="size" domain={[200, 2500]} title="点位大小" unit=" 万" position="bottom-right" />
          </CfMapTile>
        </div>
    </>
  );
}

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

export default function Demo() {
  import { CfMapTile, CfMapLegend, CfBubbleMap } from '@chufix-design/maps-vue';

  const stops = [
    { value: 200, swatch: 'oklch(from var(--accent-1) l c h / 0.18)' },
    { value: 800, swatch: 'oklch(from var(--accent-1) l c h / 0.45)' },
    { value: 1500, swatch: 'oklch(from var(--accent-1) l c h / 0.70)' },
    { value: 2500, swatch: 'oklch(from var(--accent-1) l c h / 0.95)' },
  ];

  const cities = [
    { id: 'BJ', name: '北京', lng: 116.4, lat: 39.9, value: 2154 },
    { id: 'SH', name: '上海', lng: 121.5, lat: 31.2, value: 2487 },
    { id: 'GZ', name: '广州', lng: 113.3, lat: 23.1, value: 1530 },
    { id: 'XA', name: '西安', lng: 108.9, lat: 34.3, value: 1295 },
  ];
  return (
    <>
      <div className="demo-stack">
          <CfMapTile center={{ lng: 112, lat: 32 }} zoom={4} width={720} height={500} >
            <CfBubbleMap data={cities} unit=" 万" />
            <CfMapLegend stops={stops} title="人口（分级）" unit=" 万" position="top-left" />
            <CfMapLegend kind="size" domain={[200, 2500]} title="点位大小" unit=" 万" position="bottom-right" />
          </CfMapTile>
        </div>
    </>
  );
}

API

属性	类型	默认	说明
`kind`	`'color' \| 'size'`	`'color'`	图例类型
`stops`	`MapLegendStop[]`	—	分级 stops
`gradient`	`{ offset, color }[]`	—	连续 color 模式
`domain`	`[min, max]`	—	连续模式两端值
`title`	`string`	—	顶部标题
`unit`	`string`	—	值后缀
`position`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`	`'bottom-right'`	角落定位（非 inline 时）
`inline`	`boolean`	`false`	内联（不 fixed）