用天地图实现高级搜索功能
This commit is contained in:
wlx
parent
c49cc92175
commit
fc2cb61d8e
|
|
@ -2,185 +2,116 @@
|
||||||
$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('高级搜索');
|
||||||
if (!empty($this->codename)) $this->headTitle($this->codename);
|
|
||||||
$this->headTitle()->setSeparator(' - ');
|
$this->headTitle()->setSeparator(' - ');
|
||||||
$this->headLink()->appendStylesheet('/css/metadata.css');
|
|
||||||
$this->breadcrumb('<a href="/">首页</a>');
|
$this->breadcrumb('<a href="/">首页</a>');
|
||||||
$this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
|
$this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
|
||||||
$this->breadcrumb('高级搜索');
|
$this->breadcrumb('高级搜索');
|
||||||
$this->breadcrumb()->setSeparator(' > ');
|
$this->breadcrumb()->setSeparator(' > ');
|
||||||
$this->theme->AppendPlus($this,'google_map_v3');
|
$this->theme->AppendPlus($this,'tianditu');
|
||||||
$this->theme->AppendPlus($this,'google_map_keydragzone');
|
|
||||||
$this->theme->AppendPlus($this,'jquery_ui');
|
$this->theme->AppendPlus($this,'jquery_ui');
|
||||||
$this->theme->AppendPlus($this,'colorbox');
|
|
||||||
?>
|
?>
|
||||||
<div>
|
<div>
|
||||||
<?= $this->partial('data/tools.phtml'); ?>
|
<?= $this->partial('data/tools.phtml'); ?>
|
||||||
</div>
|
</div>
|
||||||
<?php if (!empty($this->metadata)) :
|
|
||||||
echo $this->page->getNavigation();?>
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<?php
|
|
||||||
foreach($this->metadata as $md) : ?>
|
|
||||||
<div class="mditem">
|
|
||||||
<div class="thumb"><img src="/service/thumb/id/<?php echo $md['id'];?>" /></div>
|
|
||||||
<h2><a href="/data/<?php echo $md['uuid'];?>"><?php echo $this->escape($md['title']);?></a>
|
|
||||||
</h2>
|
|
||||||
<span><?php echo mb_strlen($md['description'])>400?$this->escape(mb_substr($md['description'],0,400,'UTF-8').'...'):$this->escape($md['description']);?></span>
|
|
||||||
</div>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
<?php echo $this->page->getNavigation();?>
|
|
||||||
<?php else: ?>
|
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span8" id="map_canvas" style="height:500px;"></div>
|
<div class="span8" id="map_canvas" style="height:500px;"></div>
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<form id="search" enctype="application/x-www-form-urlencoded" action="/search" method="get">
|
<form id="search" enctype="application/x-www-form-urlencoded" action="/search" method="get">
|
||||||
<fieldset><legend>时间范围</legend>
|
<fieldset><legend>时间范围</legend>
|
||||||
<label>
|
<label>开始时间<input name="begin" type="text" id="begin" value="<?php echo $this->begin; ?>"/></label>
|
||||||
开始时间
|
<label>结束时间<input name="end" type="text" id="end" value="<?php echo $this->end; ?>" /></label>
|
||||||
<input name="begin" type="text" id="begin" value="<?php echo $this->begin; ?>"/>
|
</fieldset>
|
||||||
</label>
|
<fieldset><legend>空间范围</legend>
|
||||||
<label>
|
<label>东<input name="east" id="east" type="text" value="<?php echo $this->east; ?>"/></label>
|
||||||
结束时间
|
<label>南<input name="south" id="south" type="text" value="<?php echo $this->south; ?>" /></label>
|
||||||
<input name="end" type="text" id="end" value="<?php echo $this->end; ?>" />
|
<label>西<input name="west" id="west" type="text" value="<?php echo $this->west; ?>" /></label>
|
||||||
</label>
|
<label>北<input name="north" id="north" type="text" value="<?php echo $this->north; ?>" /></label>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset><legend>空间范围(按住shift键，在地图上拉框)</legend>
|
<label>关键词<input name="q" id="q" type="text" value="<?php echo $this->q; ?>"/></label>
|
||||||
<label>东
|
<button id="search" class="btn btn-large btn-block btn-primary" type="submit" value="" onclick="dosubmit()" ><i class="icon-search"></i>搜索</button>
|
||||||
<input name="east" id="east" type="text" value="<?php echo $this->east; ?>"/></label>
|
</form>
|
||||||
<label>南
|
</div>
|
||||||
<input name="south" id="south" type="text" value="<?php echo $this->south; ?>" /></label>
|
|
||||||
<label>西
|
|
||||||
<input name="west" id="west" type="text" value="<?php echo $this->west; ?>" /></label>
|
|
||||||
<label>北
|
|
||||||
<input name="north" id="north" type="text" value="<?php echo $this->north; ?>" /></label>
|
|
||||||
</fieldset>
|
|
||||||
<label>关键词
|
|
||||||
<input name="q" id="q" type="text" value="<?php echo $this->q; ?>"/></label>
|
|
||||||
<button id="search" class="btn btn-large btn-block btn-primary" type="submit" value="" onclick="dosubmit()" ><i class="icon-search"></i>搜索</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$(function() {
|
$(function() {
|
||||||
//Google map (不启用预先加载)
|
//jquery ui datepicker
|
||||||
google.maps.event.addDomListener(window, 'load', initialize);
|
$("#begin").datepicker({dateFormat:"yy-mm-dd"});
|
||||||
//jquery ui datepicker
|
$("#end").datepicker({dateFormat:"yy-mm-dd"});
|
||||||
$("#begin").datepicker({dateFormat:"yy-mm-dd"});
|
|
||||||
$("#end").datepicker({dateFormat:"yy-mm-dd"});
|
|
||||||
});
|
});
|
||||||
// Google Map Part
|
|
||||||
var map = null;
|
|
||||||
var mapElementID = "map_canvas";
|
|
||||||
var bounds = null;
|
var bounds = null;
|
||||||
var rectangle = null;
|
var rect = null;
|
||||||
|
var map,zoom=10,rectTool;
|
||||||
|
var rectangle;
|
||||||
var input = {east:'#east',west:'#west',north:'#north',south:'#south'};
|
var input = {east:'#east',west:'#west',north:'#north',south:'#south'};
|
||||||
|
|
||||||
function initialize() {
|
//加载地图
|
||||||
//加载地图
|
var myLatlng = new TLngLat(105.819946,35.656456);
|
||||||
var myLatlng = new google.maps.LatLng(35.656456,105.819946);
|
map = new TMap("map_canvas");
|
||||||
var myOptions = {
|
map.centerAndZoom(myLatlng,zoom);
|
||||||
zoom: 3,
|
map.enableHandleMouseScroll();
|
||||||
center: myLatlng,
|
var config = {
|
||||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
type:"TMAP_NAVIGATION_CONTROL_LARGE", //缩放平移的显示类型
|
||||||
}
|
anchor:"TMAP_ANCHOR_TOP_LEFT", //缩放平移控件显示的位置
|
||||||
map = new google.maps.Map(document.getElementById(mapElementID), myOptions);
|
offset:[0,0], //缩放平移控件的偏移值
|
||||||
|
showZoomInfo:true //是否显示级别提示信息，true表示显示，false表示隐藏。
|
||||||
|
};
|
||||||
|
//创建缩放平移控件对象
|
||||||
|
var control=new TNavigationControl(config);
|
||||||
|
//添加缩放平移控件
|
||||||
|
map.addControl(control);
|
||||||
|
control = new TMapTypeControl();
|
||||||
|
//将地图类型控件添加到地图上
|
||||||
|
map.addControl(control);
|
||||||
|
|
||||||
//Keydragzone
|
var config = {
|
||||||
map.enableKeyDragZoom({
|
strokeColor:"#000000", //折线颜色
|
||||||
key: "shift",
|
fillColor:"#FFFFFF", //填充颜色。当参数为空时，折线覆盖物将没有填充效果
|
||||||
boxStyle: {
|
strokeWeight:"2px", //折线的宽度，以像素为单位
|
||||||
border: "1px dashed black",
|
opacity:0.5, //折线的透明度，取值范围0 - 1
|
||||||
backgroundColor: "transparent",
|
strokeStyle:"dashed" //折线的样式，solid或dashed
|
||||||
opacity: 1.0
|
};
|
||||||
},
|
//创建矩形工具对象
|
||||||
veilStyle: {
|
rectTool = new TRectTool(map,config);
|
||||||
backgroundColor: "white",
|
//注册矩形工具绘制完成后的事件
|
||||||
opacity: 0.35,
|
TEvent.addListener(rectTool,"draw",onDrawRect);
|
||||||
cursor: "crosshair"
|
rectTool.open();
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
var dz = map.getDragZoomObject();
|
function onDrawRect(bounds)
|
||||||
google.maps.event.addListener(dz, 'dragstart', function (latlng) {
|
{
|
||||||
RemoveRectangle();
|
map.clearOverLays();
|
||||||
//console.dir(latlng);
|
rect = new TRect(bounds);
|
||||||
});
|
$(input.east).val(bounds.getNorthEast().getLng());
|
||||||
google.maps.event.addListener(dz, 'dragend', function (latlng) {
|
$(input.north).val(bounds.getNorthEast().getLat());
|
||||||
console.log(latlng);
|
$(input.west).val(bounds.getSouthWest().getLng());
|
||||||
MapValueChange(latlng.fa.d,latlng.$.d,latlng.fa.b,latlng.$.b);
|
$(input.south).val(bounds.getSouthWest().getLat());
|
||||||
setRectangle(latlng.fa.d,latlng.fa.b,latlng.$.b,latlng.$.d);
|
map.addOverLay(rect);
|
||||||
//console.dir(latlng);
|
//关闭矩形工具体
|
||||||
});
|
//rectTool.close();
|
||||||
|
|
||||||
InputValueChange();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function setRectangle(east,west,south,north){
|
|
||||||
|
|
||||||
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: true
|
|
||||||
});
|
|
||||||
|
|
||||||
rectangle.setMap(map);
|
|
||||||
|
|
||||||
google.maps.event.addListener(rectangle, 'bounds_changed', function () {
|
|
||||||
var latlng = rectangle.getBounds();
|
|
||||||
MapValueChange(latlng.fa.d,latlng.Z.d,latlng.fa.b,latlng.Z.b);
|
|
||||||
//console.dir(latlng);
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function RemoveRectangle(){
|
|
||||||
if(rectangle != null)
|
|
||||||
{
|
|
||||||
rectangle.setMap(null);
|
|
||||||
rectangle = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function MapValueChange(east,north,west,south){
|
|
||||||
$(input.east).val(east);
|
|
||||||
$(input.north).val(north);
|
|
||||||
$(input.west).val(west);
|
|
||||||
$(input.south).val(south);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function InputValueChange(){
|
function InputValueChange(){
|
||||||
if(MapInputValueCheck() == true)
|
if(MapInputValueCheck() == true)
|
||||||
{
|
{
|
||||||
if(rectangle == null)
|
map.clearOverLays();
|
||||||
{
|
rect = new TRect(new TBounds($(input.west).val(),$(input.south).val(),$(input.east).val(),$(input.north).val()));
|
||||||
setRectangle($(input.east).val(),$(input.west).val(),$(input.south).val(),$(input.north).val());
|
map.addOverLay(rect);
|
||||||
}else{
|
var p1=new TLngLat($(input.west).val(),$(input.south).val());
|
||||||
var reSetBounds = new google.maps.LatLngBounds(
|
var p2=new TLngLat($(input.west).val(),$(input.north).val());
|
||||||
new google.maps.LatLng($(input.south).val(),$(input.west).val()),
|
var p3=new TLngLat($(input.east).val(),$(input.north).val());
|
||||||
new google.maps.LatLng($(input.north).val(),$(input.east).val())
|
var p4=new TLngLat($(input.east).val(),$(input.south).val());
|
||||||
);
|
map.setViewport(new Array(p1,p2,p3,p4));
|
||||||
rectangle.setBounds(reSetBounds);
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function MapInputValueCheck()
|
function MapInputValueCheck()
|
||||||
{
|
{
|
||||||
if($(input.east).val() != "" && $(input.west).val() != "" && $(input.north).val() != "" && $(input.south).val() != "")
|
if($(input.east).val() != "" && $(input.west).val() != "" && $(input.north).val() != "" && $(input.south).val() != "")
|
||||||
{
|
{
|
||||||
return true;
|
return true;
|
||||||
}else{
|
}else{
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$(input.east).bind('blur',InputValueChange);
|
$(input.east).bind('blur',InputValueChange);
|
||||||
|
|
@ -188,25 +119,7 @@ $(input.west).bind('blur',InputValueChange);
|
||||||
$(input.north).bind('blur',InputValueChange);
|
$(input.north).bind('blur',InputValueChange);
|
||||||
$(input.south).bind('blur',InputValueChange);
|
$(input.south).bind('blur',InputValueChange);
|
||||||
|
|
||||||
// Google map Part --End
|
|
||||||
|
|
||||||
|
|
||||||
function Alert(content){
|
|
||||||
$.colorbox({innerWidth:'40%',html:'<div style="line-height:30px;font-size:16px;">'+ content +'</div>'});
|
|
||||||
}
|
|
||||||
|
|
||||||
function dosubmit() {
|
function dosubmit() {
|
||||||
theForm.action="/search";
|
theForm.action="/search";
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<div id="help">
|
|
||||||
<fieldset><legend>搜索说明</legend><ul><li>关键词：您可以使用一个关键词，比如“沙漠”，也可以使用多个关键词，中间用空格分开。</li>
|
|
||||||
<li>空间范围：这是以度为单位的十进制数字。比如，东经125度30分，可以输入为125.5。您也可以通过下面的在线地图工具直接在图上拉框选择一个范围，空间坐标会自动转换到文本框中。</li>
|
|
||||||
<li>时间范围：指数据的时间范围，从开始时间到结束时间。开始时间与结束时间可以为空，若仅填写开始时间，则含义为选择大于开始时间的数据。若仅填写结束时间，则含义为选择小于结束时间的数据。时间格式为YYYY-MM-DD。</li>
|
|
||||||
<li>还不清楚？您可以到<a href="http://forum.westgis.ac.cn/viewforum.php?f=30">论坛</a>提问。</li>
|
|
||||||
</ul></fieldset>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<?php endif; ?>
|
|
||||||
Loading…
Reference in New Issue