Preview Updated 2026-05-10

MapMiniMap 缩略地图

极简 SVG 缩略地图，画底图轮廓 + 当前视口矩形，常作为大地图的导航器。

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

基础用法

传入 GeoJSON FeatureCollection 作为底图，visibleRect 指定主地图当前视口范围；extent 控制整张缩略图覆盖的经纬度边界。无外部依赖、无 canvas，直接 SVG 渲染。

背景视口

src/App.vue

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

const viewport = { north: 60, south: 20, east: 60, west: 0 };
const extent = { north: 80, south: 0, east: 120, west: -60 };
</script>
<template>
  <CfMapMiniMap
    :geojson="sampleGeo"
    :extent="extent"
    :visibleRect="viewport"
    :width="240"
    :height="140"
  />
</template>

<script setup>
import { CfMapMiniMap } from '@chufix-design/maps-vue';
import { sampleGeo } from '../_shared/sample-geo';

const viewport = { north: 60, south: 20, east: 60, west: 0 };
const extent = { north: 80, south: 0, east: 120, west: -60 };
</script>
<template>
  <CfMapMiniMap
    :geojson="sampleGeo"
    :extent="extent"
    :visibleRect="viewport"
    :width="240"
    :height="140"
  />
</template>

import { CfMapMiniMap } from '@chufix-design/react';

export default function Demo() {
  import { CfMapMiniMap } from '@chufix-design/maps-vue';
  import { sampleGeo } from '../_shared/sample-geo';

  const viewport = { north: 60, south: 20, east: 60, west: 0 };
  const extent = { north: 80, south: 0, east: 120, west: -60 };
  return (
    <>
      <CfMapMiniMap geojson={sampleGeo} extent={extent} visibleRect={viewport} width={240} height={140} />
    </>
  );
}

import { CfMapMiniMap } from '@chufix-design/react';

export default function Demo() {
  import { CfMapMiniMap } from '@chufix-design/maps-vue';
  import { sampleGeo } from '../_shared/sample-geo';

  const viewport = { north: 60, south: 20, east: 60, west: 0 };
  const extent = { north: 80, south: 0, east: 120, west: -60 };
  return (
    <>
      <CfMapMiniMap geojson={sampleGeo} extent={extent} visibleRect={viewport} width={240} height={140} />
    </>
  );
}

API

属性	类型	默认	说明
`geojson`	`{ type: 'FeatureCollection'; features: GeoJsonFeature[] }`	—	底图 GeoJSON（Polygon / MultiPolygon）
`extent`	`MapBounds`	`WORLD_BOUNDS`	缩略图覆盖范围 `{ north, south, east, west }`
`visibleRect`	`MapBounds`	—	当前视口矩形
`width` / `height`	`number`	`160` / `90`	SVG 尺寸

辅助函数：WORLD_BOUNDS、projectToBox(lng, lat, bounds, w, h)、polygonToPath(coords, multi, bounds, w, h) 可直接 import 使用。