cesium 问题合集

* 一、 because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.

解析：在 Vue 项目中使用 Cesium需要在 index.html 文件中引入 Cesium

• 最开始写法是

<script src="./node_modules/cesium/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="./node_modules/cesium/Build/Cesium/Widgets/widgets.css" />

• 改错后

 <link rel="stylesheet" href="./libs/cesium/Widgets/widgets.css" />
 <script src="./libs/cesium/Cesium.js"></script>

• 原因：

路径不对 因为cesium加载时需要读取这些静态资源，所以此处需要把node_modules中cesium下面的文件复制到public下面的libs中

再在main.js中引入此路径

• 初始化成功引入一颗地球
  
• 初始化地图完整代码

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

<script>
import * as Cesium from 'cesium'
export default {
  mounted () {
    this.initMap();

  },
  data () {
    return {
      viewer: null
    };
  },
  methods: {
    initMap () {
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZWQzYzczOC1lNjRiLTRlYjQtYTgyOC05MTkwZjQ4Yzc0MzciLCJpZCI6MTkzNzk5LCJpYXQiOjE3MDcwMTc2OTJ9.Fogjd8e-RdYUnf7zjjUvpwRnNrEk29f7oYgtxE0uSok'
      this.viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProviderViewModels: [
          new Cesium.ProviderViewModel({
            name: 'Google卫星',
            iconUrl: 'http://img3.cache.netease.com/photo/0031/2012-03-22/7T6QCSPH1CA10031.jpg',
            tooltip: 'Google卫星',
            creationFunction: function () {
              return new Cesium.UrlTemplateImageryProvider({
                url: 'http://www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}', //影像图 (中国范围无偏移)
                tilingScheme: new Cesium.WebMercatorTilingScheme(),
                minimumLevel: 1,
                maximumLevel: 200,
                credit: 'Google Earth',
              })
            },
          }),
        ], //设置影像图列表
        shouldAnimate: true,
        geocoder: false, //右上角查询按钮
        shadows: false,
        terrainProviderViewModels: [], //设置地形图列表
        animation: false, //动画小窗口
        baseLayerPicker: false, //图层选择器
        fullscreenButton: false, //全屏
        vrButton: false, //vr按钮
        homeButton: false, //home按钮
        infoBox: false,
        sceneModePicker: false, //2D,2.5D,3D切换
        selectionIndicator: false,
        timeline: false, //时间轴
        navigationHelpButton: false, //帮助按钮
        terrainShadows: Cesium.ShadowMode.DISABLED,
      }); //  初始化Cesium Viewer对象
      // 将三维球定位到中国
      this.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
        orientation: {
          heading: Cesium.Math.toRadians(348.4202942851978),
          pitch: Cesium.Math.toRadians(-89.74026687972041),
          roll: Cesium.Math.toRadians(0),
        },
        complete: function callback () {
          // 定位完成之后的回调函数
        },
      })
    }
  },
};
</script>

<style lang="scss" scoped>
#cesiumContainer {
  width: 100%;
  height: 100vh;
}
</style>