1. 程式人生 > >cesium學習1--環境搭建和配置

cesium學習1--環境搭建和配置

本文討論如何配置學習環境

預期目的:在webstrom中配置好開發環境,並執行達到下圖效果
效果圖

1)nodejs環境配置
很簡單直接下載nodejs安裝檔案安裝即可。
備註:由於node的資源在國內被牆的厲害,推薦採用cnpm替代npm來安裝一些依賴庫
安裝cnpm方法:

npm install -g cnpm --registry=https://registry.npm.taobao.org

2)cesium下載
下載解壓,開啟cmd轉到該解壓後的目錄下,執行

cnmp install

自動安裝所需要的依賴檔案,然後執行

node server.js

即可執行處上圖結果。
3)在webstorm中進行配置


下載webstorm開發平臺,通過cnpm安裝express開發框架,這些前序基礎都需要先完成。
3.1 開啟webstorm,新建專案選擇nodejs+express模式如下圖
新建web專案
3.2 拷貝cesium解壓目錄下的buid裡面的cesium資料夾到下圖所示位置
配置檔案
3.3 環境配置好了,我們修改下主頁的程式碼,引用相關js檔案,執行webstorm,在瀏覽器中輸入localhost:3000即可訪問到結果

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title
>
<link rel='stylesheet' href='/stylesheets/style.css' /> <link rel='stylesheet' href='/javascripts/Cesium/Widgets/widgets.css' /> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version. --> <meta http-equiv
="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Hello World!</title> <style> html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <div id="cesiumContainer"></div> </body> <script src="/javascripts/Cesium/Cesium.js"></script> <script> var viewer = new Cesium.Viewer('cesiumContainer'); </script> </html>