Vue+Cesium快速配置指南

安裝必要依賴

在項目根目錄下運行以下命令安裝vue-cesium和cesium:

npm install vue-cesium@3.1.4 cesium@1.84

配置Vite

在vite.config.js文件中添加以下配置:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'export default defineConfig({plugins: [vue()],resolve: {alias: {    //配置路徑別名'@': resolve(__dirname, 'src'),}},define: {    //配置Cesium基礎URLCESIUM_BASE_URL: JSON.stringify('/node_modules/cesium/Build/Cesium/')}
})

初始化Vue應用

在main.js文件中配置vue-cesium:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import VueCesium from 'vue-cesium'
import 'vue-cesium/dist/index.css'const app = createApp(App)
app.use(VueCesium, {cesiumPath: '/node_modules/cesium/Build/Cesium/Cesium.js'
})
app.mount('#app')

創建基礎視圖組件

在App.vue文件中添加以下代碼:

<script setup>
// 組件邏輯
</script><template><div class="app-container"><vc-viewer><!-- Cesium Viewer容器 --></vc-viewer></div>
</template><style scoped>
.app-container {width: 100%;height: 100vh;margin: 0;padding: 0;
}
</style>

添加全局樣式

在style.css文件中添加以下樣式:

* {margin: 0;padding: 0;box-sizing: border-box;
}html, body {width: 100%;height: 100%;overflow: hidden;
}#app {width: 100%;height: 100%;
}

運行項目

完成以上配置后,運行以下命令啟動開發服務器:

npm run dev

瀏覽器會自動打開并顯示Cesium地球視圖,可以通過鼠標拖拽和滾輪進行交互。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/91586.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/91586.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/91586.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

礦業自動化破壁者:EtherCAT轉PROFIBUS DP網關的井下實戰

在深井鉆機的轟鳴、礦石輸送帶的奔流與通風設備的不息運轉中&#xff0c;礦業生產的脈搏強勁跳動。然而&#xff0c;這片創造價值的土地&#xff0c;卻為自動化技術的深入設置了嚴苛的考場&#xff1a;信息孤島林立&#xff1a; 高效現代的EtherCAT控制系統與井下大量穩定服役的…

SpringBoot+Loki4j+Loki+Grafana搭建輕量級日志系統

文章目錄前言一、組件介紹&#xff08;一&#xff09;Loki特點架構適用場景總結&#xff08;二&#xff09;Loki4j特點&#xff08;三&#xff09;Grafana特點適用場景二、組件配置&#xff08;一&#xff09;Loki&#xff08;二&#xff09;Grafana三、項目搭建參考文章前言 …

SpringCloud之Config

SpringCloud之Config 推薦網站&#xff1a;https://www.springcloud.cc/spring-cloud-dalston.html#_spring_cloud_config 1. 什么是 Spring Cloud Config Spring Cloud Config 是 Spring 官方提供的 分布式配置中心 組件&#xff0c;用來 集中管理、動態下發、版本控制 所有微…

探索VB.NET中的貝塞爾Bezier曲線繪制技巧

簡介&#xff1a;Bezier曲線是計算機圖形學中用于創建平滑曲線的重要工具&#xff0c;廣泛應用于圖形設計、游戲開發、CAD系統等領域。本文深入探討了Bezier曲線的基礎知識&#xff0c;并詳細說明了如何在Visual Basic中使用 Graphics 對象的 DrawBezier 方法繪制曲線。通過理論…

分布式分片策略中,分片數量的評估與選擇

分布式分片策略中,分片數量的評估與選擇是影響系統性能、擴展性和運維成本的核心問題 一、分片數量評估方法論 1. ??數據量基準模型?? ??單分片容量建議??:根據Elasticsearch最佳實踐,單個分片建議控制在10-50GB(冷數據可放寬至100GB),超過100GB會導致段合并效率…

Vue3高級特性:深入理解effectScope及其應用場景

系列文章目錄 Vue3 組合式 API 進階&#xff1a;深入解析 customRef 的設計哲學與實戰技巧 Vue3 watchEffect 進階使用指南&#xff1a;這些特性你可能不知道 Vue3高級特性&#xff1a;深入理解effectScope及其應用場景 文章目錄系列文章目錄前言一、核心概念1、什么是 effect…

Docker 中的動態配置:docker update 命令與環境變量管理

Docker 中的動態配置&#xff1a;docker update 命令與環境變量管理 在 Docker 容器的日常管理中&#xff0c;動態調整配置以適應業務需求變化是常見的操作。docker update 命令作為 Docker 平臺的重要工具&#xff0c;為運行中的容器提供了便捷的配置調整方式&#xff0c;而環…

ELK 使用教程采集系統日志

作者&#xff1a;小凱 沉淀、分享、成長&#xff0c;讓自己和他人都能有所收獲&#xff01; 本文的宗旨在于通過易于上手實操的方式&#xff0c;教會讀者完成系統ELK日志采集的對接和使用。那你知道對于一個系統的上線考察&#xff0c;必備的幾樣東西是什么嗎&#xff1f;其實這…

小程序部分pai

wx.setClipboardData 這是微信小程序提供的 API&#xff0c;用于將數據復制到剪貼板。 Page({data: {clientInfo: {email: exampleexample.com // 假設的郵箱數據}},// 復制郵箱到剪貼板copyEmail: function() {wx.setClipboardData({data: this.data.clientInfo.email,success…

【解決方案】鴻蒙 / 礦鴻系統 Shell 無故退出問題(息屏導致)詳解

平臺環境 OpenHarmony 版本&#xff1a;4.1 release開發板&#xff1a;DAYU / RK3568調試工具&#xff1a;hdc 在使用 OpenHarmony 4.1 Release&#xff08;礦鴻系統&#xff09;進行開發時&#xff0c;遇到這樣的問題&#xff1a; &#x1f6a8; Shell 會在一段時間后自動退出…

Data Analysis TTAD=>CNN-BiGRU-MSA

TTAO 預處理、CNN-BiGRU-MSA 模型 時序數據回歸分析時序數據分析方法&#xff0c;特點&#xff1a;TTAO 預處理&#xff1a;通過三角拓撲結構增強時序特征的局部和全局關系混合模型架構&#xff1a;CNN 層提取局部特征模式BiGRU 捕獲雙向時序依賴多頭自注意力機制進行序列建模…

python-字典、集合、序列切片、字符串操作(筆記)

一、字符串常見操作&#xff08;重點&#xff09;?1.?2.字符串無法修改#錯誤示范 str1"djskds" str1[2]"3"3.?str1"abcand" # 輸出3 print(str1.index("and"))4.?str1"abcand" newStrstr1.replace("and",&quo…

【Android】EditText使用和監聽

三三想成為安卓糕手 一&#xff1a;用戶登錄校驗 1&#xff1a;EditText文本輸入框<EditTextandroid:id"id/et_user_name"android:layout_width"match_parent"android:layout_height"wrap_content"android:inputType"number"androi…

SQL 中根據當前時間動態計算日期范圍

在 SQL 中寫“動態時間”通常是指根據當前時間動態計算日期范圍&#xff0c;而不是寫死固定日期。以下是幾種常見寫法&#xff08;以 SQL Server / MySQL / PostgreSQL 為例&#xff09;&#xff1a;1. 獲取當前時間-- SQL Server SELECT GETDATE() AS now-- MySQL SELECT NOW(…

react-redux 類組件的 connect

store 目錄下 store/reducer.js import * as actionTypes from ./constantsconst initalState {counter: 100,banners: [],recommends: [] }/*** 定義reducer函數&#xff1a;純函數* param 參數一&#xff1a;store中目前保存的state* param 參數二&#xff1a;通過 dispatch…

數據分布是如何影響目標檢測精度

文章目錄一、研究背景與目標模型效果提升數據集優化二、研究問題明細各方向的關聯性與核心邏輯1. 高質量數據集的高效篩選與主動學習應用2. 基于推理結果的數據補充與增強方向優化3. 多類別場景下目標尺度與模型精度的關聯性4. 損失函數與數據增強對精度的量化影響5. 目標類型專…

高效批量轉換Java接口為MCP服務:降低重復勞動的實戰指南

高效批量轉換Java接口為MCP服務:降低重復勞動的實戰指南 在AI大模型技術飛速發展的今天,企業需要將現有Java接口快速適配為模型計算協議(MCP,Model Calculation Protocol)服務,以便與大模型生態無縫對接。然而,手動逐個轉換接口不僅耗時耗力,還容易因人為疏忽導致錯誤…

Eclipse Debug 配置指南

Eclipse Debug 配置指南 引言 Eclipse 作為一款功能強大的集成開發環境(IDE),在Java開發者中享有盛譽。在開發過程中,調試功能是必不可少的。本文將詳細介紹如何在Eclipse中配置調試環境,以便更高效地進行代碼調試。 1. 開發環境準備 在開始配置Eclipse調試環境之前,…

modelscope ProxyError: HTTPSConnectionPool(host=‘www.modelscope.cn‘, port=443)

目錄 Windows CMD&#xff1a; powershell Linux / macOS / Git Bash&#xff1a; win11 設置全局系統變量代理 modelscope ProxyError: HTTPSConnectionPool(hostwww.modelscope.cn, port443) 報錯&#xff1a; requests.exceptions.ProxyError: HTTPSConnectionPool(host…

Python學習之——序列化與反序列化

Python學習之——序列化與反序列化yaml & json & xmlyamljsonPython自帶Json庫xml一個綜合示例pickle & msgpack & marshalpicklemsgpackmarshal自定義導出py文件一個導出py文件的示例yaml & json & xml YAML & JSON &XML 如何選擇 yaml Py…