Cesium初探2

最新推荐文章于 2024-09-09 21:14:24 发布

哑巴语天雨

最新推荐文章于 2024-09-09 21:14:24 发布

阅读量411

点赞数 6

分类专栏： WebGIS 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_51416826/article/details/140878848

版权

WebGIS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

话不多说，咱们来看如何使用Cesium开始项目

Vue3+Vite+Cesium

使用pnpm创建项目

pnpm create vite my_cesium

安装项目依赖

pnpm install

安装Cesium包

pnpm install -g cesium@1.99 vite-plugin-cesium

修改vite.config.js文件

import{ defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(),cesium()]
})

在项目中调包

import * as Cesium from 'cesium'

运行

pnpm dev

Hello Cesium

<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue';
console.log(Cesium)
onMounted(()=>{
    //获取许可
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1NmQ2YjQwMC0wOTAzLTQxYWItODliMC1iYTFjMzdiM2U4YzEiLCJpZCI6MjMyMjU4LCJpYXQiOjE3MjI1ODkzNzV9._ql6Oa6Tls-APS5Ag0692Co91xG_QqcEmd4sAo8azJ8'
    //定义基本视图  
  const viewer = new Cesium.Viewer('container',{
  })
})
</script>

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

<style scoped>
*{
  margin: 0;
  padding: 0;
}
#container{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

移除地图组件

<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue';
console.log(Cesium)
onMounted(()=>{
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1NmQ2YjQwMC0wOTAzLTQxYWItODliMC1iYTFjMzdiM2U4YzEiLCJpZCI6MjMyMjU4LCJpYXQiOjE3MjI1ODkzNzV9._ql6Oa6Tls-APS5Ag0692Co91xG_QqcEmd4sAo8azJ8'
  const viewer = new Cesium.Viewer('container',{
    homeButton: false, //主页按钮
    animation: false, //动画控件
    timeline: false, //时间轴控件
    geocoder: false,  //搜索控件
    fullscreenButton: false,  //全屏控件
    sceneModePicker: false,  //投影方式按钮
    baseLayerPicker: false,  //图层选择按钮
    navigationHelpButton: false  //帮助手势按钮
  })
})
</script>

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

<style scoped>
*{
  margin: 0;
  padding: 0;
}
#container{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
:deep(.cesium-widget-credits){
  display: none;
}
</style>

关于Viewer中options设置，请看详细描述：Viewer - Cesium Documentation