bob
/
westdc-zf1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改timemap地图为openlayers

This commit is contained in:
wlx 2015-01-26 10:27:29 +00:00
parent 4b437d8ee3
commit 420ac049c0
1 changed files with 12 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
application/default/views/scripts/data/timemap.phtml
View File

@ -3,12 +3,12 @@ $this->headTitle($this->config->title->site);
$this->headTitle($this->config->title->data);
$this->headTitle('时空导航');
$this->headTitle()->setSeparator(' - ');
//$this->headLink()->appendStylesheet('/css/metadata.css');
$this->theme->AppendPlus($this,'google_map_v3');
$this->theme->AppendPlus($this,'colorbox');
//$this->theme->AppendPlus($this,'google_map_v3');
//$this->theme->AppendPlus($this,'colorbox');
$this->headScript()->appendFile('/js/OpenLayers.js');
$this->headScript()->appendFile('/js/timeline_var.js');
$this->headScript()->appendFile('/js/timeline_js/timeline-api.js');
$this->headScript()->appendFile('/js/timemap.2.0.1/lib/mxn/mxn.js?(googlev3)');
$this->headScript()->appendFile('/js/timemap.2.0.1/lib/mxn/mxn.js?(openlayers)');
$this->headScript()->appendFile('/js/timemap.2.0.1/timemap.pack.js');
$this->nav[] = array('link'=>"/data/timemap",'title'=>'时空导航');
?>
@ -17,41 +17,21 @@ img{max-width:none}
</style>
<div class="row-fluid"><?= $this->render('breadcrumbs.phtml'); ?><?= $this->partial('data/tools.phtml'); ?></div>
<div id="timemap">
<div id="timeline" style="height:500px;border-right:1px solid #abc;width:50%;float:left;"></div>
<div id="map" style="height:500px;"></div>
<div id="timeline" style="height:400px;border-bottom:1px solid #abc;"></div>
<div id="map" style="height:400px;"></div>
</div>
<script type="text/javascript" charset="utf-8">
$('#map').height($(window).height());
$('#timeline').height($(window).height());
$('#map').height($(window).height()/2);
$('#timeline').height($(window).height()/2);
$("html,body").animate({scrollTop:$('#timemap').offset().top},600);
var tm;
$(function() {
// make a custom map style
var styledMapType = new google.maps.StyledMapType([
{
featureType: "water",
elementType: "all",
stylers: [
{ saturation: 0 },
{ lightness: 100 }
]
},
{
featureType: "all",
elementType: "all",
stylers: [
{ saturation: -100 }
]
}
], {
name: "white"
});
tm = TimeMap.init({
mapId: "map", // Id of map div element (required)
timelineId: "timeline", // Id of timeline div element (required)
scrollTo:"2012-01-01",
options: {
eventIconPath: "../images/"
},
@ -78,7 +58,7 @@ $(function() {
},
"title" : "<?php echo htmlspecialchars($row['title']); ?>",
"options" : {
"infoHtml": "<div class='info'><a href=/heihe/view/uuid/<?php echo $row['uuid']; ?>><?php echo htmlspecialchars($row['title']); ?></a><hr /><img src=/service/thumb/id/<?php echo $row['id']; ?> onclick='$.colorbox({photo:\"true\",href:\"/service/bigthumb/id/<?php echo $row['id']; ?>\"});' /></div>",
"infoHtml": "<div class='info'><a href=/data/view/uuid/<?php echo $row['uuid']; ?>><?php echo htmlspecialchars($row['title']); ?></a><hr /><img src=/service/thumb/id/<?php echo $row['id']; ?> onclick='$.colorbox({photo:\"true\",href:\"/service/bigthumb/id/<?php echo $row['id']; ?>\"});' /></div>",
"theme":"orange"
}
},
@ -89,14 +69,10 @@ $(function() {
],
bandIntervals: [
Timeline.DateTime.MONTH,
Timeline.DateTime.DECADE
Timeline.DateTime.YEAR
]
});
// set the map to our custom style
var gmap = tm.getNativeMap();
gmap.mapTypes.set("white", styledMapType);
gmap.setMapTypeId("white");
});
</script>