westdc-zf1/application/default/views/scripts/water/timemap.phtml

74 lines
3.2 KiB
PHTML

<?php
$this->headTitle($this->config->title->site);
$this->headTitle($this->config->title->data);
$this->headTitle('时空导航');
$this->headTitle()->setSeparator(' - ');
$this->headLink()->appendStylesheet('/css/water.css');
$this->breadcrumb('<a href="/">首页</a>');
$this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
$this->breadcrumb('<a href="/water/">黑河综合遥感联合试验</a>');
$this->breadcrumb('时空联合导航');
$this->breadcrumb()->setSeparator(' > ');
$this->headScript()->appendFile('http://maps.google.cn/maps?file=api&v=2&key='.$this->config->google->maps->api);
$this->headScript()->appendFile('/js/timeline_var.js');
$this->headScript()->appendFile('/js/timeline_js/timeline-api.js');
$this->headScript()->appendFile('/js/timemap/timemap.js');
$this->headScript()->captureStart();
?>
var tm;
window.onload=function() {
tm = TimeMap.init({
mapId: "watermap", // Id of map div element (required)
timelineId: "timeline", // Id of timeline div element (required)
scrollTo: "2008-06-01",
options: {
eventIconPath: "../images/",
mapType:G_SATELLITE_MAP,
mapCenter: new GLatLng(39,100)
},
datasets: [
{
data:{
theme: "orange",
// note that the lines below are now the preferred syntax
type: "basic",
value: [
<?php foreach($this->rows as $row) : ?>
{
"start" : "<?php echo $row['timebegin']; ?>",
<?php if ($row['timeend']!='') : ?>
"end" : "<?php echo $row['timeend']; ?>",
<?php endif; ?>
"point" :
{
"lat" : <?php echo ($row['south']+$row['north'])/2; ?>,
"lon" : <?php echo ($row['west']+$row['east'])/2; ?>
},
"title" : "<?php echo htmlspecialchars(mb_substr($row['title'],11,mb_strlen($row['title'],'UTF-8')-10,'UTF-8')); ?>",
"options" : {
// set the full HTML for the info window
"infoHtml": "<div class='info'><a href=/water/<?php echo $row['uuid']; ?>><?php echo htmlspecialchars(mb_substr($row['title'],11,mb_strlen($row['title'],'UTF-8')-10,'UTF-8')); ?></a><hr /><img src=/service/thumb/id/<?php echo $row['id']; ?> /></div>",
"theme":"orange"
}
},
<?php endforeach; ?>
]
}
}
],
bandIntervals: [
Timeline.DateTime.DAY,
Timeline.DateTime.MONTH
]
});
// manipulate the timemap further here if you like
var map=tm.map;
map.setCenter(new GLatLng(39,100),7);
}
window.onunload=GUnload();
<?php $this->headScript()->captureEnd(); ?>
<div id="timemap" style="clear:both;">
<div id="watermap" style="height:500px;width:40%;float:right;"></div>
<div id="timeline" style="height:500px;border-right:1px solid #abc;"></div>
</div>