为什么three.js地图在部署后不显示?-灵析社区

Fiona

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) }) }, 界面展示是正常的 ![](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241027/ef297501d99586f92a4827f8d490be7d.png) 但是发布之后就直接不展示地图,中间区域是没有地图元素的,并且颜色展示不正常 颜色不正常是我的另一个问题, ![](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241027/2e1840e8a794a35df765a6e280d2b7a6.png) 打包之后dist文件下面是有 正常的json文件的 ![](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241027/0dec3821dd61b72d654ae85b17a8ddc3.png) config配置 因为是服务器下多个前端 所以我的大屏加载了一节publicPath: "/intelligence/", 路由 ![](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241027/6d572aa79c2a01549c324d1edec5be0e.png) 使用 require(`@/views/screen/mapMain/json/china.json`) 加载文件时候回报错 ![](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241027/913837701eda4425ba93f181f1312773.png) 我该如何修改这个地址才能让地图正常显示,

阅读量:23

点赞量:0

问AI
根据代码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) },