vite+vue集成cesium

news2024/10/5 15:30:21

 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 = '' //改为自己申请的token
  new Cesium.Viewer('cesiumContainer')   
})
</script>
<style scoped></style>

6、运行 

pnpm dev

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1885318.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Go - 7.const 使用指南

目录 一.引言 二.定义 三.实践 1. 常量的分组定义 2.枚举常量 3.常量类型 四.总结 一.引言 在编程中&#xff0c;常量&#xff08;constant&#xff09;是指在程序运行期间其值不会改变的变量。常量在代码中有助于提高可读性和维护性&#xff0c;因为它们提供了一个明确…

CentOS 7基于开源项目制作openssh9.8p1 rpm二进制包修复安全漏洞CVE-2024-6387 —— 筑梦之路

2024年7月1日&#xff0c;官方发布openssh 9.8版本&#xff0c;修复了安全漏洞CVE-2024-6387。 此处主要基于开源项目https://github.com/boypt/openssh-rpms.git制作&#xff0c;之前也有写过类似的文章&#xff0c;这里就不再赘述。 CentOS 5/6/7 基于开源项目制作openssh …

代码随想录算法训练营第60天:动态and[1]

代码随想录算法训练营第60天&#xff1a;动态and ‍ 72. 编辑距离 力扣题目链接(opens new window) 给你两个单词 word1 和 word2&#xff0c;请你计算出将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a; 插入一个字符删除一个…

我使用 GPT-4o 帮我挑西瓜

在 5 月 15 日&#xff0c;OpenAI 旗下的大模型 GPT-4o 已经发布&#xff0c;那时网络上已经传开&#xff0c; 但很多小伙伴始终没有看到 GPT-4o 的体验选项。 在周五的时候&#xff0c;我组建的 ChatGPT 交流群的伙伴已经发现了 GPT-4o 这个选项了&#xff0c;是在没有充值升…

elementUI 年份范围选择器实现

elementUI 不支持年份范围的选择器&#xff0c;依照下面的文章进行修改和完善 el-year-picker&#xff1b; element日期选择范围、选择年份范围_elemet 两个日期 选择的年份范围必须在三年之内-CSDN博客 el-year-picker 组件&#xff1a; 依赖包&#xff1a;moment 属性&…

JavaSE--基础语法--类和对象(第二期)

&#xff08;一&#xff09;.面向对象的初步认知 1.1什么是面向对象&#xff1f; Java是一门纯面向对象的语言(Object Oriented Program&#xff0c;简称OOP)&#xff0c;在面向对象的世界里&#xff0c;一切皆为对象。面向对象是解决问题的一种思想&#xff0c;主要依靠对象…

怎么测试远程服务器能否连通

远程服务器连接测试的方法很多&#xff0c;下面简单介绍下其中两种方法。 ping命令 按WINR快截键&#xff0c;打开“运行”对话框&#xff0c;输入cmd&#xff0c;回车&#xff0c;打开命令提示符。 输入ping IP地址或ping 域名即可&#xff0c;如ping360服务器通不通&#xf…

DB-100撕裂开关 JOSEF约瑟 合金接线端子,轻松接线

一、产品概述 型号&#xff1a;DB-100 主要用途&#xff1a;DB-100撕裂开关主要用于监测皮带输送机在运行过程中是否发生纵向撕裂&#xff0c;一旦发现撕裂情况&#xff0c;立即触发报警或停机&#xff0c;以保护设备和生产线的安全运行。 二、技术特点 检测原理&#xff1a;…

国产跨平台高性能远程控制软件 RayLink,畅享高清流畅远程办公

不管是手机还是电脑&#xff0c;出色的硬件是好用的基础。而其中的软件工具&#xff0c;也是提高效率、减轻负担的好东西。 免费的软件工具众多&#xff0c;当然付费工具也不少。大家可能会觉得正版软件很贵&#xff0c;但国内软件代理商的价格其实很实惠。 本次为大家介绍一…

Tele-FLM:开源多语言大型语言模型技术报告

随着模型规模的不断扩大&#xff0c;如何高效地训练并优化这些拥有超过500亿参数的庞大模型&#xff0c;同时降低试错成本和计算资源消耗&#xff0c;成为了一个亟待解决的问题。北京智源人工智能研究院、中国电信的研究团队及其合作者提出Tele-FLM模型&#xff1a;一个52亿参数…

刷代码随想录有感(123):动态规划——最长连续递增子序列

题干&#xff1a; 代码&#xff1a; class Solution { public:int findLengthOfLCIS(vector<int>& nums) {if(nums.size() < 1)return nums.size();vector<int>dp(nums.size(), 1);int res 0;for(int i 1; i < nums.size(); i){if(nums[i] > nums[…

C# Web控件与数据感应之属性统一设置

目录 关于属性统一设置 准备数据源 范例运行环境 AttributeInducingFieldName 方法 设计与实现 如何根据 ID 查找控件 FindControlEx 方法 调用示例 小结 关于属性统一设置 数据感应也即数据捆绑&#xff0c;是一种动态的&#xff0c;Web控件与数据源之间的交互&…

NoSQL之Redis优化

目录 一、Redis 高可用 二、Redis 持久化 1.RDB 持久化 1&#xff09;触发条件 2&#xff09; 执行流程 3&#xff09;启动时加载 2.AOF 持久化 1&#xff09;开启AOF 2&#xff09;执行流程 3&#xff09;启动时加载 3.RDB和AOF的优缺点 三、Redis 性能管理 1.查…

11.优化算法之栈

1.删除字符串中的所有相邻重复项 可以用数组模拟栈结构 class Solution {public String removeDuplicates(String s) {if(s.length()<1){return s;}StringBuffer retnew StringBuffer();for(int i0;i<s.length();i){if(ret.length()<1){ret.append(s.charAt(i));}els…

Django + Vue 实现图片上传功能的全流程配置与详细操作指南

文章目录 前言图片上传步骤1. urls 配置2. settings 配置3. models 配置4. 安装Pillow 前言 在现代Web应用中&#xff0c;图片上传是一个常见且重要的功能。Django作为强大的Python Web框架&#xff0c;结合Vue.js这样的现代前端框架&#xff0c;能够高效地实现这一功能。本文将…

校园兼职小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;商家管理&#xff0c;管理员管理&#xff0c;用户管理&#xff0c;兼职管理&#xff0c;论坛管理&#xff0c;公告管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;公告&#xff0c;兼职&…

应急响应:应急响应流程,常见应急事件及处置思路

「作者简介」&#xff1a;冬奥会网络安全中国代表队&#xff0c;CSDN Top100&#xff0c;就职奇安信多年&#xff0c;以实战工作为基础著作 《网络安全自学教程》&#xff0c;适合基础薄弱的同学系统化的学习网络安全&#xff0c;用最短的时间掌握最核心的技术。 这一章节我们需…

单片机软件架构连载(2)-指针

我工作了10年&#xff0c;大大小小做过几十个项目&#xff0c;用指针解决过很多实际产品的痛点&#xff0c;比如写过小系统&#xff0c;数据结构(队列&#xff0c;链表)&#xff0c;模块化编程等等..... 今天贴近实际&#xff0c;给大家总结了c语言指针常用的知识点&#xff0c…

C++封装

1. 封装 1.1. struct 当单一变量无法完成描述需求的时候&#xff0c;结构体类型解决了这一问题。可以将多个类型打包成一体&#xff0c;形成新的类型&#xff0c;这是c语言中的封装 但是&#xff0c;新类型并不包含&#xff0c;对数据类的操作。所有操作都是通过函数的方式进…

python-糖果俱乐部(赛氪OJ)

[题目描述] 为了庆祝“华为杯”的举办&#xff0c;校园中开展了许多有趣的热身小活动。小理听到这个消息非常激动&#xff0c;他赶忙去参加了糖果俱乐部的活动。 该活动的规则是这样的&#xff1a;摊位上有 n 堆糖果&#xff0c;第 i 堆糖果有 ai​ 个&#xff0c;参与的同学可…