要在Vue中引入离线
Cesium，需要按照以下步骤进行操作：
1. 下载
Cesium离线包，可以从官网下载或者使用其他来源获取。将下载的文件解压到项目中的静态资源目录中，例如public目录下的
cesium文件夹。
2. 安装
cesium库，可以使用npm或者yarn进行安装：
```
npm install
cesium --save
或
yarn add
cesium
```
3. 在Vue组件中引入
Cesium，并在mounted生命周期钩子中初始化
Cesium：
```vue
<template>
<div id="
cesiumContainer"></div>
</template>
<script>
import * as
Cesium from '
cesium/
Cesium'
import '
cesium/Widgets/widgets.css'
export default {
name: '
CesiumViewer',
mounted() {
const viewer = new
Cesium.Viewer('
cesiumContainer', {
imageryProvider: new
Cesium.UrlTemplateImageryProvider({
url: '
cesium/Assets/Textures/NaturalEarthII/{z}/{x}/{reverseY}.jpg'
}),
baseLayerPicker: false,
geocoder: false,
homeButton: false,
sceneModePicker: false,
timeline: false,
navigationHelpButton: false,
animation: false,
fullscreenButton: false,
vrButton: false
})
}
}
</script>
<style scoped>
#
cesiumContainer {
height: 100%;
width: 100%;
}
</style>
```
4. 在Vue组件中使用
Cesium，例如添加一个模型：
```vue
<template>
<div id="
cesiumContainer"></div>
</template>
<script>
import * as
Cesium from '
cesium/
Cesium'
import '
cesium/Widgets/widgets.css'
export default {
name: '
CesiumViewer',
mounted() {
const viewer = new
Cesium.Viewer('
cesiumContainer', {
imageryProvider: new
Cesium.UrlTemplateImageryProvider({
url: '
cesium/Assets/Textures/NaturalEarthII/{z}/{x}/{reverseY}.jpg'
}),
baseLayerPicker: false,
geocoder: false,
homeButton: false,
sceneModePicker: false,
timeline: false,
navigationHelpButton: false,
animation: false,
fullscreenButton: false,
vrButton: false
})
const modelMatrix =
Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0)
)
const model = viewer.scene.primitives.add(
Cesium.Model.fromGltf({
url: '
cesium/Assets/Models/
CesiumAir/
Cesium_Air.glb',
modelMatrix: modelMatrix,
scale: 200.0
})
)
viewer.zoomTo(model)
}
}
</script>
<style scoped>
#
cesiumContainer {
height: 100%;
width: 100%;
}
</style>
```
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
