用React 开发Mapbox遇到的问题

之前做的项目是里边已经搭建好的 今天自己想重新搭建一个Mapbox的项目但是在开发的时候遇到了一些问题

首先先下载依赖

npm i react-map-gl
npm i mapbox-gl-geocoder
npm install @mapbox/mapbox-gl-geocoder

下载完成之后构建Mapbox组件

function onLoad(e) {
        let Map = e.target
        geocoder = new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            mapboxgl: mapboxgl,
            language: 'zh',
        })
        Map.addControl(geocoder)
        onMapLoad(Map)
        addStreetLayer(Map)
    }

构建完成之后在main文件夹里边的 index.tsx 引入

import { useRef,useEffect } from 'react'
import MapBox from '../../components/mapBox'
import './style.scss'

function main() {
  const testRef = useRef<any>(null);
  /* 地图实例 */
  let mapInstance = null
  const map = useRef(null)
  function onMapLoad(Map) {
    // 存储Map
    mapInstance = Map
    // 添加全域地理位置
    addGeographicPosition(Map)
  }
  /* 添加地理位置 */
  function addGeographicPosition(Map) {
    map.current.addDot(
      Map,
      {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [0, 0],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [45, 2],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [4, 2],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [11, 21],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [43, 222],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [103.8198, 36.5613],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [109.8198, 36.5613],
            },
          }
        ],
      },
      () => {
      }
    )
  }

  return (
    <div className="main-container">
      <MapBox ref={map} onMapLoad={onMapLoad} />
    </div>
  )
}
export default main

然后这时候发现一个问题 为什么我鼠标是箭头而不是默认的张开的小手 点击拖拽地图 的时候鼠标样式也没改变

然后查了一下 在地图刚挂在的时候打印一下

   console.log(Map.getCanvas().style.cursor)

然后对比了一下 之前的代码 发现log出来都是空字符串 也在刚挂载的时候试着改成其他的

map.getCanvas().style.cursor = 'pointer'//改成小手指

也能起效 不过就是改不成Mapbox默认的张开的小手

各位大神有遇到过这个问题么 有没有大神知道这玩意儿怎么解决....