Rain

Example

Example Source Code

<template>
  <button class="primary" @click="update">Show/Hide:{{ show }}</button>
  <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 { ref } from 'vue'
import type { MapboxInstance } from '@mapbox-vue3/core'

const show = ref(true)
let map: MapboxInstance
let layer: any

const mapCreated = (mapbox: MapboxInstance) => {
  map = mapbox
}
const layerCreated = () => {
  initL7()
}
const update = () => {
  show.value = !show.value
  layer.setVisibility(show.value)
  layer.reRender()
}
const initL7 = () => {
  layer = new map.mapboxgl.supermap.L7Layer({ type: 'GeometryLayer' })
  layer
    .getL7Layer()
    .shape('sprite')
    .size(10)
    .style({
      opacity: 0.7,
      mapTexture: `${__RESOURCE_URL__}images/rainDrop.png`,
      center: [120, 30],
      spriteCount: 120,
      spriteRadius: 10,
      spriteTop: 1000,
      spriteUpdate: 5,
      spriteScale: 0.6,
    })
  map.addLayer(layer)
}
</script>