MapboxLayer

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

const data: FeatureCollection = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: { name: '天安门' },
      geometry: { type: 'Point', coordinates: [116.397, 39.908] }
    },
    {
      type: 'Feature',
      properties: { name: '国贸' },
      geometry: { type: 'Point', coordinates: [116.461, 39.909] }
    },
    {
      type: 'Feature',
      properties: { name: '中关村' },
      geometry: { type: 'Point', coordinates: [116.316, 39.983] }
    }
  ]
}

const selected = ref<string | null>(null)

// 图层 click 事件携带命中要素，从 properties 读取业务字段
function onClick(event: MapEventOf<'click'>) {
  selected.value = (event.features?.[0]?.properties?.name as string) ?? null
}
</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.39, 39.93], zoom: 11 }"
    >
      <MapboxLayer
        layer-id="poi"
        type="circle"
        :source="{ type: 'geojson', data }"
        :paint="{
          'circle-radius': 9,
          'circle-color': '#f43f5e',
          'circle-stroke-width': 2,
          'circle-stroke-color': '#fff'
        }"
        @click="onClick"
      />
      <div
        class="absolute right-3 top-3 z-10 rounded-(--ui-radius) border border-default bg-default/80 px-3 py-1.5 text-sm backdrop-blur"
      >
        {{ selected ? `已选中：${selected}` : '点击任意圆点' }}
      </div>
    </MapboxMap>
  </div>
</template>

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

const data: FeatureCollection = {
  type: 'FeatureCollection',
  features: Array.from({ length: 30 }, (_, i) => ({
    type: 'Feature',
    properties: { level: i % 3 },
    geometry: {
      type: 'Point',
      coordinates: [116.2 + ((i * 13) % 40) / 100, 39.8 + ((i * 29) % 25) / 100]
    }
  }))
}

const levels = [
  { label: 'All', value: -1 },
  { label: 'Level 0', value: 0 },
  { label: 'Level 1', value: 1 },
  { label: 'Level 2', value: 2 }
]
const active = ref(-1)

// filter 为表达式：仅渲染匹配要素，切换时即时生效（setFilter）
const filter = computed<FilterSpecification | undefined>(() =>
  active.value === -1 ? undefined : ['==', ['get', 'level'], active.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 flex flex-wrap gap-2">
        <UButton
          v-for="lv in levels"
          :key="lv.value"
          size="xs"
          :color="active === lv.value ? 'primary' : 'neutral'"
          variant="solid"
          @click="active = lv.value"
        >
          {{ lv.label }}
        </UButton>
      </div>
      <MapboxLayer
        layer-id="points"
        type="circle"
        :source="{ type: 'geojson', data }"
        :filter="filter"
        :paint="{
          'circle-radius': 7,
          'circle-color': [
            'match',
            ['get', 'level'],
            0,
            '#3b82f6',
            1,
            '#f59e0b',
            2,
            '#ef4444',
            '#888'
          ],
          'circle-stroke-width': 1,
          'circle-stroke-color': '#fff'
        }"
      />
    </MapboxMap>
  </div>
</template>