为什么three.js地图在部署后不显示？

作者站长头像
站长
· 阅读数 5

vue项目打包部署之后本地json为什么访问不到？使用three.js画了个中国地图，本人小白也是看大佬源码改的代码。

 // 加载地图数据
    loadMapData(str) {
      // https://datav.aliyun.com/portal/school/atlas/area_selector
      this.resetInitMap()
      const loader = new THREE.FileLoader()
      // require(`@/views/screen/mapMain/json/china.json`)
      // /static/json/${str || 'china'}.json
      
      loader.load(`/static/json/${str || 'china'}.json`, (data) => {
        const jsondata = JSON.parse(data)
        this.addMapGeometry(jsondata)
      })
    },

界面展示是正常的为什么three.js地图在部署后不显示？但是发布之后就直接不展示地图，中间区域是没有地图元素的，并且颜色展示不正常颜色不正常是我的另一个问题，https://segmentfault.com/q/1010000044485869为什么three.js地图在部署后不显示？打包之后dist文件下面是有 正常的json文件的 为什么three.js地图在部署后不显示？config配置 因为是服务器下多个前端 所以我的大屏加载了一节publicPath: "/intelligence/", 路由为什么three.js地图在部署后不显示？使用 require(@/views/screen/mapMain/json/china.json) 加载文件时候回报错为什么three.js地图在部署后不显示？我该如何修改这个地址才能让地图正常显示，

回复
1个回答
avatar
test
2024-06-23

根据代码this.addMapGeometry(jsondata) 反正真正的地图点是后边的函数，只需要把json传递给下边函数就行了，就不按照原本给的方法加载了，直接使用require 将json传递给下级就完了目前没有发现问题。是否有隐患不知道

 // 加载地图数据
    loadMapData(str) {
      // https://datav.aliyun.com/portal/school/atlas/area_selector
      this.resetInitMap()
      
      // const loader = new THREE.FileLoader()
      // loader.load(`/static/json/${str || 'china'}.json`, (data) => {
      //   const jsondata = JSON.parse(data)
      //   this.addMapGeometry(jsondata)
      // })

      let jsondata = require(`@/assets/json/${str || 'china'}.json`)
      this.addMapGeometry(jsondata)
    },
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容