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"/>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|