VCanvasSource

VCanvasSource 画布源。

• 配置文档

基础用法

添加圆圈并在地图上移动

canvas-source.vue

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

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

const options: MapboxProps['defaultOptions'] = {
  zoom: 5,
  minZoom: 4,
}

const coordinates: CanvasSourceProps['coordinates'] = [
  [114.70967317208017, 33.92510987711752],
  [123.61767317208017, 33.92510987711752],
  [123.61767317208017, 26.39510987711752],
  [114.70967317208017, 26.39510987711752],
]

let ctx: CanvasRenderingContext2D | null = null
const circles: any[] = []
const radius = 20

class Circle {
  x: number
  y: number
  dx: number
  dy: number
  radius: number
  color: string

  constructor(x: number, y: number, dx: number, dy: number, radius: number, color: string) {
    this.x = x
    this.y = y
    this.dx = dx
    this.dy = dy
    this.radius = radius
    this.color = color
  }

  draw() {
    if (!ctx)
      return
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
    ctx.strokeStyle = this.color
    ctx.stroke()
  }

  update() {
    if (this.x + this.radius > 400 || this.x - this.radius < 0) {
      this.dx = -this.dx
    }

    if (this.y + this.radius > 400 || this.y - this.radius < 0) {
      this.dy = -this.dy
    }

    this.x += this.dx
    this.y += this.dy

    this.draw()
  }
}

for (let i = 0; i < 5; i++) {
  const color
            = `#${
              (0x1000000 + Math.random() * 0xFFFFFF).toString(16).substr(1, 6)}`
  const x = Math.random() * (400 - radius * 2) + radius
  const y = Math.random() * (400 - radius * 2) + radius

  const dx = (Math.random() - 0.5) * 2
  const dy = (Math.random() - 0.5) * 2

  circles.push(new Circle(x, y, dx, dy, radius, color))
}

function animate() {
  requestAnimationFrame(animate)
  ctx?.clearRect(0, 0, 400, 400)

  for (let r = 0; r < 5; r++) {
    circles[r].update()
  }
}

function getCanvas(canvas: HTMLCanvasElement) {
  canvas.style.display = 'none'
  canvas.width = 400
  canvas.height = 400
  ctx = canvas.getContext('2d')
  animate()
}
</script>

<template>
  <VMapbox :access-token="accessToken" :default-options="options">
    <VTianditu :token="token" />
    <VCanvasSource :coordinates="coordinates" @get-canvas="getCanvas">
      <VRasterLayer />
    </VCanvasSource>
  </VMapbox>
</template>

隐藏源代码

Api

canvasSourceProps

属性名	说明	类型	默认值
coordinates	图像角点坐标,左上顺时针	array	必填
animate	画布源是否是动画的	boolean	-

canvasSourceEmits

事件名	说明	回调参数
load	源加载完成后触发	Function
getCanvas	获取画布元素	Function

类型定义

CanvasSourceSpecification

sources/CanvasSource/CanvasSource.ts

export type CanvasSourceSpecification = {
  type: 'canvas'
  coordinates: [
    [number, number],
    [number, number],
    [number, number],
    [number, number],
  ]
  animate?: boolean
  canvas: string | HTMLCanvasElement
}

CanvasSourceLoadEvent

sources/CanvasSource/CanvasSource.ts

export interface CanvasSourceLoadEvent {
  source: CanvasSource
  map: Map
  canvas: HTMLCanvasElement
}