cesim 加载本地模型

<template>

  <div id="cesiumContainer"></div>

</template>

<script type="text/javascript">

import gltfFile from "../assets/glb/Cesium_Air.glb"

import { Viewer,Transforms,Cartesian3,Model } from "cesium";

export default {

  data() {

    return {

      gltfUrl: gltfFile

    }

  },

  computed: {},

  components: {},

  methods: {

    initMap() {

      let viewer = new Viewer("cesiumContainer")

      var scene = viewer.scene

      var modelMatrix = Transforms.eastNorthUpToFixedFrame(

        Cartesian3.fromDegrees(110.62898254394531, 40.02804946899414, 6.0));        //gltf数据加载位置

      var model = scene.primitives.add(Model.fromGltf({

        url: this.gltfUrl, //gltf文件的URL

        modelMatrix: modelMatrix,

        scale: 300.0     //放大倍数

      }))

      viewer.camera.flyTo({

        destination: Cartesian3.fromDegrees(110.62898254394531, 40.02804946899414, 6000.0)     //相机飞入点

      })

    },

  },

  mounted() {

    // 初始化底图

    this.initMap()

  }

};

</script>

<style>

#cesiumContainer {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

  overflow: hidden;

}

</style>







注意



加载本地模型文件要配置webpack文件 

我加载的是glb文件 



  module: {

        rules: [

            {

                test:/\.(glb)$/, //

                loader: 'url-loader',

                options: {

                  limit: 10000,

       

                }

              },

          {

            test: /.js$/,

            include: [resolve('node_modules/cesium/Source')],

            use: {

              loader: require.resolve('@open-wc/webpack-import-meta-loader')

            }

          }

        //   {

        //     // match all .gltf files

        //     test: /\.(gltf)$/,

        //     loader: 'url-loader'

        //   },

        ],

        // Removes these errors: "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"

        // https://github.com/AnalyticalGraphicsInc/cesium-webpack-example/issues/6

        unknownContextCritical: false

        // unknownContextRegExp: /^.\/.*$/

      }