MapboxSource

声明式数据源，支持 geojson / vector / raster / image / video，按类型增量更新且可被多个图层复用。

简介

MapboxSource 声明式管理一个 mapbox-gl 数据源：地图就绪时 addSource，source 变更时按类型走增量更新（geojson 调 setData、vector 调 setTiles）而非整源重建，卸载时安全移除。子图层经 source="<sourceId>" 字符串引用该源。

同一份数据可同时供多个图层消费，这是显式 MapboxSource 相较 MapboxLayer 内联源的价值。

用法

一份 geojson 同时驱动「光晕」与「实心圆」两个图层：

<script setup lang="ts">
import type { FeatureCollection } from 'geojson'

// 同一数据源同时供「实心圆」与「光晕」两个图层消费
const data: FeatureCollection = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {},
      geometry: { type: 'Point', coordinates: [116.397, 39.908] }
    },
    { type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: [116.45, 39.93] } },
    { type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: [116.35, 39.88] } }
  ]
}
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap
      :options="{ style: 'mapbox://styles/mapbox/light-v11', center: [116.4, 39.9], zoom: 11 }"
    >
      <MapboxSource source-id="cities" :source="{ type: 'geojson', data }">
        <MapboxLayer
          layer-id="cities-halo"
          type="circle"
          source="cities"
          :paint="{ 'circle-radius': 18, 'circle-color': '#3b82f6', 'circle-opacity': 0.2 }"
        />
        <MapboxLayer
          layer-id="cities-core"
          type="circle"
          source="cities"
          :paint="{ 'circle-radius': 7, 'circle-color': '#3b82f6' }"
        />
      </MapboxSource>
    </MapboxMap>
  </div>
</template>

示例

响应式更新

source 为响应式：切换数据集仅触发 setData，图层不重建：

<script setup lang="ts">
import type { FeatureCollection } from 'geojson'

function randomPoints(count: number, seed: number): FeatureCollection {
  return {
    type: 'FeatureCollection',
    features: Array.from({ length: count }, (_, i) => ({
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'Point',
        coordinates: [116.2 + ((i * seed) % 40) / 100, 39.8 + ((i * seed * 7) % 25) / 100]
      }
    }))
  }
}

const datasets = [randomPoints(12, 13), randomPoints(40, 31)]
const index = ref(0)

// source 为响应式：切换数据集仅触发 setData 增量更新，不重建源
const source = computed(() => ({ type: 'geojson' as const, data: datasets[index.value]! }))
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap
      :options="{ style: 'mapbox://styles/mapbox/light-v11', center: [116.4, 39.9], zoom: 10 }"
    >
      <div class="absolute left-3 top-3 z-10">
        <UButton size="xs" color="neutral" variant="solid" @click="index = index === 0 ? 1 : 0">
          Toggle dataset
        </UButton>
      </div>
      <MapboxSource source-id="pts" :source="source">
        <MapboxLayer
          layer-id="pts"
          type="circle"
          source="pts"
          :paint="{ 'circle-radius': 6, 'circle-color': '#3b82f6', 'circle-opacity': 0.8 }"
        />
      </MapboxSource>
    </MapboxMap>
  </div>
</template>

API

Props

Prop	Default	Type
`sourceId`		`string` 数据源 id，供图层经 source 字段按字符串引用
`source`		`mapboxgl.VectorSourceSpecification \| mapboxgl.RasterSourceSpecification \| mapboxgl.RasterDEMSourceSpecification \| mapboxgl.RasterArraySourceSpecification \| mapboxgl.GeoJSONSourceSpecification \| mapboxgl.VideoSourceSpecification \| mapboxgl.ImageSourceSpecification \| mapboxgl.ModelSourceSpecification` 数据源定义 https://docs.mapbox.com/style-spec/reference/sources

Slots

Slot	Type
`default`	`{}`

Changelog

No recent changes

MapboxMap

根组件，在客户端创建 Mapbox GL 实例并经 MapboxContext 下发，支持相机 v-model 双向绑定与跨路由持久化。

MapboxLayer

声明式图层，按 type 渲染并经 paint / layout / filter 控制样式，支持内联 source 与图层交互事件。