136 lines
2.8 KiB
Markdown
136 lines
2.8 KiB
Markdown
---
|
||
title: 使用npm方式(vue-cli)
|
||
author: ac
|
||
date: 2022-01-14
|
||
tags:
|
||
- CesiumJS
|
||
categories:
|
||
- GIS
|
||
---
|
||
|
||
> 在vue项目中使用npm的方式安装cesium
|
||
|
||
### 1. 创建vue项目
|
||
|
||
```javascript
|
||
//安装vue-cli脚手架
|
||
npm install -g @vue/cli
|
||
|
||
//创建learning-cesium项目
|
||
vue create learning-cesium
|
||
```
|
||
|
||
### 2. 安装Cesium
|
||
|
||
```javascript
|
||
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的静态资源路径：
|
||
|
||
```javascript
|
||
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`组件：
|
||
|
||
```javascript
|
||
<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` 组件。
|
||
|
||
```javascript
|
||
<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`标签引入
|
||
|
||
```html
|
||
<link rel="stylesheet" href="<%= BASE_URL %>cesiumjs/Widgets/widgets.css"/>
|
||
```
|
||
|
||
|
||
|
||
|
||
|