VSprite

VSprite 组件用于添加一个图标或者图片到样式中。

• 配置文档

纹理图片网站

• Textures.com：拥有超过140,000张各种材质的纹理图像，包括织物、木材、金属等，可用于图形设计和背景。
• Transparent Textures- 免费无缝纹理图案。
• Subtle Patterns- 高质量背景纹理
• Pattern Monster- 免费可下载 SVG/PNG 纹理

雪碧图文件说明

有效的雪碧图必须提供两种类型的文件：索引文件和图像文件。例如：

"sprite": "https://mhaibaraai.github.io/mapbox/sprite/light-v11"

• 自动生成完整的 URL，.json 用于索引文件，.png 用于图像文件：

  https://mhaibaraai.github.io/mapbox/sprite/light-v11.json 和 https://mhaibaraai.github.io/mapbox/sprite/light-v11.png

• 自动将 @2x 附加到 高DPI 设备上

  https://mhaibaraai.github.io/mapbox/sprite/light-v11@2x.json 和 https://mhaibaraai.github.io/mapbox/sprite/light-v11@2x.png

添加雪碧图文件

在 VMapbox 组件中添加 sprite 属性。

<VMapbox sprite="https://mhaibaraai.github.io/mapbox/sprite/dark-v11" />

sprite-file.vue

<script lang="ts" setup>
import type { GeoSourceSetDataEvent } from '@movk-repo/mapbox'
import type { FeatureCollection } from 'geojson'
import { getTdtRandomToken } from '@movk-repo/libs'
import { VGeoSource, VMapbox, VSymbolLayer, VTianditu } from '@movk-repo/mapbox'

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

const sourceData: FeatureCollection = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [120.128269038247893, 30.21502444852641],
      },
      properties: {
        name: '杭州动物园',
      },
    },
  ],
}

function setData({ map }: GeoSourceSetDataEvent) {
  map?.jumpTo({
    center: [120.128269038247893, 30.21502444852641],
    zoom: 15,
    pitch: 56.49999999999969,
  })
}
</script>

<template>
  <VMapbox sprite="https://mhaibaraai.github.io/mapbox/sprite/dark-v11" :access-token="accessToken">
    <VTianditu :token="token" />
    <VGeoSource :data="sourceData" @set-data="setData">
      <VSymbolLayer :layout="{ 'icon-image': 'zoo', 'icon-size': 3 }" />
    </VGeoSource>
  </VMapbox>
</template>

隐藏源代码

添加自定义图标

使用 VSprite 组件添加自定义图标

custom-sprite.vue

<script lang="ts" setup>
import type { GeoSourceSetDataEvent } from '@movk-repo/mapbox'
import type { FeatureCollection } from 'geojson'
import type { PlusColumn } from 'plus-pro-components'
import { getTdtRandomToken } from '@movk-repo/libs'
import { VGeoSource, VMapbox, VSprite, VSymbolLayer, VTianditu } from '@movk-repo/mapbox'

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

const sourceData: FeatureCollection = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [120.128269038247893, 30.21502444852641],
      },
      properties: {
        name: '杭州动物园',
      },
    },
  ],
}

function setData({ map }: GeoSourceSetDataEvent) {
  map?.jumpTo({
    center: [120.128269038247893, 30.21502444852641],
    zoom: 15,
    pitch: 56.49999999999969,
  })
}

function createImageData() {
  const width = 64 // The image will be 64 pixels square
  const bytesPerPixel = 4 // Each pixel is represented by 4 bytes
  const data = new Uint8Array(width * width * bytesPerPixel)
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < width; y++) {
      const offset = (y * width + x) * bytesPerPixel
      data[offset + 0] = (y / width) * 255 // red
      data[offset + 1] = (x / width) * 255 // green
      data[offset + 2] = 128 // blue
      data[offset + 3] = 255 // alpha
    }
  }
  return {
    width,
    height: width,
    data,
  }
}

const formData = ref({
  image: '/mapbox/sprite/zoo.svg',
  iconColor: '#e63946',
  iconSize: 0.3,
})
const columns: PlusColumn[] = [
  {
    colProps: { span: 24 },
    label: '图标',
    prop: 'image',
    valueType: 'radio',
    fieldProps: {
      max: 1,
    },
    options: [
      { label: 'zoo.svg', value: '/mapbox/sprite/zoo.svg' },
      { label: 'zoo.png', value: '/mapbox/sprite/zoo.png' },
      { label: '自定义', value: false },
    ],
  },
  {
    colProps: { span: 8 },
    prop: 'iconSize',
    label: '图标大小',
    valueType: 'slider',
    fieldProps: {
      min: 0.1,
      max: 1,
      step: 0.1,
    },
  },
  {
    prop: 'iconColor',
    label: '图标颜色',
    valueType: 'color-picker',
  },
]
</script>

<template>
  <VMapbox :access-token="accessToken">
    <VSprite id="zoo" :image="formData.image || createImageData()" :icon-color="formData.iconColor" />
    <VTianditu :token="token" type="img_w" terrain />
    <VGeoSource :data="sourceData" @set-data="setData">
      <VSymbolLayer :layout="{ 'icon-image': 'zoo', 'icon-size': formData.iconSize }" />
    </VGeoSource>
    <template #before>
      <PlusForm
        v-model="formData" :row-props="{ gutter: 20 }" :col-props="{ span: 6 }" :columns="columns"
        :has-footer="false"
      />
    </template>
  </VMapbox>
</template>

隐藏源代码

API

spriteProps

属性名	说明	类型	默认值
id	图标 ID	string	必填
image	图像（可为 SVG）	string | object	必填
iconColor	图标颜色（仅支持 SVG）	string	-
options	图标选项	object	-

类型定义

SpriteImageData

plugin/Sprite/Sprite.ts

export type SpriteImageData = HTMLImageElement | ImageBitmap | ImageData | StyleImageInterface | {
  width: number
  height: number
  data: Uint8Array | Uint8ClampedArray
}

SpriteOptions

plugin/Sprite/Sprite.ts

export interface SpriteOptions {
  pixelRatio: number
  sdf: boolean
  content: [number, number, number, number]
  stretchX: [number, number][]
  stretchY: [number, number][]
}