修改空间浏览方式
This commit is contained in:
Li Jianxuan
parent
a9489cbe51
commit
36f914df7e
File diff suppressed because it is too large
Load Diff
|
|
@ -1,88 +1,202 @@
|
||||||
<?php
|
<?php
|
||||||
$this->headTitle($this->config->title->site);
|
$this->headTitle($this->config->title->site);
|
||||||
$this->headTitle($this->config->title->data);
|
$this->headTitle($this->config->title->data);
|
||||||
$this->headTitle("空间浏览");
|
$this->headTitle("空间浏览");
|
||||||
$this->headTitle()->setSeparator(' - ');
|
$this->headTitle()->setSeparator(' - ');
|
||||||
$this->headLink()->appendStylesheet('/css/metadata.css');
|
$this->theme->AppendPlus($this,'jquery_ui');
|
||||||
$this->headScript()->appendFile('http://maps.google.com/maps/api/js?sensor=false');
|
//$this->theme->AppendPlus($this,'google_map_v3');
|
||||||
$this->headScript()->appendFile('/js/OpenLayers.js');
|
$this->theme->AppendPlus($this,'colorbox');
|
||||||
$this->headLink()->appendStylesheet('/js/theme/default/style.css');
|
$this->headLink()->appendStylesheet('/js/theme/default/style.css');
|
||||||
$this->nav[] = array('link'=>"/data/map",'title'=>'空间导航');
|
$this->nav[] = array('link'=>"/data/map",'title'=>'空间导航');
|
||||||
?>
|
?>
|
||||||
<div class="row-fluid">
|
<style type="text/css">
|
||||||
<?= $this->render('breadcrumbs.phtml'); ?>
|
#data_canvas .well {background:#FFF;}
|
||||||
<?= $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>
|
</style>
|
||||||
<script type="text/javascript" >
|
<div class="row-fluid">
|
||||||
var map;
|
<?= $this->render('breadcrumbs.phtml'); ?>
|
||||||
|
<?= $this->partial('data/tools.phtml'); ?>
|
||||||
map = new OpenLayers.Map('map');
|
<h4>将地图中范围调整至要搜索数据的范围，然后点击“搜索数据”按钮查看当前范围的所有数据</h4>
|
||||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
<hr />
|
||||||
|
<div class="row-fluid">
|
||||||
var gphy = new OpenLayers.Layer.Google(
|
<div class="span6">
|
||||||
"Google Physical",
|
<div><button class="btn btn-large btn-block" type="button" id="searchbtn" onclick="mapmethods.action(map,1);">查看数据</button></div>
|
||||||
{type: google.maps.MapTypeId.TERRAIN}
|
<hr />
|
||||||
);
|
<div id="map_canvas" style="height:500px;">
|
||||||
var gmap = new OpenLayers.Layer.Google(
|
</div>
|
||||||
"Google Streets", // the default
|
</div>
|
||||||
{numZoomLevels: 20}
|
<div class="span6">
|
||||||
);
|
<div><button class="btn btn-large btn-block" type="button" onclick="$('#data_canvas').html('');">清除列表</button></div>
|
||||||
var ghyb = new OpenLayers.Layer.Google(
|
<hr />
|
||||||
"Google Hybrid",
|
<div class="well well-small" style="height:500px;overflow-y:scroll;">
|
||||||
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
|
<ul id="data_canvas" class="unstyled">
|
||||||
);
|
</ul>
|
||||||
var gsat = new OpenLayers.Layer.Google(
|
</div>
|
||||||
"Google Satellite",
|
</div>
|
||||||
{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
|
</div>
|
||||||
);
|
</div>
|
||||||
geojson_layer = new OpenLayers.Layer.Vector("Data Boundary", {
|
<script type="text/javascript" >
|
||||||
strategies: [new OpenLayers.Strategy.Fixed()],
|
$(function() {
|
||||||
protocol: new OpenLayers.Protocol.HTTP({
|
|
||||||
url: "/service/json<?php echo $this->params; ?>",
|
});
|
||||||
format: new OpenLayers.Format.GeoJSON()
|
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';
|
||||||
map.addLayers([gphy, gmap, ghyb, gsat,geojson_layer]);
|
document.body.appendChild(script);
|
||||||
|
}
|
||||||
// Google.v3 uses EPSG:900913 as projection, so we have to
|
|
||||||
// transform our coordinates
|
window.onload = loadScript;
|
||||||
map.setCenter(new OpenLayers.LonLat(102, 36).transform(
|
|
||||||
new OpenLayers.Projection("EPSG:4326"),
|
// Google Map Part
|
||||||
map.getProjectionObject()
|
var map = null;
|
||||||
), 5);
|
var mapElementID = "map_canvas";
|
||||||
|
var rectangle = null;
|
||||||
var sf = new OpenLayers.Control.SelectFeature(geojson_layer,{onSelect:onFeatureSelect,onUnselect:onFeatureUnselect});
|
var markers = [];
|
||||||
map.addControl(sf);
|
|
||||||
sf.activate();
|
function initialize() {
|
||||||
|
//加载地图
|
||||||
for (var i=map.layers.length-1; i>=0; --i) {
|
var myLatlng = new google.maps.LatLng(35.656456,105.819946);
|
||||||
map.layers[i].animationEnabled = this.checked;
|
var myOptions = {
|
||||||
};
|
zoom: 3,
|
||||||
|
center: myLatlng,
|
||||||
function onPopupClose(evt) {
|
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||||
selectControl.unselect(selectedFeature);
|
}
|
||||||
}
|
map = new google.maps.Map(document.getElementById(mapElementID), myOptions);
|
||||||
function onFeatureSelect(feature) {
|
|
||||||
selectedFeature = feature;
|
//methods.trigger('tilesloaded',map);
|
||||||
popup = new OpenLayers.Popup.FramedCloud("chicken",
|
mapmethods.trigger('dragend',map);
|
||||||
feature.geometry.getBounds().getCenterLonLat(),
|
mapmethods.trigger('zoom_changed',map);
|
||||||
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);
|
function RemoveRectangle(){
|
||||||
feature.popup = popup;
|
if(rectangle != null)
|
||||||
map.addPopup(popup);
|
{
|
||||||
}
|
rectangle.setMap(null);
|
||||||
function onFeatureUnselect(feature) {
|
rectangle = null;
|
||||||
map.removePopup(feature.popup);
|
}
|
||||||
feature.popup.destroy();
|
if (markers) {
|
||||||
feature.popup = null;
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
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');
|
||||||
|
|
||||||
|
data = new Array();
|
||||||
|
for(k in range)
|
||||||
|
{
|
||||||
|
data.push('opt['+k+']='+range[k]);
|
||||||
|
}
|
||||||
|
post = data.join("&");
|
||||||
|
|
||||||
|
$.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>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -17,4 +17,41 @@ class Metadata
|
||||||
$rs = $this->db->query($sql);
|
$rs = $this->db->query($sql);
|
||||||
return $rs->fetch();
|
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