本文討論如何配置學習環境
預期目的:在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模式如下圖
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>