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

<?php
$this->headTitle($this->config->title->site);
$this->headTitle($this->config->title->data);
$this->headTitle("Extent Map Browse");
$this->headTitle()->setSeparator(' - ');
$this->theme->AppendPlus($this,'tianditu');
$this->nav[] = array('link'=>"/data/map",'title'=>'Extent Map Browse');
?>
<style type="text/css">
#data_canvas .well {background:#FFF;}
</style>
<div class="row-fluid">
	<?= $this->render('breadcrumbs.phtml'); ?>
    <?= $this->partial('data/tools.phtml'); ?>
    <div class="row-fluid">
    <form class="form-search pull-right">
        <div class="input-append">
        <input type="text" class="span8 search-query" id="keyword" placeholder="关键词">
        <button type="button" class="btn" onclick="mapmethods.action(map,1);">搜索</button>
        </div>
    </form>
    <h4>Zoom the map to an extent, then click "Search Data" to view the data that locate in the current map extent.</h4>
    </div>
    <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);">View data</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('');">Clear list</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 bounds = null;
var rect = null;
var map,zoom=6,rectTool;
var input = {east:'#east',west:'#west',north:'#north',south:'#south'};

//加载地图
var myLatlng = new TLngLat(100,38);
var config = { projection: "EPSG:4326"}
map = new TMap("map_canvas",config);
map.centerAndZoom(myLatlng,zoom);
map.enableHandleMouseScroll();
var config = {
          type:"TMAP_NAVIGATION_CONTROL_LARGE",   //缩放平移的显示类型
          anchor:"TMAP_ANCHOR_TOP_LEFT",          //缩放平移控件显示的位置
          offset:[0,0],                           //缩放平移控件的偏移值
          showZoomInfo:true                       //是否显示级别提示信息，true表示显示，false表示隐藏。
       };
//创建缩放平移控件对象
var control=new TNavigationControl(config);
//添加缩放平移控件
map.addControl(control);
control = new TMapTypeControl();
//将地图类型控件添加到地图上
map.addControl(control); 

function setRectangle(east,west,south,north){
	map.clearOverLays();
	if(east.toFixed(1) != west.toFixed(1) && south.toFixed(1)!= north.toFixed(1) ){
		var p1=new TLngLat(west,south);
		var p2=new TLngLat(west,north);
		var p3=new TLngLat(east,south);
		var p4=new TLngLat(east,north);
		map.setViewport(new Array(p1,p2,p3,p4));
		var bounds = new TBounds(west,south,east,north);
		var rect = new TRect(bounds);
		map.addOverLay(rect);
	}else{
		var marker=new TMarker(new TLngLat(east,south));
		map.addOverLay(marker);
		map.centerAndZoom(new TLngLat(east,south),zoom);
	}	
}
	
var mapmethods = {
	getbounds : function(map){
		bounds = map.getBounds();
		point1 = bounds.getNorthEast();
		point2 = bounds.getSouthWest();
		latlng = new Array();
		latlng['east'] = point1.getLng().toFixed(2);
		latlng['north'] = point1.getLat().toFixed(2);
		latlng['west'] = point2.getLng().toFixed(2);
		latlng['south'] = point2.getLat().toFixed(2);
		return latlng;
	},
	action : function(map,ajax){
		range = mapmethods.getbounds(map);
		$('#searchbtn').html("Search Data: (" + 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]);
		}

		q = $('#keyword').val();
		if( q != '')
		{
			data.push('opt[q]='+q);
		}
		
		post = data.join("&");
		
		$.ajax({
			'type':"POST",
			'url': '/service/mapsearch',
			'data': post,
			'success':function(data){
				if (typeof(data)=='object')
				{
					mapmethods.list(data);
				}
				else{ 
					alert('No data in current extent');
				}
			},
			'timeout': 15000,
			'error': function(){
				alert('Errors found!');
			},
			'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="View the extent of data"><i class="icon-eye-open"></i></a>'
					 + '<a class="btn" href="/data/'+data[i].uuid+'" title="View Data"><i class="icon-search"></i></a>'
					 + '</div>'
					 + '</li>';
			}
		}
		$('#data_canvas').html(html);
	}
}
</script>