用天地图实现空间搜索浏览
This commit is contained in:
wlx
parent
910d890ba9
commit
c7a72f41f9
|
|
@ -3,10 +3,7 @@ $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->theme->AppendPlus($this,'tianditu');
|
||||
$this->nav[] = array('link'=>"/data/map",'title'=>'空间导航');
|
||||
?>
|
||||
<style type="text/css">
|
||||
|
|
@ -18,8 +15,8 @@ $this->nav[] = array('link'=>"/data/map",'title'=>'空间导航');
|
|||
<div class="row-fluid">
|
||||
<form class="form-search pull-right">
|
||||
<div class="input-append">
|
||||
<input type="text" class="span8 search-query" id="keyword">
|
||||
<button type="button" class="btn" onclick="mapmethods.action(map,1);">Search</button>
|
||||
<input type="text" class="span8 search-query" id="keyword" placeholder="关键词">
|
||||
<button type="button" class="btn" onclick="mapmethods.action(map,1);">搜索</button>
|
||||
</div>
|
||||
</form>
|
||||
<h4>将地图中范围调整至要搜索数据的范围，然后点击“搜索数据”按钮查看当前范围的所有数据</h4>
|
||||
|
|
@ -43,103 +40,59 @@ $this->nav[] = array('link'=>"/data/map",'title'=>'空间导航');
|
|||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" >
|
||||
$(function() {
|
||||
var bounds = null;
|
||||
var rect = null;
|
||||
var map,zoom=6,rectTool;
|
||||
var input = {east:'#east',west:'#west',north:'#north',south:'#south'};
|
||||
|
||||
});
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
//加载地图
|
||||
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) ){
|
||||
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);
|
||||
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{
|
||||
RemoveRectangle();
|
||||
|
||||
var position = new google.maps.LatLng(south,east);
|
||||
|
||||
var marker = new google.maps.Marker({
|
||||
position: position,
|
||||
map: map,
|
||||
});
|
||||
|
||||
markers.push(marker);
|
||||
}
|
||||
|
||||
|
||||
|
||||
var marker=new TMarker(new TLngLat(east,south));
|
||||
map.addOverLay(marker);
|
||||
map.centerAndZoom(new TLngLat(east,south),zoom);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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);
|
||||
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){
|
||||
|
|
|
|||
Loading…
Reference in New Issue