VImageSource

VImageSource ：包含图像的数据源。

• 配置文档
• 样式规范

注意

只支持叠加 EPSG:3857 墨卡托投影坐标系的图片。

基础用法

image-source.vue

<script lang="ts" setup>
import type { ImageSourceProps, MapboxProps } from '@movk-repo/mapbox'
import { getTdtRandomToken } from '@movk-repo/libs'
import { VImageSource, VMapbox, VRasterLayer, VTianditu } from '@movk-repo/mapbox'

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

const options: MapboxProps['defaultOptions'] = {
  maxZoom: 6,
  minZoom: 4,
  zoom: 5,
  center: [-75.789, 41.874],
}

const url = '/mapbox/gif/radar.gif'
const coordinates: ImageSourceProps['coordinates'] = [
  [-80.425, 46.437],
  [-71.516, 46.437],
  [-71.516, 37.936],
  [-80.425, 37.936],
]
</script>

<template>
  <VMapbox :access-token="accessToken" :default-options="options">
    <VTianditu type="img_w" :token="token" />
    <VImageSource :url="url" :coordinates="coordinates">
      <VRasterLayer
        :paint="{
          'raster-fade-duration': 0,
        }"
      />
    </VImageSource>
  </VMapbox>
</template>

隐藏源代码

动态图像

image-source-animate.vue

<script lang="ts" setup>
import type { ImageSourceProps, MapboxProps } from '@movk-repo/mapbox'
import { getTdtRandomToken } from '@movk-repo/libs'
import { VImageSource, VMapbox, VRasterLayer, VTianditu, VUIControl } from '@movk-repo/mapbox'

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

const options: MapboxProps['defaultOptions'] = {
  maxZoom: 6,
  minZoom: 4,
  zoom: 4.5,
  center: [-75.789, 41.874],
}

const coordinates: ImageSourceProps['coordinates'] = [
  [-80.425, 46.437],
  [-71.516, 46.437],
  [-71.516, 37.936],
  [-80.425, 37.936],
]

const frameCount = 5
let currentImage = 0
let interval: number | NodeJS.Timeout | null = null

const active = ref(false)
const url = ref('/mapbox/gif/radar0.gif')

watch(() => active.value, (value) => {
  if (value) {
    interval = setInterval(() => {
      currentImage = (currentImage + 1) % frameCount
      url.value = `/mapbox/gif/radar${currentImage}.gif`
    }, 1000)
  }
  else {
    if (interval !== null) {
      clearInterval(interval)
      interval = null
    }
    currentImage = 0
    url.value = `/mapbox/gif/radar0.gif`
  }
})
</script>

<template>
  <VMapbox :access-token="accessToken" :default-options="options">
    <VTianditu type="img_w" :token="token" />
    <VImageSource :url="url" :coordinates="coordinates">
      <VRasterLayer
        :paint="{
          'raster-fade-duration': 0,
        }"
      />
    </VImageSource>
    <VUIControl>
      <ElSwitch v-model="active" active-text="开启动画" inactive-text="关闭动画" />
    </VUIControl>
  </VMapbox>
</template>

隐藏源代码

Api

imageSourceProps

属性名	说明	类型	默认值
url	服务的URL	string	-
coordinates	图像角点坐标,左上顺时针	array	必填

imageSourceEmits

事件名	说明	回调参数
load	源加载完成后触发	Function

类型定义

ImageSourceLoadEvent

sources/ImageSource/ImageSource.ts

export interface ImageSourceLoadEvent {
  source: ImageSource
  map: Map
}