VUE - Cesium引用

VUE - Cesium引用

环境： vue2 + vuecli4.5.13   + cesium 1.94.3

 

方式1：　　

cnpm install cesium --save-dev  

操作：复制cesium安装包中的 node_modules\cesium\Build\Cesium 到 public\libs中

 

可直接在 public/index.html 中引用

  <!-- 引用cesium插件 -->
  <!-- <script src="./libs/Cesium/Cesium.js"></script>
  <link rel="stylesheet" href="./libs/Cesium/Widgets/widgets.css"> -->

 

在main.js中初始化 Cesium key

  cesium.Ion.defaultAccessToken = 'xxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

　　

项目中可直接使用 Cesium变量，调用方式 　　

 let viewer = new Cesium.Viewer(viewerName, {
    distanceScaleOptions: true,
    navigationOptions: true,
    performanceOptions: true,
    rotationCenter: true,
    selectionIndicator: true, //选中
    infoBox: false, //信息
    shouldAnimate: true,
    geocoder: false, //查找位置工具，查找到之后会将镜头对准找到的地址，默认使用bing地图
    homeButton: false, //视角返回初始位置
    sceneModePicker: false, //选择视角的模式，有三种：3D，2D，哥伦布视图（2.5D)
    baseLayerPicker: false, //图层选择器，选择要显示的地图服务和地形服务
    animation: false, //动画器件，控制视图动画的播放速度
    navigationHelpButton: false, //导航帮助按钮，显示默认的地图控制帮助
    timeline: true, //时间线,指示当前时间，并允许用户跳到特定的时间
    fullscreenButton: false, //全屏按钮
    // terrainProvider: Cesium.createWorldTerrain(),
    terrainProvider: null,
    // imageryProvider: null,
    // baseLayerPicker: false,

    //用来去掉地球表面的大气效果的黑圈问题
    orderIndependentTranslucency: false,
    contextOptions: {
      webgl: {
        alpha: true,
      },
      requestWebgl2: true,
    },
  });

　　

 

方法2： 

1. 配置vue.config.js

// 1、引入cesium相关文件
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
let cesiumSource = "./node_modules/cesium/Source";
let cesiumWorkers = "../Build/Cesium/Workers";




  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    // 2、cesium 进行配置
    resolve: {
      alias: {
        "@": resolve("src"),
        "@crud": resolve("src/components/Crud"),
        "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("/")
      })
    ]
  },

 

 

2. main.js 全局引入cesium相关文件

var cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');
​
Vue.prototype.Cesium = cesium
Vue.prototype.widgets = widgets

  cesium.Ion.defaultAccessToken = 'xxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

 

 

3. 在组件中使用：

 mounted() {
     var viewer = new this.Cesium.Viewer("cesiumContainer", {});
   },

 

 

  

 

引用：http://www.manongjc.com/detail/25-flbagzwzyeyvrwm.html