关于Mars3D运行步骤以及调接口的问题

本文记录了作者初次接触Mars3D时遇到的挑战,特别是调用接口的问题。通过详细步骤,解释如何在map.js中配置3D地图、加载模型以及在onMounted函数中进行接口调用,作为自我学习的笔记。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我是最近刚接触mars3D的,总共接触不到一周,然后呢,在调接口这件事情上栽了一个很大的跟头,完全就是蒙圈状态,啥都不明白,不清楚,迷迷糊糊的,再加上原生掌握的又不是多好,索性给我问到了一个方法,但是我还没有实践,所以也不知道可不可行,所以呢,写这篇博客的目的就是让自己记住这个方法,也是做一个笔记,好让自己有个更深的印象。好嘞,下面开始进入正题啦!

首先,我们需要找到让显示的页面的那个map.js 然后后续步骤都是在这个文件里面更改啦

第一步

我们需要找到我们需要渲染的地方(注意,这里的位置是指我们已经配置好的项目打开的地图上,如下图)

 比如我需要做的是一个小区的模型,首先我们需要先确定小区的位置,现在地图上找到小区的位置,然后右键查看当前视角,就会弹出一个框框,里面就是当前视角的内容,

 

 我们需要复制上面哪行代码到map.js中的mapOptions下面去,直接替换center里面的内容

 第二步

我们需要加载模型,比如说3D建模师建好的模型,再或者无人机飞出来的模型都可以,把文件放到根目录下,然后找到模型下面的tileset.json 引入项目中,我不知道是不是所有的项目目录都一样,但是最后一定要找 tileset.json   黑色方框里的是最重要的

 然后引入到三维模型里面,还是在map.js里面,不变

 然后这时候我们就得到了,一个完整的3D模型,连带着3d图形一并,但是要注意的就是你定的那个地方是不是3d建模师建的模型的位置,如果不是,那前面的努力都白瞎

好嘞,下面让我们来看看最让我头疼的地方

调接口的问题

下面我开始贴代码了啊,我也讲不太明摆,怕越讲越迷

function ajax(url, type, data = {}) {
  ajax({
    //get方式
    url: `http://139.9.177.51:3333/api/${url}`, //地址    /${url}这个是你传的接口
    type, //请求方式
    data, //传参
    async: true, //可选,同步或异步 true为异步,false为同步
    success: function (res) {
      //成功时的回调用函数    res是响应的数据
      console.log(res)
      return res
    },
    error: function (err) {
      //失败时的回调函数
      return err
      // console.log(err)
    }
  })
}

然后嘞,在function onMounted(mapInstance)里面,也就是写三维模型的哪里

function onMounted(mapInstance) {
  map = mapInstance // 记录map

  // 数据
  let a = ajax("/config/xxx", "get或post", { name: "参数" }) //这样就调用 传参就行了 
  console.log(a) // 这是请求之后得到的数据









  // 加载数据
  // const configUrl = 数据  //
  // mars3d.Util.fetchJson({ url: configUrl })
  //   .then(function (result) {
  //     graphicLayer.loadGeoJSON(result)
  //   })
  //   .catch(function (error) {   这里就不管了?可以全部注释吗? 嗯嗯  但不要删哦
  //     console.log("加载JSON出错", error)
  //   })
  graphicLayer.loadGeoJSON(数据)   //数据也就是上面的a
  bindLayerContextMenu()

}

okk 到这里就完啦,因为我也没有尝试过,所以我也不知知道对不对,过两天用了之后来更新

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值