Car Animation

Example

Example Source Code

<template>
  <div class="map-container">
    <mb-map :zoom="11" :center="[125.2, 43.9]" @created="mapCreated">
      <mb-tianditu-layer :types="['vec', 'cva']" />
    </mb-map>
  </div>
</template>

<script setup lang="ts">
import EchartsLayer from '../echarts-layer.min'
import type { Map } from 'mapbox-gl'

const mapCreated = (map: Map) => {
  initEchart(map)
}
const initEchart = (map: Map) => {
  fetch(`${__RESOURCE_URL__}json/changchunBus.json`)
    .then((res) => res.json())
    .then((data) => {
      const lines = Array.prototype.concat.apply(
        [],
        data.map((busLine) => {
          busLine.lineStyle.normal.color = '#000'
          busLine.effect = {
            constantSpeed: 60,
            show: true,
            trailLength: 0,
            symbolSize: 30,
            symbol: (function () {
              if (Math.round(Math.random() * 2) % 2) {
                return `image://${`${__RESOURCE_URL__}images/blueCar.png`}`
              } else {
                return `image://${`${__RESOURCE_URL__}images/redCar.png`}`
              }
            })(),
          }
          return busLine
        })
      )

      const option = {
        animation: false,
        GLMap: {
          roam: true,
        },
        series: [
          {
            type: 'lines',
            coordinateSystem: 'GLMap',
            polyline: true,
            data: lines,
            silent: true,
            lineStyle: {
              normal: {
                opacity: 1,
                width: 2,
              },
            },
            progressiveThreshold: 500,
            progressive: 100,
          },
          {
            type: 'lines',
            coordinateSystem: 'GLMap',
            polyline: true,
            data: lines,
            lineStyle: {
              normal: {
                width: 0.2,
              },
            },
            effect: {
              constantSpeed: 60,
              show: true,
              trailLength: 0,
              symbolSize: 30,
            },
          },
        ],
      }
      const echartslayer = new EchartsLayer(map)
      echartslayer.chart.setOption(option)
    })
}
</script>