VUE - Cesium引用

VUE - Cesium引用

环境： vue2 + vuecli4.5.13   + cesium 1.94.3

 

方式1：　　

?

1	cnpm install cesium --save-dev

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

 

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

?

1 2 3

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

 

在main.js中初始化 Cesium key

?

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

　　

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

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