react中使用mars3d构建地图场景

1. 使用vite创建一个react的项目

2. 安装mars3d npm install mars3d -S

3. 在 vite.config 文件中添加 vite-mars3d-plugin ```typescript import mars3dCesium from “vite-plugin-mars3d”

plugins: [ mars3dCesium(), ]

4. 编写组件用于初始化地图
```tsx
import { useEffect } from "react"
import * as mars3d from "mars3d"
import { getQueryString, isPc } from "@mars/utils/mars-util"
interface MarsMapProps {
  url: string
  mapKey?: string
  options?: any
  onLoad?: (map: mars3d.Map) => void
}
function MarsMap(props: MarsMapProps) {
  // 使用用户传入的 mapKey 拼接生成 withKeyId 作为当前显示容器的id
  const withKeyId = `mars3d-container-${props.mapKey}`
  // 用于存放地球组件实例
  let map: mars3d.Map // 地图对象
  useEffect(() => {
    mars3d.Util.fetchJson({ url: props.url }).then((data: any) => {
      console.log(data)
      initMars3d({
        // 合并配置项
        ...data.map3d,
        ...props.options
      })
    })
    return () => {
      map && map.destroy()
    }
  }, [])
  const initMars3d = (option: any) => {
    map = new mars3d.Map(withKeyId, option)
    // //如果有xyz传参，进行定位
    const lat = getQueryString("lat")
    const lng = getQueryString("lng")
    if (lat && lng) {
      map.flyToPoint(new mars3d.LngLatPoint(lng, lat), { duration: 0 })
    }
    // 开场动画
    // map.openFlyAnimation();
    // //针对不同终端的优化配置
    if (isPc()) {
      // Cesium 1.61以后会默认关闭反走样，对于桌面端而言还是开启得好，
      map.scene.postProcessStages.fxaa.enabled = true
      map.zoomFactor = 2.0 // 鼠标滚轮放大的步长参数
      // IE浏览器优化
      if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
        map.viewer.targetFrameRate = 20 // 限制帧率
        map.scene.requestRenderMode = true // 取消实时渲染
      }
    } else {
      map.zoomFactor = 5.0 // 鼠标滚轮放大的步长参数
      map.scene.screenSpaceCameraController.enableTilt = false
      // 移动设备上禁掉以下几个选项，可以相对更加流畅
      map.scene.requestRenderMode = true // 取消实时渲染
      map.scene.fog.enabled = false
      map.scene.skyAtmosphere.show = false
      map.scene.globe.showGroundAtmosphere = false
    }
    // //二三维切换不用动画
    if (map.viewer.sceneModePicker) {
      map.viewer.sceneModePicker.viewModel.duration = 0.0
    }
    // webgl渲染失败后，刷新页面
    map.on(mars3d.EventType.renderError, async () => {
      alert("程序内存消耗过大，请重启浏览器")
      window.location.reload()
    })
    // map构造完成后的一些处理
    onMapLoad()
    props.onLoad(map)
  }
  // map构造完成后的一些处理
  function onMapLoad() {
    // Mars3D地图内部使用，如右键菜单弹窗
    // @ts-ignore
    // window.globalAlert = $alert
    // @ts-ignore
    // window.globalMsg = $message
    // 用于 config.json 中 西藏垭口 图层的详情按钮 演示
    // @ts-ignore
    window.showPopupDetails = (item: any) => {
      alert(item.NAME)
    }
    // 用于 config.json中配置的图层，绑定额外方法和参数
    const tiles3dLayer = map.getLayer(204012, "id") // 上海市区
    if (tiles3dLayer) {
      tiles3dLayer.options.onSetOpacity = function (opacity: number) {
        tiles3dLayer.style = {
          color: {
            conditions: [
              ["${floor} >= 200", "rgba(45, 0, 75," + 0.5 * opacity + ")"],
              ["${floor} >= 100", "rgba(170, 162, 204," + opacity + ")"],
              ["${floor} >= 50", "rgba(224, 226, 238," + opacity + ")"],
              ["${floor} >= 25", "rgba(252, 230, 200," + opacity + ")"],
              ["${floor} >= 10", "rgba(248, 176, 87," + opacity + ")"],
              ["${floor} >= 5", "rgba(198, 106, 11," + opacity + ")"],
              ["true", "rgba(127, 59, 8," + opacity + ")"]
            ]
          }
        }
      }
    }
  }
  return <div id={withKeyId} className="mars3d-container"></div>
}
export default MarsMap

1. 使用组件创建地球场景 ```tsx import React, { useContext } from “react” import ReactDOM from “react-dom”

import “mars3d/dist/mars3d.css”

const configUrl = ${process.env.BASE_URL}config/config.json

const marsOnload = map: Map) => { console.log(“map构造完成”, map) }

ReactDOM.render( , document.getElementById(“root”) )

```