Vue3.0+Cesium+Tomcat服务下倾斜摄影数据加载详细过程

Vue3.0+Cesium+Tomcat服务下倾斜摄影数据加载

1.Vue-cli 3.0 + cesium 构建
参考资料地址Vue-cli 3.0 + cesium 构建
注意，因为文档中设置默认地址设置为http://localhost:9999（文档中写的为http://localhost:8080）

2. 将倾斜摄影的模型（3dtile模型）放在tomcat资源文件webapps文件夹下面

3. 解决Vue加载Tomcat服务器下模型资源跨域问题跨域
target地址为启动tomcat的ip地址和端口

4.加载倾斜摄影代码

5.加载模型报错
报错内容： 错误说明为：RuntimeError: Unsupported glTF Extension: KHR_technique_webgl
解决办法： 参考地址解决Cesium1.50对gltf2.0/3dtiles数据读取的问题
代码使用
在加载模型前调用此initModel方法

    //无法加载新标准的gltf 错误解决http://liubf.com/2018/10/23/%E8%A7%A3%E5%86%B3cesium1-50%E5%AF%B9gltf2-0xxxxxxxxxx-3dtiles%E6%95%B0%E6%8D%AE%E8%AF%BB%E5%8F%96%E7%9A%84%E9%97%AE%E9%A2%98/
    initModel() {
      const self = this;
      Object.defineProperties(Cesium.Model.prototype, {
        _cachedGltf: {
          set: function (value) {
            this._vtxf_cachedGltf = value;
            if (this._vtxf_cachedGltf && this._vtxf_cachedGltf._gltf) {
              // eslint-disable-next-line no-debugger
              self.fixGltf(this._vtxf_cachedGltf._gltf);
            }
          },
          get: function () {
            return this._vtxf_cachedGltf;
          }
        }
      })
    },
    fixGltf(gltf) {
      if (!gltf.extensionsUsed) {
        return;
      }
      var v = gltf.extensionsUsed.indexOf('KHR_technique_webgl');
      var t = gltf.extensionsRequired.indexOf('KHR_technique_webgl');
      // 中招了。。
      if (v !== -1) {
        gltf.extensionsRequired.splice(t, 1, 'KHR_techniques_webgl');
        gltf.extensionsUsed.splice(v, 1, 'KHR_techniques_webgl');
        gltf.extensions = gltf.extensions || {};
        gltf.extensions['KHR_techniques_webgl'] = {};
        gltf.extensions['KHR_techniques_webgl'].programs = gltf.programs;
        gltf.extensions['KHR_techniques_webgl'].shaders = gltf.shaders;
        gltf.extensions['KHR_techniques_webgl'].techniques = gltf.techniques;
        var techniques = gltf.extensions['KHR_techniques_webgl'].techniques;

        gltf.materials.forEach(function (mat, index) {
          gltf.materials[index].extensions['KHR_technique_webgl'].values = gltf.materials[index].values;
          gltf.materials[index].extensions['KHR_techniques_webgl'] = gltf.materials[index].extensions['KHR_technique_webgl'];

          var vtxfMaterialExtension = gltf.materials[index].extensions['KHR_techniques_webgl'];

          for (var value in vtxfMaterialExtension.values) {
            var us = techniques[vtxfMaterialExtension.technique].uniforms;
            for (var key in us) {
              if (us[key] === value) {
                vtxfMaterialExtension.values[key] = vtxfMaterialExtension.values[value];
                delete vtxfMaterialExtension.values[value];
                break;
              }
            }
          }
        });

        techniques.forEach(function (t) {
          for (var attribute in t.attributes) {
            var name = t.attributes[attribute];
            t.attributes[attribute] = t.parameters[name];
          }

          for (var uniform in t.uniforms) {
            const name = t.uniforms[uniform];
            t.uniforms[uniform] = t.parameters[name];
          }
        });
      }
    }

6.全部代码
vue.config.js

const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
const path = require("path");
let cesiumSource = "./node_modules/cesium/Source";
let cesiumWorkers = "../Build/Cesium/Workers";
module.exports = {
  baseUrl: "",
  devServer: {
    port: 9999,
    proxy:{
        '/model': { // 程序中的地址
            target: 'http://127.0.0.1:8999',
            changeOrigin: true,
        }
    }
  },
  configureWebpack: {
    output: {
      sourcePrefix: " "
    },
    amd: {
      toUrlUndefined: true
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        vue$: "vue/dist/vue.esm.js",
        "@": path.resolve("src"),
        cesium: path.resolve(__dirname, cesiumSource)
      }
    },
    plugins: [
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, cesiumWorkers), to: "Workers" }
      ]),
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, "Assets"), to: "Assets" }
      ]),
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, "Widgets"), to: "Widgets" }
      ]),
      new CopyWebpackPlugin([
        {
          from: path.join(cesiumSource, "ThirdParty/Workers"),
          to: "ThirdParty/Workers"
        }
      ]),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify("./")
      })
    ],
    module: {
      unknownContextCritical: /^.\/.*$/,
      // eslint-disable-next-line no-dupe-keys
      unknownContextCritical: false
    }
  }
};

CesiumViewer.vue

7打包发布
1.执行npm run build命令;
2.将打包后的dist文件复制到tomcat的webapps文件夹内；
3.若没使用cesium自带的模型文件，建议删除，文件比较大；

4.启动tomcat，打开localhost:8080/dist/index.html （注意不要端口冲突了），就可以查看到打包后的程序了。