您的位置：首页 > Web前端 > Node.js

cesium学习1--环境搭建和配置

2016-04-16 15:30 627 查看

本文讨论如何配置学习环境

预期目的:在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>
<
4000
span class="hljs-tag"><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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： cesium nodejs webstorm 环境配置

相关文章推荐

新的分享

章节导航