meface/docs/article/gis/cesiumjs/02vueCesium.md

title	author	date	tags	categories
使用npm方式(vue-cli)	ac	2022-01-14	CesiumJS	GIS

在vue项目中使用npm的方式安装cesium

1. 创建vue项目

//安装vue-cli脚手架
npm install -g @vue/cli

//创建learning-cesium项目
vue create learning-cesium

2. 安装Cesium

npm i cesium

3. 配置Cesium

先将下列资源拷贝一份到 public 文件下。

• node_modules/cesium/Build/Cesium/Workers
• node_modules/cesium/Build/Cesium/ThirdParty
• node_modules/cesium/Build/Cesium/Assets
• node_modules/cesium/Build/Cesium/Widgets

这里为了方便管理，新建了一个名为cesiumjs的文件夹，用于存放上面的资源：

在入口文件 main.js 中配置cesium的静态资源路径：

import Vue from 'vue'
import App from './App.vue'
import 'cesium/Build/Cesium/Widgets/widgets.css'

Vue.config.productionTip = false
window.CESIUM_BASE_URL = '/cesiumjs'

new Vue({
  render: h => h(App)
}).$mount('#app')

在 components文件夹下创建 CesiumView.vue组件：

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

<script>
import * as Cesium from 'cesium'
export default {
  methods: {
    initCesium () {
      Cesium.Ion.defaultAccessToken = 'your_access_token'

      // Initialize the Cesium Viewer in the HTML element with the "cesiumContainer" ID.
      const viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain()
      })

      // Fly the camera to San Francisco at the given longitude, latitude, and height.
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
        orientation: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-15.0)
        }
      })
    }
  },
  mounted () {
    this.initCesium()
  }
}
</script>
<style scoped></style>

在App.vue组件中将helloWorld.vue组件去掉，换成 CesiumView.vue 组件。

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <CesiumView></CesiumView>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import CesiumView from '@/components/CesiumView.vue'
export default {
  name: 'App',
  components: {
    // HelloWorld,
    CesiumView
  }
}
</script>

4.遇到的问题

• Ceisum的样式文件引入失败。Module not found: Error: Package path ./Build/Cesium/Widgets/widgets.css is not exported from package

  解决方法：

  1、选择直接在项目的index.html中采用link标签引入

  <link rel="stylesheet" href="<%= BASE_URL %>cesiumjs/Widgets/widgets.css"/>