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文件夹下...

一个修理地球的人

4112人浏览 · 2019-08-28 18:33:02

一个修理地球的人 · 2019-08-28 18:33:02 发布

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地址和端口

target
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

<template>
  <div id="cesiumContainer">
  </div>
</template>
<script>
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'
export default {
  name: "CesiumViewer",
  data() {
    return {
      modelUrl: '/model/tileset.json'
    }
  },
  mounted() {
    //保证模型初始化
    this.initModel();
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MWI5NTY0Mi1iOGE3LTQ3ZTMtOGQ4OC03NThiN2VkZGI4NTYiLCJpZCI6NzY2Niwic2NvcGVzIjpbImFzbCIsImFzciIsImFzdyIsImdjIl0sImlhdCI6MTU1MDIyNTM5OX0.2Abc9p46PA9kJ3E-BaKMXiyb0rvgo7AFUR1nR78VF7c';
    var viewer = new Cesium.Viewer('cesiumContainer', {
      scene3DOnly: true,
      selectionIndicator: false,
      baseLayerPicker: false,
      geocoder: false,
      homeButton: false,
      sceneModePicker: false,
      navigationHelpButton: false,
      animation: false,
      timeline: false,
      fullscreenButton: false,
    });

    viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
      url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
    }));

    const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
      url: this.modelUrl
    }));
    viewer.zoomTo(tileset);
  },
  methods: {
    //无法加载新标准的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];
          }
        });
      }
    }
  }

}
</script>
<style  lang="scss" scoped >
</style>

7打包发布
1.执行npm run build命令;
2.将打包后的dist文件复制到tomcat的webapps文件夹内；
3.若没使用cesium自带的模型文件，建议删除，文件比较大；
在这里插入图片描述
4.启动tomcat，打开localhost:8080/dist/index.html （注意不要端口冲突了），就可以查看到打包后的程序了。

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^