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

BubbleMap 气泡地图

按值定半径的点位地图，面积比例缩放、tooltip，可叠加在 CfMapTile 上。

基础用法

data 行带 { id, lng, lat, value }，组件按 radiusRange 把 value 通过开方映射到半径（保证视觉面积线性，而非线性”看起来过大”）。在 CfMapTile 内嵌套时自动接入瓦片视口；独立使用时给个 geojson 底图或 extent 即可。

背景视口

src/App.vue

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

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: 'CD', name: '成都', lng: 104.1, lat: 30.7, value: 1644 },
  { id: 'WH', name: '武汉', lng: 114.3, lat: 30.6, value: 1232 },
  { id: 'XA', name: '西安', lng: 108.9, lat: 34.3, value: 1295 },
  { id: 'KM', name: '昆明', lng: 102.7, lat: 25.0, value: 685 },
  { id: 'HZ', name: '杭州', lng: 120.2, lat: 30.3, value: 1237 },
];
</script>
<template>
  <CfMapTile
    :center="{ lng: 112, lat: 32 }"
    :zoom="4"
    :width="720"
    :height="520"
  >
    <CfBubbleMap :data="cities" unit=" 万" />
    <CfMapLegend
      kind="size"
      :domain="[600, 2500]"
      title="人口"
      unit=" 万"
      position="top-left"
    />
  </CfMapTile>
</template>

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

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: 'CD', name: '成都', lng: 104.1, lat: 30.7, value: 1644 },
  { id: 'WH', name: '武汉', lng: 114.3, lat: 30.6, value: 1232 },
  { id: 'XA', name: '西安', lng: 108.9, lat: 34.3, value: 1295 },
  { id: 'KM', name: '昆明', lng: 102.7, lat: 25.0, value: 685 },
  { id: 'HZ', name: '杭州', lng: 120.2, lat: 30.3, value: 1237 },
];
</script>
<template>
  <CfMapTile
    :center="{ lng: 112, lat: 32 }"
    :zoom="4"
    :width="720"
    :height="520"
  >
    <CfBubbleMap :data="cities" unit=" 万" />
    <CfMapLegend
      kind="size"
      :domain="[600, 2500]"
      title="人口"
      unit=" 万"
      position="top-left"
    />
  </CfMapTile>
</template>

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

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

  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: 'CD', name: '成都', lng: 104.1, lat: 30.7, value: 1644 },
    { id: 'WH', name: '武汉', lng: 114.3, lat: 30.6, value: 1232 },
    { id: 'XA', name: '西安', lng: 108.9, lat: 34.3, value: 1295 },
    { id: 'KM', name: '昆明', lng: 102.7, lat: 25.0, value: 685 },
    { id: 'HZ', name: '杭州', lng: 120.2, lat: 30.3, value: 1237 },
  ];
  return (
    <>
      <CfMapTile center={{ lng: 112, lat: 32 }} zoom={4} width={720} height={520} >
          <CfBubbleMap data={cities} unit=" 万" />
          <CfMapLegend kind="size" domain={[600, 2500]} title="人口" unit=" 万" position="top-left" />
        </CfMapTile>
    </>
  );
}

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

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

  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: 'CD', name: '成都', lng: 104.1, lat: 30.7, value: 1644 },
    { id: 'WH', name: '武汉', lng: 114.3, lat: 30.6, value: 1232 },
    { id: 'XA', name: '西安', lng: 108.9, lat: 34.3, value: 1295 },
    { id: 'KM', name: '昆明', lng: 102.7, lat: 25.0, value: 685 },
    { id: 'HZ', name: '杭州', lng: 120.2, lat: 30.3, value: 1237 },
  ];
  return (
    <>
      <CfMapTile center={{ lng: 112, lat: 32 }} zoom={4} width={720} height={520} >
          <CfBubbleMap data={cities} unit=" 万" />
          <CfMapLegend kind="size" domain={[600, 2500]} title="人口" unit=" 万" position="top-left" />
        </CfMapTile>
    </>
  );
}

API

属性	类型	默认	说明
`data`	`BubbleDatum[]`	—	`{ id, lng, lat, value, name?, tone? }`
`geojson`	`FeatureCollection`	—	可选底图（独立使用时）
`extent`	`MapBounds`	自动	独立投影范围
`projection`	`(lng, lat) => {x, y}`	—	显式覆盖投影（一般由 `CfMapTile` 注入）
`width` / `height`	`number`	`480 / 280`	独立使用尺寸
`radiusRange`	`[number, number]`	`[3, 24]`	半径区间 (px)
`domain`	`[number, number]`	自动	value 域
`fill` / `stroke` / `opacity`	`string / string / number`	accent token / 0.55	视觉调整
`tooltip`	`boolean`	`true`	hover 提示
`unit`	`string`	—	tooltip 后缀