westdc-zf1/application/default/views/scripts/data/map.phtml

92 lines
3.5 KiB
PHTML
Executable File

<?php
$this->headTitle($this->config->title->site);
$this->headTitle($this->config->title->data);
$this->headTitle("空间浏览");
$this->headTitle()->setSeparator(' - ');
$this->headLink()->appendStylesheet('/css/metadata.css');
$this->breadcrumb('<a href="/">首页</a>');
$this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
$this->breadcrumb('<a href="/data/tag">空间浏览</a>');
if (!empty($this->codename)) $this->breadcrumb($this->codename);
$this->breadcrumb()->setSeparator(' > ');
$this->headScript()->appendFile('http://maps.google.com/maps/api/js?sensor=false');
$this->headScript()->appendFile('/js/OpenLayers.js');
$this->headLink()->appendStylesheet('/js/theme/default/style.css');
?>
<div class="row-fluid">
<?= $this->partial('data/tools.phtml'); ?>
</div>
<div id='map' style="clear:left;height:500px;border:1px;"></div>
<style type="text/css">
label{display:inline;}
img{max-width:none;}
hr{margin:0;}
</style>
<script type="text/javascript" >
var map;
map = new OpenLayers.Map('map');
map.addControl(new OpenLayers.Control.LayerSwitcher());
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN}
);
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 20}
);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
);
geojson_layer = new OpenLayers.Layer.Vector("Data Boundary", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "/service/json<?php echo $this->params; ?>",
format: new OpenLayers.Format.GeoJSON()
})
});
map.addLayers([gphy, gmap, ghyb, gsat,geojson_layer]);
// Google.v3 uses EPSG:900913 as projection, so we have to
// transform our coordinates
map.setCenter(new OpenLayers.LonLat(102, 36).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 5);
var sf = new OpenLayers.Control.SelectFeature(geojson_layer,{onSelect:onFeatureSelect,onUnselect:onFeatureUnselect});
map.addControl(sf);
sf.activate();
for (var i=map.layers.length-1; i>=0; --i) {
map.layers[i].animationEnabled = this.checked;
};
function onPopupClose(evt) {
selectControl.unselect(selectedFeature);
}
function onFeatureSelect(feature) {
selectedFeature = feature;
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
null,
"<div style='font-size:.8em'><a href=/data/"+feature.attributes['uuid']+">"+ feature.attributes['title'] +"</a> | <a href=/data/map/id/"+feature.attributes['id']+"><i class='icon-globe'></i></a><hr /><img class='' src=/service/thumb/id/" + feature.attributes['id']+"/></div>",
null, false, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
</script>