vue使用cesium

1、安装：
npm install [email protected] --save

2、在node_modules/cesium下面复制Widgets文件夹在src下面
3、main.js中引入css样式

import "./Widgets/widgets.css"

4、在node_modules/cesium下面复制Assets、ThirdParty、Widgets、Workers文件夹到public文件夹下面

5、使用vue-cli工具不需要对cesium做vue.config.js配置
6、封装自己的cesium方法，例如在src创建utils文件夹，在utils文件夹下面创建mCesium.js

import * as Cesium from 'cesium'
Cesium.Ion.defaultAccessToken ="token"; //这里的token是自己申请的token
window.CESIUM_BASE_URL = "/";

class mMap{
    constructor(id){
      this.id = id; //地图容器
      this.viewer = null;
      this.scene = null;
    }
    //初始化地图
    initMap(){
      console.log(this.id)
      this.viewer = new Cesium.Viewer(this.id,{
        geocoder: false,                //是否显示地名查找控件
        sceneModePicker: false,         //是否显示投影方式控件
        navigationHelpButton: false,    //是否显示帮助信息控件
        baseLayerPicker: false,         //是否显示图层选择控件
        homeButton: false,              //是否显示Home按钮
        fullscreenButton: false,        //是否显示全屏按钮
        animation: false, //左下角的动画控件的显示
        shouldAnimate: false, //控制模型动画
        timeline: false, //底部的时间轴
        selectionIndicator: false,
        infoBox: false
      });
      //定位到指定位置
      this.viewer.camera.flyTo({
        destination : Cesium.Cartesian3.fromDegrees(112.876942, 28.235312, 1500.0)
      });
      //去cesium logo水印 或 css
      this.viewer.cesiumWidget.creditContainer.style.display = "none";
      //创建场景
      this.scene = this.viewer.scene;
      if(!this.scene.pickPositionSupported){
        window.alert("此浏览器不支持拾取位置！")
      }
      this.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas); 
    }
  }
  
  export function createMap(id){
    window.map = new mMap(id)
  }

7、使用

<template>
	<div id="mMap">
	</div>
</template>
import { createMap} from './utils/cesium/mcesium'
mounted() {
    createMap(“mMap”);
    window.map.initMap()
 },

注：如果地图没有加载出来很可能是div没有设置宽高，另外不要在created函数中使用createMap(“mMap”),会报错找不到元素

注：vue版本2.6.14 cesium.js版本1.95.0