記vue中引入cesium

2021-09-07 04:26:45 字數 1513 閱讀 1628

因為個人原因,已經很久很久沒有寫過部落格了,但是學過的東西終歸還是要記錄滴,以下是在vue中引入cesium,具體步驟如下

一、首先安裝vue-cli,因為之前接觸vue的時候都是自己手動配置webpack,感覺每一步都知道所以然,但是現在直接使用vue-cli後確實是方便了很多,但是裡面好多的配置都是不知所以然,就按照官方的配置進行了配置,執行結果出來了,也沒有問題,

需要使用到node環境,這裡就不多說了,沒有就安裝乙個吧!

1、安裝vue-cli,執行命令npm install -g vue-cli,這裡是全域性安裝,如果沒有-g安裝完成之後執行是有問題的。

2、初始化專案,這個可以自定義,使用vue init webpack cesium-demo,其中webpack是模板名稱,cesium-demo是初始化的專案名稱,之後會出現一連串的確認,例如作者,版本等等,一路回車,等所有結束之後會在當前資料夾下出現乙個package.json檔案。

二、安裝cesium

1、進入cesium-demo資料夾,命令為cd cesium-demo

2、執行npm install cesium,等待安裝完成

3、執行npm run dev,如果出現vue的介面,則證明上述過程無誤,繼續向下

三、修改webpack配置

1、在build資料夾下的webpack.base.conf.js中設定cesium原始碼的路徑

增加一行  const cesiumsource='../node_modules/cesium/source',之後再resolve中增加一行cesium的路徑

在modules的rules中再增加兩行,

之後在webapck.dev.conf.js中的plugins中增加三行

四、修改vue檔案,

3、執行npm run dev ,效果如下:

Cesium引入Three同步相機

這個帖子講述了如何在在cesium引入three,總結一下原理就是 html中設定兩個容器分別用於容納cesium與three,且three容器在cesium容器下面,這樣才能讓three產生的場景覆蓋在cesium上,並且禁用three容器的滑鼠事件,通過cesium同步three。初始化ceiu...

Cesium 入坑記(一)

我也不知道研究生生活第乙個專案居然是搞這個,研究半天才發現就是前端有關js的東西,我也是醉了 所以還是需要一些前端的基礎的,話不多說,開始第乙個專案的練習!獲取到安裝包之後 解壓從命令列中進入當前目錄 非常非常重要,當時就被這個弄糊塗了 開始安裝依賴,輸npm install,安裝的cnpm就用cn...

Vue中 引入使用 vue json views

專案開發過程中遇到展示 json 的場景,且 json 檔案體積過大,小則幾百kb。vue json views 即使載入 1m 左右的 json 文時,結合deep 深度限制,也能實現秒開的速度,元件壓所過後體積只有15.7kb,開啟gzip壓縮後只有4.74kb。1.示例及文件 位址 或 直接雙...