vue3 + vite + cesium教程

可乐鲜橙多

已于 2024-10-31 16:43:07 修改

阅读量1.8k

点赞数 33

文章标签： vue.js 前端 javascript 前端框架

于 2024-10-27 21:28:26 首次发布

本文链接：https://blog.youkuaiyun.com/m0_70989202/article/details/143273779

版权

一、环境搭建及上手案例

1.使用vite创建一个vue3的工程项目

pnpm create vite

2.安装依赖

安装cesium和vite-plugin-cesium两个依赖

pnpm cesium@1.97 vite-plugin-cesium

3.配置cesium

在vite.config.js中配置cesium，如下所示

import {
    fileURLToPath, URL } from 'node:url'

import {
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//此处导入
import cesium from 'vite-plugin-cesium';
export default defineConfig({
   
  plugins: [
    vue(),
    //此处使用
    cesium(),
  ],
  resolve: {
   
    alias: {
   
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

4.申请token。

在cesium ion官方中申请一个token，因为使用cesium官方提供的静态资源需要申请token，不然会运行代码时会报错
在这里插入图片描述

5.样式重置

在index.html中将样式重置（工程项目必须重置样式）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <style>
      *{
     
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

6.在App.vue中编写上手案例

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

<script setup>
import {
     onMounted} from 'vue'
import * as Cesium from 'cesium';
//换成自己申请的token
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwMDc2MDgzYi1hNTg2LTQzOTUtOTBkZS0wZWU4MzQzNjFjZDUiLCJpZCI6MTk0MDUxLCJpYXQiOjE3MDcxMzY5NzB9.ujjWXVBZiiQ0SIuMLsjdE-VBWji_OXweqxBPb4gTPtM';
onMounted(async()=>{
     
  //创建一个地图的视图对象
  const viewer = new Cesium.Viewer("conatiner");
  //添加官网提供的纽约的城市白膜数据
   //1.在cesium ion的官网中找到New York City 3D Buildings 并添加到自己的商店中 
   //2. 75343为该白膜数据的id
  const tileset = new Cesium.Cesium3DTileset({
     
    url:Cesium.IonResource.fromAssetId(75343),
  })
  //等待数据加载完成
  tileset.readyPromise;
  //添加到地图对象中
  viewer.scene.primitives.add(tileset);
  //跳到白膜数据的位置
  viewer.flyTo(tileset);
})
</script>

<style

最低0.47元/天解锁文章