使用vue-cli创建的项目实现Mars3D地图

项目：vue3+babel+typescript+vuex+vue-router

---

建议：可以的话使用vite项目，webpack和vue-cli后续有挺多报错，

---

集成实现

• npm下载库

//安装mars3d主库，其中mars3d-cesium  @turf/turf为依赖库
npm install mars3d mars3d-cesium  @turf/turf  --save 

//安装mars3d插件（按需安装）
npm install mars3d-space --save

• 依赖下载

npm install copy-webpack-plugin --save-dev

 copy-webpack-plugin@11.0.0  ===  webpack@5.85.0（注意copy-webpack-plugin与webpack版本的依赖，需要按webpack对应版本的相关版本安装）

• 修改vue.config.fig配置文件

const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  configureWebpack: (config) => {
    const cesiumSourcePath = 'node_modules/mars3d-cesium/Build/Cesium/' // cesium库安装目录
    const cesiumRunPath = './mars3d-cesium/' // cesium运行时路径

    const plugins = [
      // 标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify(path.join(config.output.publicPath, cesiumRunPath))
      }),
      // Cesium相关资源目录需要拷贝到系统目录下面（部分CopyWebpackPlugin版本的语法可能没有patterns）
      new CopyWebpackPlugin({
        patterns: [
          { from: path.join(cesiumSourcePath, 'Workers'), to: path.join(config.output.path, cesiumRunPath, 'Workers') },
          { from: path.join(cesiumSourcePath, 'Assets'), to: path.join(config.output.path, cesiumRunPath, 'Assets') },
          { from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(config.output.path, cesiumRunPath, 'ThirdParty') },
          { from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(config.output.path, cesiumRunPath, 'Widgets') }
        ]
      })
    ]

    return {
      module: { unknownContextCritical: false }, // 配置加载的模块类型，cesium时必须配置
      plugins: plugins
    }
  }
}

• 文件引用

<template>
  <div id="mars3dContainer" class="mars3d-container"></div> 
</template>

<script>
//导入mars3d主库
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";

  export default {
	methods: {
	  init () {
		  var map = new mars3d.Map('mars3dContainer', {
			  
		  })
	    /* var mapOptions = {} */ //支持的参数请看API文档：http://mars3d.cn/api/Map.html
	    /* var map = new mars3d.Map('mars3dContainer', mapOptions) */		
	   /* viewer._cesiumWidget._creditContainer.style.display = "none"; */// 隐藏版权
	  }
	},
	mounted () {
	  this.init()
	}
}
</script>
<style>
.mars3d-container {
    width:100%
}
</style>

• 启动实现

npm run serve

---

报错及解决方案：

ERROR in ./node_modules/mars3d-cesium/Build/Cesium/index.js 95:20692-20705 Module not found:

Error: Can't resolve 'url' in 'F:\XXX\vue-name\node_modules\mars3d-cesium\Build\Cesium' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }' - install 'url' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "url": false }

类似错误采用以下解决方法：

npm install url

install browserify-zlib

npm install assert   

npm install stream-browserify

npm install stream-http

npm install https-browserify

 在vue.config.js配置文件return中添加：

resolve: {
    fallback: {
        "zlib": require.resolve("browserify-zlib"),
        "assert": require.resolve("assert/"),
        "stream": require.resolve("stream-browserify"),
        "http": require.resolve("stream-http") ,
        "https": require.resolve("https-browserify") 
        }
}

 WebGL发生渲染错误,渲染已经停止,请刷新页面。

TypeError: Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader'.

See more...

 使用 WebGL 渲染器时出现的问题，可能与着色器代码的加载、编译或绑定有关。没找到解决方案，限制页面主体大小可以显示；