基于BMapGL的自定义动画卡点

应用场景介绍

在基于BMapGL的Web地图应用中，为了展示更加生动、直观的地理信息，需要对地图中的卡点进行动画展示。本文介绍了如何使用BMapGL提供的API和自定义渲染方式，实现个性化、交互式的动画卡点效果。

代码基本功能介绍

本代码主要实现了以下功能：

动态扩散圆动画卡点
自定义雷达扫描动画卡点
自定义雨滴动画卡点
动画控制按钮（启动/停止动画）

功能实现步骤及关键代码分析说明

1. 引入BMapGL API

await Promise.all([
  this.loadScripts([
    'https://api.map.baidu.com/api?type=subway&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
    'http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
  ]),
])
const BMapGL = window.BMapGL

2. 定义自定义扩散圆动画卡点

class CustomSymbol extends BMapGL.Symbol {
  constructor(_size, _anchor) {
    super(_size, _anchor)
    this.isReDraw = true
  }

  render(map) {
    const duration = 1500
    const t = (performance.now() % duration) / duration

    const radius = (this.width / 2) * 0.1
    const outerRadius = (this.width / 2) * 0.5 * t + radius
    const context = this.context
    context.save()

    context.beginPath()
    context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2)
    context.fillStyle = 'rgba(38,1,252,' + (1 - t) + ')'
    context.fill()

    context.beginPath()
    context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2)
    context.fillStyle = 'rgba(38,1,252, 1)'
    context.strokeStyle = 'rgba(38,1,252, .1)'
    context.lineWidth = 2 + 4 * (1 - t)
    context.fill()
    context.stroke()

    context.restore()

    this.data = context.getImageData(
      0,
      0,
      this.context.canvas.width,
      this.context.canvas.height,
    )
    return true
  }
}

创建自定义符号类，继承自BMapGL.Symbol。
在render方法中，根据时间动态绘制扩散圆动画。
将自定义符号添加到地图中：map.addOverlay(marker1)。

3. 定义自定义雷达扫描动画卡点

// 自定义canvas
const canvas = document.createElement('canvas')
canvas.width = size * 2
canvas.height = size * 2

function getRadarTextureCanvas() {
  const duration = 1000
  const t = (performance.now() % duration) / duration

  const radius = (size / 2) * 0.3
  const outerRadius = (size / 2) * 0.7 * t + radius
  const context = canvas.getContext('2d')
  context.save()

  context.beginPath()
  context.arc(size / 2, size / 2, outerRadius, 0, Math.PI * 2)
  context.fillStyle = 'rgba(255,200,200,' + (1 - t) + ')'
  context.fill()

  context.beginPath()
  context.arc(size / 2, size / 2, radius, 0, Math.PI * 2)
  context.fillStyle = 'rgba(255, 100, 100, 1)'
  context.strokeStyle = 'white'
  context.lineWidth = 2 + 4 * (1 - t)
  context.fill()
  context.stroke()
  context.restore()
}

var canvasOverlay = new BMapGL.GroundOverlay(bounds, {
  type: 'canvas',
  url: canvas,
  opacity: 0.9,
  isReDraw: true,
  drawHook: getRadarTextureCanvas,
})
map.addOverlay(canvasOverlay)

创建自定义canvas，并设置绘制钩子函数drawHook。
在getRadarTextureCanvas函数中，根据时间动态绘制雷达扫描动画。
将自定义canvas覆盖物添加到地图中：map.addOverlay(canvasOverlay)。

4. 定义自定义雨滴动画卡点

function RAIN(ctx, t, dotColor, clodColor) {
  var w = ctx.canvas.width,
    h = ctx.canvas.height,
    s = Math.min(w, h)

  rainObject(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, dotColor)
  cloudObject(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, clodColor)
}
class RainSymbol extends BMapGL.Symbol {
  constructor(_size, _anchor) {
    super(_size, _anchor)
    this.isReDraw = true
  }

  render(map) {
    this.context.clearRect(0, 0, this.width * 2, this.height * 2)
    var time = Date.now()
    RAIN(this.context, time, '#BFBFBF', '#999')
    this.data = this.context.getImageData(
      0,
      0,
      this.context.canvas.width,
      this.context.canvas.height,
    )
    return true
  }
}

创建自定义雨滴符号类，继承自BMapGL.Symbol。
在render方法中，根据时间动态绘制雨滴动画。
将自定义雨滴符号添加到地图中：map.addOverlay(marker2)。

5. 动画控制按钮

<ul class="drawing-panel">
  <li class="btn" onclick="stop()">动画停止</li>
  <li class="btn" onclick="start()">动画开始</li>
</ul>

function start() {
  custom.isReDraw = true
  canvasOverlay.isReDraw = true
}

function stop() {
  custom.isReDraw = false
  canvasOverlay.isReDraw = false
}

添加HTML按钮元素，用于控制动画的启动和停止。
通过isReDraw属性控制动画是否重绘。

总结与展望

本代码展示了如何使用BMapGL的API和自定义渲染方式，实现个性化、交互式的动画卡点效果。该方法可以广泛应用于展示动态数据、可视化分析等场景。

未来拓展与优化方向：

优化动画性能，提高流畅度。
支持更多类型的动画效果，如粒子动画、火焰动画等。
与其他地理信息数据进行联动，实现更丰富的交互体验。

ECHO recommendation

ScriptEcho.ai