vue中使用cesium

下载：

 npm install cesium --save   
//最新的版本感觉有点问题，我下载的是    npm i cesium@1.101.0  

 main.js配置加入：

var widgets= require('cesium/Widgets/widgets.css');

vue.config.js配置：

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
const { defineConfig } = require('@vue/cli-service')

let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports= defineConfig({
  publicPath:'/cesiumLesson',
  outputDir: "dist",
  lintOnSave: true,
  devServer: {
    open: process.platform === "darwin",
    host: "0.0.0.0",
    port: 8088,
    https: false,
    proxy: {
        '/api': {
          target: 'http://localhost:8091',	//实际请求地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, 'api')
        },
  
    }
  },
  configureWebpack: {
    output: {
        sourcePrefix: ' '
    },
    amd: {
        toUrlUndefined: true
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.cjs.js',
            '@': path.resolve('src'),
            'cesium': path.resolve(__dirname, cesiumSource)
        },
        fallback: {
             "http": require.resolve("stream-http"),
             "https": require.resolve("https-browserify"),
            "zlib": require.resolve("browserify-zlib"),
             "url": require.resolve("url/"),
             "assert": require.resolve("assert/"),
            "stream": require.resolve("stream-browserify")
        }
    },
    plugins: [
        new CopyWebpackPlugin({ patterns: [{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }] }),
        new CopyWebpackPlugin({ patterns: [{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }] }),
        new CopyWebpackPlugin({ patterns: [{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }] }),
        new CopyWebpackPlugin({ patterns: [{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }] }),
        new webpack.DefinePlugin({
            CESIUM_BASE_URL: JSON.stringify('./')
        })
    ],
    module: {
        unknownContextCritical: /^.\/.*$/,
        unknownContextCritical: false
    }
}
 }) 

这样设置需要访问 http://localhost:8088/cesiumLesson/

请注意这是全部代码， 你可能不需要 'vue$': 'vue/dist/vue.cjs.js',注释就行。

此时报错继续步骤：

npm i stream-http      
 npm i https-browserify        
npm i browserify-zlib       
npm i stream-browserify  
 npm install url       
npm install assert           

 可能还需要      npm i util 

初始化地球：

<template>
  <div class="hello">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
const Cesium =require('cesium/Cesium')
export default {
  name: 'cesium',
  mounted() {
    let viewer = new Cesium.Viewer('cesiumContainer');
    viewer._cesiumWidget._creditContainer.style.display = "none";
  }
}
</script>
<style>
#cesiumContainer {
  width: 100%;
  height: 637px;
}
</style>

挂载到App.vue就行。 

另外我还把下列文件放到了public下

不知道有咩有影响。 

顺便记录加载3dtiles遇到的问题，是什么thirdparty啥的报错，需要把下面的文件放到public下

结果如图

搞不懂为啥天地图近了就看不见。

昨天到今天啥也没干，就试图用ol-cesium联动一下，也没捣鼓出来，总要装作做了些什么似的于是乎写个安装。

613.

一分钟后回来解决，加个       maximumLevel: 18, // 必须加上最大级数。