修改空间浏览方式
This commit is contained in:
Li Jianxuan
parent
a9489cbe51
commit
36f914df7e
|
|
@ -1478,4 +1478,30 @@ class ServiceController extends Zend_Controller_Action
|
|||
->setBody($bib);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function mapsearchAction(){
|
||||
$this->_helper->layout->disableLayout();
|
||||
$this->_helper->viewRenderer->setNoRender();
|
||||
|
||||
include_once("data/Metadata.php");
|
||||
$md = new Metadata($this->db);
|
||||
|
||||
$options = $this->_getParam('opt');
|
||||
if(isset($options['east']))
|
||||
$options['east'] = (float)$options['east'];
|
||||
if(isset($options['west']))
|
||||
$options['west'] = (float)$options['west'];
|
||||
if(isset($options['north']))
|
||||
$options['north'] = (float)$options['north'];
|
||||
if(isset($options['south']))
|
||||
$options['south'] = (float)$options['south'];
|
||||
|
||||
$data = $md->mapview($options);
|
||||
|
||||
$this->getResponse()->setHeader('Content-Type', 'application/json')->appendBody(json_encode($data,JSON_NUMERIC_CHECK));
|
||||
return true;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,88 +1,202 @@
|
|||
<?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->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');
|
||||
$this->headTitle($this->config->title->site);
|
||||
$this->headTitle($this->config->title->data);
|
||||
$this->headTitle("空间浏览");
|
||||
$this->headTitle()->setSeparator(' - ');
|
||||
$this->theme->AppendPlus($this,'jquery_ui');
|
||||
//$this->theme->AppendPlus($this,'google_map_v3');
|
||||
$this->theme->AppendPlus($this,'colorbox');
|
||||
$this->headLink()->appendStylesheet('/js/theme/default/style.css');
|
||||
$this->nav[] = array('link'=>"/data/map",'title'=>'空间导航');
|
||||
?>
|
||||
<div class="row-fluid">
|
||||
<?= $this->render('breadcrumbs.phtml'); ?>
|
||||
<?= $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;}
|
||||
#data_canvas .well {background:#FFF;}
|
||||
</style>
|
||||
<div class="row-fluid">
|
||||
<?= $this->render('breadcrumbs.phtml'); ?>
|
||||
<?= $this->partial('data/tools.phtml'); ?>
|
||||
<h4>将地图中范围调整至要搜索数据的范围，然后点击“搜索数据”按钮查看当前范围的所有数据</h4>
|
||||
<hr />
|
||||
<div class="row-fluid">
|
||||
<div class="span6">
|
||||
<div><button class="btn btn-large btn-block" type="button" id="searchbtn" onclick="mapmethods.action(map,1);">查看数据</button></div>
|
||||
<hr />
|
||||
<div id="map_canvas" style="height:500px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<div><button class="btn btn-large btn-block" type="button" onclick="$('#data_canvas').html('');">清除列表</button></div>
|
||||
<hr />
|
||||
<div class="well well-small" style="height:500px;overflow-y:scroll;">
|
||||
<ul id="data_canvas" class="unstyled">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" >
|
||||
var map;
|
||||
$(function() {
|
||||
|
||||
map = new OpenLayers.Map('map');
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
});
|
||||
function loadScript() {
|
||||
var script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
|
||||
'callback=initialize';
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
|
||||
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()
|
||||
})
|
||||
});
|
||||
window.onload = loadScript;
|
||||
|
||||
// Google Map Part
|
||||
var map = null;
|
||||
var mapElementID = "map_canvas";
|
||||
var rectangle = null;
|
||||
var markers = [];
|
||||
|
||||
function initialize() {
|
||||
//加载地图
|
||||
var myLatlng = new google.maps.LatLng(35.656456,105.819946);
|
||||
var myOptions = {
|
||||
zoom: 3,
|
||||
center: myLatlng,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||
}
|
||||
map = new google.maps.Map(document.getElementById(mapElementID), myOptions);
|
||||
|
||||
//methods.trigger('tilesloaded',map);
|
||||
mapmethods.trigger('dragend',map);
|
||||
mapmethods.trigger('zoom_changed',map);
|
||||
}
|
||||
|
||||
function RemoveRectangle(){
|
||||
if(rectangle != null)
|
||||
{
|
||||
rectangle.setMap(null);
|
||||
rectangle = null;
|
||||
}
|
||||
if (markers) {
|
||||
for (i in markers) {
|
||||
markers[i].setMap(null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setRectangle(east,west,south,north){
|
||||
|
||||
if(east.toFixed(1) != west.toFixed(1) && south.toFixed(1)!= north.toFixed(1) ){
|
||||
RemoveRectangle();
|
||||
|
||||
bounds = new google.maps.LatLngBounds(
|
||||
new google.maps.LatLng(south,west),
|
||||
new google.maps.LatLng(north,east)
|
||||
);
|
||||
|
||||
rectangle = new google.maps.Rectangle({
|
||||
bounds: bounds,
|
||||
editable: false
|
||||
});
|
||||
|
||||
rectangle.setMap(map);
|
||||
}else{
|
||||
RemoveRectangle();
|
||||
|
||||
var position = new google.maps.LatLng(south,east);
|
||||
|
||||
var marker = new google.maps.Marker({
|
||||
position: position,
|
||||
map: map,
|
||||
});
|
||||
|
||||
markers.push(marker);
|
||||
}
|
||||
|
||||
|
||||
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();
|
||||
var mapmethods = {
|
||||
trigger : function(triggername,map){
|
||||
google.maps.event.addListener(map, triggername,function(){
|
||||
range = mapmethods.action(map);
|
||||
//console.log(range);
|
||||
//mapmethods.ajax(range,0);
|
||||
});
|
||||
},
|
||||
getbounds : function(map){
|
||||
bounds = map.getBounds();
|
||||
point1 = bounds.getNorthEast();
|
||||
point2 = bounds.getSouthWest();
|
||||
latlng = new Array();
|
||||
latlng['east'] = point1.lng().toFixed(2);
|
||||
latlng['north'] = point1.lat().toFixed(2);
|
||||
latlng['west'] = point2.lng().toFixed(2);
|
||||
latlng['south'] = point2.lat().toFixed(2);
|
||||
return latlng;
|
||||
},
|
||||
action : function(map,ajax){
|
||||
range = mapmethods.getbounds(map);
|
||||
$('#searchbtn').html("搜索数据：(" + range['east'] + "," + range['north'] + ") to (" + range['west'] + "," + range['south'] + ")");
|
||||
if(ajax == 1)
|
||||
mapmethods.ajax(range);
|
||||
//return range;
|
||||
},
|
||||
ajax : function(range){
|
||||
btn = $('#searchbtn');
|
||||
btnhtml = btn.html();
|
||||
func = btn.attr('onclick');
|
||||
|
||||
for (var i=map.layers.length-1; i>=0; --i) {
|
||||
map.layers[i].animationEnabled = this.checked;
|
||||
};
|
||||
data = new Array();
|
||||
for(k in range)
|
||||
{
|
||||
data.push('opt['+k+']='+range[k]);
|
||||
}
|
||||
post = data.join("&");
|
||||
|
||||
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;
|
||||
}
|
||||
$.ajax({
|
||||
'type':"POST",
|
||||
'url': '/service/mapsearch',
|
||||
'data': post,
|
||||
'success':function(data){
|
||||
if (typeof(data)=='object')
|
||||
{
|
||||
mapmethods.list(data);
|
||||
}
|
||||
else{
|
||||
alert('此区域无数据');
|
||||
}
|
||||
},
|
||||
'timeout': 15000,
|
||||
'error': function(){
|
||||
alert('处理中出现错误，请刷新页面后重试');
|
||||
},
|
||||
'beforeSend':function(){
|
||||
btn.attr('onclick','');
|
||||
btn.html('<img src="/images/ajax-load-small.gif" />');
|
||||
},
|
||||
'complete':function(){
|
||||
btn.attr('onclick',func);
|
||||
btn.html(btnhtml);
|
||||
}
|
||||
});
|
||||
},
|
||||
list : function(data)
|
||||
{
|
||||
html = "";
|
||||
if(data.length > 0)
|
||||
{
|
||||
for(i in data)
|
||||
{
|
||||
html += '<li class="well well-small">'
|
||||
+ '<p><a href="/data/'+data[i].uuid+'">'+data[i].title+'</a></p>'
|
||||
+ '<div class="input-append">'
|
||||
+ '<a class="btn" href="javascript:void(0);" onclick="setRectangle('+data[i].east+','+data[i].west+','+data[i].south+','+data[i].north+')" title="在地图上查看数据范围"><i class="icon-eye-open"></i></a>'
|
||||
+ '<a class="btn" href="/data/'+data[i].uuid+'" title="查看数据信息"><i class="icon-search"></i></a>'
|
||||
+ '</div>'
|
||||
+ '</li>';
|
||||
}
|
||||
}
|
||||
$('#data_canvas').html(html);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -17,4 +17,41 @@ class Metadata
|
|||
$rs = $this->db->query($sql);
|
||||
return $rs->fetch();
|
||||
}
|
||||
|
||||
function mapview($options)
|
||||
{
|
||||
$wheresql = array();
|
||||
|
||||
if(isset($options['east']))
|
||||
{
|
||||
$wheresql[] = " md.east < ".$options['east'];
|
||||
}
|
||||
|
||||
if(isset($options['west']))
|
||||
{
|
||||
$wheresql[] = " md.west > ".$options['west'];
|
||||
}
|
||||
|
||||
if(isset($options['north']))
|
||||
{
|
||||
$wheresql[] = " md.north < ".$options['north'];
|
||||
}
|
||||
|
||||
if(isset($options['south']))
|
||||
{
|
||||
$wheresql[] = " md.south > ".$options['south'];
|
||||
}
|
||||
|
||||
if(count($wheresql)>0)
|
||||
{
|
||||
$wheresql = " WHERE ".join(" AND ",$wheresql);
|
||||
}else{
|
||||
$wheresql = "";
|
||||
}
|
||||
|
||||
$sql = "SELECT md.* FROM ".$this->tbl_metadata." md $wheresql";
|
||||
|
||||
$rs = $this->db->query($sql);
|
||||
return $rs->fetchAll();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue