VFeatureState

VFeatureState 控件用于在地图上管理功能状态。

基础用法

将功能状态添加到地图中。

feature-state.vue

<script lang="ts" setup>
import type { FillLayerProps } from '@movk-repo/mapbox'
import type { GeoJsonProperties } from 'geojson'
import type { LngLatLike, MapMouseEvent } from 'mapbox-gl'
import { getTdtRandomToken } from '@movk-repo/libs'
import { VFeatureState, VFillLayer, VGeoSource, VMapbox, VPopup, VTianditu } from '@movk-repo/mapbox'

interface PopupState {
  visible: boolean
  featureId?: string | number
  center?: LngLatLike
  properties?: GeoJsonProperties
}

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
const token = getTdtRandomToken()

const data = '/mapbox/data/us-states.geojson'

const paint: FillLayerProps['paint'] = {
  'fill-color': '#627BC1',
  'fill-opacity': [
    'case',
    ['boolean', ['feature-state', 'hover'], false],
    1,
    0.5,
  ],
}
const popup = ref<PopupState>(init())

function init() {
  return {
    visible: false,
    featureId: undefined,
    center: undefined,
    properties: undefined,
  }
}

function handleMouseMove(e: MapMouseEvent) {
  if (!e.features)
    return
  const feature = e.features[0]
  popup.value = {
    visible: true,
    featureId: feature.id,
    center: e.lngLat,
    properties: feature.properties,
  }
}
function handleMouseLeave() {
  popup.value = init()
}
</script>

<template>
  <VMapbox :center="[-100.04, 38.907]" :zoom="3" :access-token="accessToken">
    <VTianditu :token="token" />
    <VGeoSource :data="data">
      <VFillLayer :paint="paint" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave">
        <VFeatureState :feature-id="popup.featureId" :state="{ hover: true }" />
        <VPopup v-model="popup.visible" :center="popup.center">
          {{ popup.properties }}
        </VPopup>
      </VFillLayer>
    </VGeoSource>
  </VMapbox>
</template>

隐藏源代码

API

featureStateProps

属性名	说明	类型	默认值
featureId	功能标识ID	string, number	-
state	功能状态	object	必填