maplibreGl 드래그 이벤트 구현

const { data: { rows: levelDatas = \[\] } = {} } = await this.$axios.get('/api', {  
params: {  
facilityId: this.facility.\_id,  
indoor: 'level',  
},  
})

  this.levelDatas = levelDatas

  this.map.addSource('facility-level', {
    type: 'geojson',
    data: turfFeatureCollection(levelDatas),
    // generateId: true,
    promoteId: 'level',
  })

  this.map.addLayer({
    id: 'facility-level',
    type: 'fill-extrusion',
    source: 'facility-level',
    layout: {
      visibility: 'visible', // IndoorMap 표시할 때 숨김
    },
    paint: {
      'fill-extrusion-color': [
        'case',
        ['boolean', ['feature-state', 'hover'], false],
        '#0000ff',
        ['==', ['%', ['get', 'level'], 2], 1],
        '#627BC1',
        '#f60916',
      ],
      'fill-extrusion-opacity': 0.6,
      'fill-extrusion-height': ['case', ['==', ['get', 'level'], 1], 5, ['+', ['*', ['-', ['get', 'level'], 1], 5.5], 5]],
      'fill-extrusion-base': ['case', ['==', ['get', 'level'], 1], 0, ['*', ['-', ['get', 'level'], 1], 5.5]],
    },
  })

  this.map.on('mousemove', 'facility-level', e => {
    const [feature = {}] = this.map.queryRenderedFeatures([e.point.x, e.point.y], { layers: ['facility-level'] })

    if (feature) {
      this.map._canvas.style.cursor = 'pointer'
      if (this.hoveredStateId) {
        this.map.setFeatureState({ source: 'facility-level', id: this.hoveredStateId }, { hover: false })
      }
      this.hoveredStateId = feature.id
      this.map.setFeatureState({ source: 'facility-level', id: this.hoveredStateId }, { hover: true })
    }
  })

  this.map.on('mouseleave', 'facility-level', () => {
    this.map._canvas.style.cursor = ''
    this.map.setFeatureState({ source: 'facility-level', id: this.hoveredStateId }, { hover: false })
  })

  this.map.on('click', 'facility-level', () => {
    this.showIndoorMap()
  })