246 lines
8.8 KiB
HTML
246 lines
8.8 KiB
HTML
|
<!--
|
||
|
|
Land Temperature Tendency(2006~2017)
|
||
|
|
Dynamic ImagerLayers Demo
|
||
|
|
-->
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<head>
|
||
|
|
<title>LandSurfaceTemperature</title>
|
||
|
|
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
||
|
|
<link href="../Build/Cesium/Widgets/Animation/Animation.css" rel="stylesheet">
|
||
|
|
<link href="../Build/Cesium/Widgets/Animation/lighter.css" rel="stylesheet">
|
||
|
|
<script type="text/javascript" src="./js/require.min.js" data-main="./js/main"></script>
|
||
|
|
<script type="text/javascript" src="./js/require.min.js" data-main="./js/main"></script>
|
||
|
|
<script type="text/javascript" src="./images/LandSurfaceTemperature/data.js" data-main="./js/main"></script>
|
||
|
|
<style>
|
||
|
|
html, body, #cesiumContainer {
|
||
|
|
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
|
||
|
|
}
|
||
|
|
#tempStatis{
|
||
|
|
margin: 1px;
|
||
|
|
padding: 0px 0px;
|
||
|
|
position: absolute;
|
||
|
|
left: 0px;
|
||
|
|
top: 0px;
|
||
|
|
width:800px;
|
||
|
|
height:300px;
|
||
|
|
background-color:rgba(38, 38, 38, 0.75)
|
||
|
|
}
|
||
|
|
#toolbar {
|
||
|
|
margin: 1px;
|
||
|
|
padding: 0px 0px;
|
||
|
|
position: absolute;
|
||
|
|
left: 0px;
|
||
|
|
top: 0px;
|
||
|
|
width:400px;
|
||
|
|
height:50px;
|
||
|
|
background-color:rgba(38, 38, 38, 0.75);
|
||
|
|
color:#ffffff;
|
||
|
|
}
|
||
|
|
#toolbar input {
|
||
|
|
vertical-align: middle;
|
||
|
|
padding-top: 2px;
|
||
|
|
padding-bottom: 2px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="tempStatis" style="z-index:100">
|
||
|
|
</div>
|
||
|
|
<div id="cesiumContainer"></div>
|
||
|
|
<div id="toolbar" style="z-index:100">
|
||
|
|
<table>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>Frame Rate</td>
|
||
|
|
<td>
|
||
|
|
<input type="range" min="1" max="60" step="1" data-bind="value: days, valueUpdate: 'input'">
|
||
|
|
<input type="text" size="5" data-bind="value: days">
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||
|
|
var clock;
|
||
|
|
|
||
|
|
var viewModel = {
|
||
|
|
days: 0
|
||
|
|
};
|
||
|
|
var defaultDays = 7;
|
||
|
|
|
||
|
|
function onload(Cesium,CesiumHeatmap,echarts) {
|
||
|
|
///////////////////////////////
|
||
|
|
Cesium.knockout.track(viewModel);
|
||
|
|
var toolbar = document.getElementById('toolbar');
|
||
|
|
Cesium.knockout.applyBindings(viewModel, toolbar);
|
||
|
|
|
||
|
|
function subscribeLayerParameter(name) {
|
||
|
|
Cesium.knockout.getObservable(viewModel, name).subscribe(
|
||
|
|
function(newValue) {
|
||
|
|
if(clock){
|
||
|
|
clock.multiplier = 1*60*60*24*newValue;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
}
|
||
|
|
subscribeLayerParameter('days');
|
||
|
|
viewModel.days = defaultDays;
|
||
|
|
///////////////////////////////
|
||
|
|
var startDay = new Date("1 2,2006");
|
||
|
|
var endDay = new Date("12 30,2016");
|
||
|
|
var startTime = Cesium.JulianDate.fromDate(startDay);
|
||
|
|
var stopTime = Cesium.JulianDate.fromDate(endDay);
|
||
|
|
|
||
|
|
clock = new Cesium.Clock({
|
||
|
|
startTime : startTime,
|
||
|
|
currentTime : startTime,
|
||
|
|
Number:1,
|
||
|
|
stopTime : stopTime,
|
||
|
|
clockRange : Cesium.ClockRange.LOOP_STOP,
|
||
|
|
clockStep : Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
|
||
|
|
multiplier:1*60*60*24*defaultDays
|
||
|
|
});
|
||
|
|
|
||
|
|
clock.shouldAnimate = true;
|
||
|
|
vmClock = new Cesium.ClockViewModel(clock);
|
||
|
|
|
||
|
|
var viewer = new Cesium.Viewer('cesiumContainer',{
|
||
|
|
animation:true,
|
||
|
|
timeline:true,
|
||
|
|
skyBox : false,
|
||
|
|
skyAtmosphere : false,
|
||
|
|
baseLayerPicker : false,
|
||
|
|
clockViewModel:vmClock,
|
||
|
|
imageryProvider :new Cesium.SingleTileImageryProvider({
|
||
|
|
url : './images/globe.jpg'
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
var timeline = viewer.timeline;
|
||
|
|
timeline.zoomTo(startTime,stopTime);
|
||
|
|
clock = viewer.clock;
|
||
|
|
///////////////////////////
|
||
|
|
var dateArray = [];
|
||
|
|
|
||
|
|
for(var i = 2006;i<2017;i++){
|
||
|
|
for (var j=1;j<13;j++){
|
||
|
|
dateArray.push(i.toString() + "." + j.toString());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var tempArray = [
|
||
|
|
0.708,1.235,0.99,0.712,0.431,0.917,0.635,0.985,0.769,1.03,0.832,1.348,1.995,1.03,1.167,1.476,1.164,0.793,0.813,0.843,0.83,1.073,0.969,0.872,0.262,0.383,1.59,0.939,0.69,0.619,0.767,0.68,0.691,1.134,1.092,0.737,1.104,0.895,0.757,0.991,0.755,0.678,0.828,0.749,1.047,0.866,0.896,0.662,1.149,1.191,1.415,1.309,1.055,0.88,0.803,0.86,0.764,1.184,1.362,0.647,0.7,0.549,0.7,2,1.141,0.633,0.852,1.076,1.096,0.806,1.09,0.69,1.029,0.573,0.435,0.699,1.329,1.231,0.972,0.661,0.803,0.905,1.162,1.025,0.45,1.093,1.023,0.939,0.692,0.84,1.041,0.588,0.836,1.034,0.987,1.295,1.071,1.144,0.3,1.057,1.237,1.213,0.812,0.458,0.967,0.976,1.057,0.575,1.193,1.296,1.463,1.428,0.965,0.965,0.977,0.637,0.839,0.869,1.494,1.287,1.789,1.618,2.186,2.137,1.805,1.253,0.846,0.89,1.375,1.008,1.002,1.089,1.261];
|
||
|
|
var option = {
|
||
|
|
xAxis : [
|
||
|
|
{
|
||
|
|
type : 'category',
|
||
|
|
boundaryGap : false,
|
||
|
|
data : dateArray
|
||
|
|
}
|
||
|
|
],
|
||
|
|
yAxis : [
|
||
|
|
{
|
||
|
|
type : 'value',
|
||
|
|
axisLabel : {
|
||
|
|
formatter: '{value}'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
series : [
|
||
|
|
{
|
||
|
|
name:'当前',
|
||
|
|
type:'scatter',
|
||
|
|
symbolSize: 6,
|
||
|
|
data:[["2006.1",0.708]]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'温差',
|
||
|
|
type:'line',
|
||
|
|
data:tempArray,
|
||
|
|
markLine : {
|
||
|
|
data : [
|
||
|
|
{type : 'average', name: '平均值'}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
var canvas=document.getElementById("tempStatis");
|
||
|
|
|
||
|
|
var myChart = echarts.init(canvas);
|
||
|
|
myChart.setOption(option);
|
||
|
|
///////////////////////////
|
||
|
|
|
||
|
|
/////////////////////////////////////////////////
|
||
|
|
var imageryLayers = viewer.imageryLayers;
|
||
|
|
var p0 = new Cesium.SingleTileImageryProvider({
|
||
|
|
url : './images/LandSurfaceTemperature/2006.1.jpg'
|
||
|
|
});
|
||
|
|
var p1 = new Cesium.SingleTileImageryProvider({
|
||
|
|
url : './images/LandSurfaceTemperature/2006.2.jpg'
|
||
|
|
});
|
||
|
|
var layer0 = imageryLayers.addImageryProvider(p0);
|
||
|
|
var layer1 = imageryLayers.addImageryProvider(p1);
|
||
|
|
layer1.alpha = 0;
|
||
|
|
////////////////////////////////////////////////
|
||
|
|
|
||
|
|
viewer.animation.viewModel.timeFormatter = function(date, viewModel) {
|
||
|
|
var gregorianDate = Cesium.JulianDate.clone(clock.currentTime);
|
||
|
|
var currentTime = Cesium.JulianDate.toGregorianDate(gregorianDate);
|
||
|
|
var millisecond = Math.round(currentTime.millisecond);
|
||
|
|
return Cesium.sprintf("%02d:%02d:%02d.%03d", currentTime.hour, currentTime.minute, currentTime.second, millisecond);
|
||
|
|
};
|
||
|
|
|
||
|
|
var currentMonth = 1;
|
||
|
|
viewer.animation.viewModel.dateFormatter = function(date, viewModel) {
|
||
|
|
var gregorianDate = Cesium.JulianDate.clone(clock.currentTime);
|
||
|
|
var currentTime = Cesium.JulianDate.toGregorianDate(gregorianDate);
|
||
|
|
|
||
|
|
var nY = currentTime.year;
|
||
|
|
var nM = currentTime.month;
|
||
|
|
var nD = currentTime.day;
|
||
|
|
|
||
|
|
if(layer0.alpha >= 0 ) {
|
||
|
|
var alpha = nD / 30;
|
||
|
|
layer0.alpha = 1 - alpha;
|
||
|
|
layer1.alpha = alpha;
|
||
|
|
}
|
||
|
|
if(currentMonth != nM) {
|
||
|
|
updateLayers(nY,nM);
|
||
|
|
currentMonth = nM;
|
||
|
|
}
|
||
|
|
|
||
|
|
var strIndex = nY + "." + nM;
|
||
|
|
var value = tempArray[(nY-2006) * 12 + nM - 1];
|
||
|
|
|
||
|
|
myChart.addData([
|
||
|
|
[
|
||
|
|
0, // 系列索引
|
||
|
|
[strIndex,value], // 新增数据
|
||
|
|
false, // 新增数据是否从队列头部插入
|
||
|
|
false
|
||
|
|
]
|
||
|
|
]);
|
||
|
|
return monthNames[currentTime.month - 1] + ' ' + currentTime.day + ' ' + currentTime.year;
|
||
|
|
};
|
||
|
|
|
||
|
|
function updateLayers(nY,nM) {
|
||
|
|
var urlNew = "./images/LandSurfaceTemperature/" + nY + "." + nM + ".jpg";
|
||
|
|
|
||
|
|
var pNew = new Cesium.SingleTileImageryProvider({
|
||
|
|
url :urlNew
|
||
|
|
});
|
||
|
|
var layerNew = imageryLayers.addImageryProvider(pNew);
|
||
|
|
|
||
|
|
imageryLayers.remove(layer0);
|
||
|
|
layer0 = layer1;
|
||
|
|
layer0.alpha = 1;
|
||
|
|
layer1 = layerNew;
|
||
|
|
layer1.alpha = 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|