确定浏览器支持Cesium,the Hello World example,如果地球无法显示,请检查浏览器版本是否为chrome或ie最新版本,以及检查显卡否更新到最新版本驱动。
一. 下载Cesium
在官网下载Cesium-1.35.zip,解压后目录结构如下:
Apps - demo例子
Build - cesium API的js,以及css相关文件
HelloWorld.html - 最简单的例子
Apps/Sandcastle/index.html - 各种例子及其源码
index.html -初始页面,目录页面
二. 部署
将解压的Cesium丢到tomcat8的webapps目录下,启动tomcat。
三. Hello world!
HelloWorld.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 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>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
引用Cesium.js
<script src="../Build/Cesium/Cesium.js"></script>
引用widgets.css
@import url(../Build/Cesium/Widgets/widgets.css);
创建一个id=cesiumContainer的div
<div id="cesiumContainer"></div>
最后需要初始化地球引擎
var viewer = new Cesium.Viewer('cesiumContainer');