地图事件,定位，创建信息窗体

map.on('click', '图层名', (e) => {
   // map.getStyle().layers // 获取所有图层
   console.log('e: ', e)
   // 根据layer的id和当前点击的位置 获取点击位置附近的图层queryRenderedFeatures方法
   let bbox = [
        [e.point.x - 5, e.point.y - 5],
        [e.point.x + 5, e.point.y + 5]
   ]
   let features = this.map.queryRenderedFeatures(bbox, {
          layers: ['图层名']
   })

   // 创建信息窗体
   let coordinates = e.lngLat
   let description = features[0].properties.id + "<br/>" + features[0].properties.name
   let popup = new mapboxgl.Popup()
      .setLngLat(coordinates)
      .setHTML(description)
      .addTo(map)
   // 监听弹窗关闭事件
   popup.on('close', () => {
      console.log('Popup is closed')
      // 在这里编写你需要执行的代码
   })

   // 定位
   map.flyTo({center:coordinates,  zoom:16})
}) // 给图层添加点击事件

map.on('click', (e) => {
   console.log('e: ', e)
}) // 给地图添加点击事件

map.on('mouseenter', '图层名', () => {
   map.getCanvas().style.cursor = 'pointer' // 设置鼠标样式
})
map.on('mouseleave', '图层名', () => {
   map.getCanvas().style.cursor = ''
})