<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description" content="Add imagery from a Web Map Service (WMS) server.">
<meta name="cesium-sandcastle-labels" content="Beginner">
<title>Cesium Demo</title>
<link rel="stylesheet" href="test.css">
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript">
require.config({
baseUrl : '../../../Source',
waitSeconds : 60
});
</script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize">
<button onclick="changeScene1()" >二维</button> //点击按钮,三维地球切换二维地图
<button onclick="changeScene2()" >三维</button>
<div id="1"><img src="img/play.png" onclick="playEarth()" style="width:30px; position:absolute; bottom:0px; margin-left:160px;z-index: 1000; "></div>
<div style="position:absolute; bottom:0; margin-left:200px; z-index: 1000;">
<li style="float:left; list-style: none;">
<p>1996</p>
<div style="position:relative;">
<div id="container1996"><img src="img/site.png" style="z-index: 1100; width:10px;position:absolute; bottom: -5px;left:40%;" ></div>
<img src="img/first.png" onclick="showEarth(1996)" style="width:50px;height:10px;"> //onclick 给showEarth传值,获取不同图层
</div>
</li>
<li style="float:left;list-style:none;">
<p>1997</p>
<div style="position:relative;">
<div id="container1997"></div>
<img src="img/2.png" onclick="showEarth(1997)" style="width:50px; height:10px;">
</div>
</li>
<li style="float:left; list-style: none;">
<p>1998</p>
<div style="position:relative;">
<div id="container1998"></div>
<img src="img/3.png" onclick="showEarth(1998)" style="width:50px; height:10px;">
</div>
</li>
<li style="float:left; list-style: none;">
<p>1999</p>
<div style="position:relative;">
<div id="container1999"></div>
<img src="img/4.png" onclick="showEarth(1999)" style="width:50px;height:10px;">
</div>
</li>
<li style="float:left; list-style: none;height:10px;">
<p<