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

MapTile 瓦片地图

XYZ 瓦片底图 + pointer 拖动 + 滚轮缩放，向子组件提供 Web Mercator 投影注入。

基础用法

CfMapTile 用 Web Mercator 投影加载 XYZ 瓦片，pointer 拖动平移、滚轮缩放，默认走 OpenStreetMap 公共瓦片源。所有放进默认插槽的子组件都能通过 inject / context 拿到当前 viewport 与投影函数，从而把 SVG / canvas 图层精准对齐到瓦片上。

背景视口

src/App.vue

<script setup lang="ts">
import { CfMapTile, CfMapScale } from '@chufix-design/maps-vue';
</script>
<template>
  <CfMapTile
    :center="{ lng: 116.4, lat: 39.9 }"
    :zoom="4"
    :width="720"
    :height="520"
  >
    <CfMapScale position="bottom-left" />
  </CfMapTile>
</template>

<script setup>
import { CfMapTile, CfMapScale } from '@chufix-design/maps-vue';
</script>
<template>
  <CfMapTile
    :center="{ lng: 116.4, lat: 39.9 }"
    :zoom="4"
    :width="720"
    :height="520"
  >
    <CfMapScale position="bottom-left" />
  </CfMapTile>
</template>

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

export default function Demo() {
  return (
    <>
      <CfMapTile center={{ lng: 116.4, lat: 39.9 }} zoom={4} width={560} height={320}>
      <CfMapScale position="bottom-left" />
      </CfMapTile>
    </>
  );
}

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

export default function Demo() {
  return (
    <>
      <CfMapTile center={{ lng: 116.4, lat: 39.9 }} zoom={4} width={560} height={320}>
      <CfMapScale position="bottom-left" />
      </CfMapTile>
    </>
  );
}

叠加图层

把 CfBubbleMap / CfHeatMap / CfChoroplethMap / CfFlowMap / CfMarkerCluster 直接当做子节点，它们会自动接 MapTile 注入的投影；同时显示 CfMapLegend 与 CfMapScale 控件。所有图层共用一份 viewport，缩放 / 平移时同步更新。

背景视口

src/App.vue

<script setup lang="ts">
import { CfMapTile, CfBubbleMap, CfMapLegend, CfMapScale } 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 },
];
</script>
<template>
  <CfMapTile
    :center="{ lng: 112, lat: 32 }"
    :zoom="4"
    :width="720"
    :height="520"
  >
    <CfBubbleMap :data="cities" unit=" 万" />
    <CfMapLegend
      kind="size"
      :domain="[1000, 2500]"
      title="人口"
      unit=" 万"
      position="top-left"
    />
    <CfMapScale position="bottom-left" />
  </CfMapTile>
</template>

<script setup>
import { CfMapTile, CfBubbleMap, CfMapLegend, CfMapScale } 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 },
];
</script>
<template>
  <CfMapTile
    :center="{ lng: 112, lat: 32 }"
    :zoom="4"
    :width="720"
    :height="520"
  >
    <CfBubbleMap :data="cities" unit=" 万" />
    <CfMapLegend
      kind="size"
      :domain="[1000, 2500]"
      title="人口"
      unit=" 万"
      position="top-left"
    />
    <CfMapScale position="bottom-left" />
  </CfMapTile>
</template>

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

export default function Demo() {
  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 },
  ];
  return (
    <>
      <CfMapTile center={{ lng: 112, lat: 32 }} zoom={4}>
      <CfBubbleMap data={cities} unit=" 万" />
      <CfMapLegend kind="size" domain={[1000, 2500]} title="人口" unit=" 万" position="top-left" />
      <CfMapScale position="bottom-left" />
      </CfMapTile>
    </>
  );
}

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

export default function Demo() {
  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 },
  ];
  return (
    <>
      <CfMapTile center={{ lng: 112, lat: 32 }} zoom={4}>
      <CfBubbleMap data={cities} unit=" 万" />
      <CfMapLegend kind="size" domain={[1000, 2500]} title="人口" unit=" 万" position="top-left" />
      <CfMapScale position="bottom-left" />
      </CfMapTile>
    </>
  );
}

瓦片源

tileSource 接受 { url, attribution?, subdomains?, maxZoom? }；URL 支持 {z}/{x}/{y} 与 {s} 占位。内置两个常量：

OSM_TILES（默认）—— https://tile.openstreetmap.org/{z}/{x}/{y}.png，使用请遵守 OSM 公共瓦片政策；生产环境建议自建瓦片或用商用服务（Mapbox、MapTiler、Stadia 等）。
CARTO_DARK_TILES —— CartoDB Dark Matter，适配暗色主题。

API

属性	类型	默认	说明
`center`	`{ lng, lat }`	`{ lng: 0, lat: 20 }`	初始中心
`zoom`	`number`	`2`	初始缩放（可小数）
`minZoom` / `maxZoom`	`number`	`0 / 19`	缩放夹紧
`tileSource`	`TileSource`	`OSM_TILES`	瓦片源
`width` / `height`	`number`	`480 / 320`	容器尺寸
`showZoomControl`	`boolean`	`true`	右上角 ± 按钮
`showAttribution`	`boolean`	`true`	右下角版权字
`staticView`	`boolean`	`false`	禁用所有交互
`@update:center` / `@update:zoom` / `@move`	event	—	视口变化通知

辅助导出：OSM_TILES / CARTO_DARK_TILES / lngLatToTile / tileToLngLat / makeProjection / makeUnproject / metersPerPixel。