当前位置: 首页 > news >正文

vite+vue集成cesium

 1、创建项目、选择框架vue+js

pnpm create vite demo_cesium

2、进入项目安装依赖 

cd demo_cesium
pnpm install

3、安装cesium及插件 

3、pnpm i cesium vite-plugin-cesium

4、修改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()],
})

5、删除style.css,修改App.vue 

<template><div id="cesiumContainer"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
onMounted(() => {Cesium.Ion.defaultAccessToken = '' //改为自己申请的tokennew Cesium.Viewer('cesiumContainer')   
})
</script>
<style scoped></style>

6、运行 

pnpm dev

 

http://www.lryc.cn/news/389055.html

相关文章:

  • 2024 年江西省研究生数学建模竞赛A题:交通信号灯管理问题分析、实现代码及参考论文
  • 华为机试HJ1字符串最后一个单词的长度
  • 排序(冒泡排序、选择排序、插入排序、希尔排序)-->深度剖析(一)
  • (2024)docker-compose实战 (6)部署前端项目(react, vue)
  • python 中的 下划线_ 是啥意思
  • Solana公链
  • 【LeetCode】反转字符串中的单词
  • [leetcode]文件组合
  • 数据库断言
  • uniapp+nodejs实现小程序支付
  • SolidityFoundry 安全审计测试 memory滥用
  • 面试题--SpringBoot
  • Stable Diffusion中放大图像的3种方法
  • 生产者消费模式
  • PyMuPDF 操作手册 - 06 PDF的转换等
  • VUE3解决跨域问题
  • 2024阿里云大模型自定义插件(如何调用自定义接口)
  • 生成式人工智能将如何改变网络可访问性
  • 科普文:一文搞懂jvm实战(二)Cleaner回收jvm资源
  • 使用PyTorch高效读取二进制数据集进行训练
  • 应急响应:应急响应流程,常见应急事件及处置思路
  • Kotlin/Android中执行HTTP请求
  • 哈希表(C++实现)
  • 深入理解代理模式(Proxy Pattern)及其实际应用
  • Elasticsearch (1):ES基本概念和原理简单介绍
  • 【Python爬虫】Python爬取喜马拉雅,爬虫教程!
  • 基于Jmeter的分布式压测环境搭建及简单压测实践
  • IDEA常用代码模板
  • 基于大语言模型的多意图增强搜索
  • 【ai】ubuntu18.04 找不到 nvcc --version问题