雪特效示例

示例

示例源码

<template>
  <div class="map-container">
    <mb-map :zoom="6" :pitch="90" :center="[120, 30]" @created="mapCreated">
      <mb-tianditu-layer :types="['img', 'cva']" @created="layerCreated" />
    </mb-map>
  </div>
</template>

<script setup lang="ts">
import type { MapboxInstance } from '@mapbox-vue3/core'

let map: MapboxInstance

const mapCreated = (mapbox: MapboxInstance) => {
  map = mapbox
}
const layerCreated = () => {
  initL7()
}
const initL7 = () => {
  const layer = new map.mapboxgl.supermap.L7Layer({ type: 'GeometryLayer' })
  layer
    .getL7Layer()
    .shape('sprite')
    .size(10)
    .style({
      heightfixed: true,
      mapTexture: `${__RESOURCE_URL__}images/snowDrop.png`,
      center: [120, 30],
      spriteCount: 60,
      spriteRadius: 10,
      spriteTop: 1000,
      spriteUpdate: 2,
    })
  map.addLayer(layer)
}
</script>