OpenLayers加載實時路況信息

OpenLayers官方QQ群
                              群號 259159743     259159561

 

實時路況信息對於我們來說還是比較重要的，
當然實時路況的發布是需要條件的，我們可以調用別人已經發布好的實時路況
這里以北京實時路況為例，僅作學習 交流之用。請勿商用。。。。否則責任自負！

1.首先我們要有路況發布的服務。可以是瓦片形式的，也可以是wms或其他形式的服務
2.要得到當前路況的時間。
3.疊加到地圖之上
4.實時刷新路況圖層，這個要用到ajax

下面直接上代碼
同樣
一 、我們在lib\OpenLayers\Layer目錄下面新建一共LTTrafficLayer2.js

新建一共OpenLayers.Layer.LTTrafficLayer2.js類繼承自OpenLayers.Layer.TileCache  ，重新定義getURL方法
並添加獲取獲取實時路況時間戳的方法

 

/**
* 對自定義規則切割的圖片進行拼裝的類
*/
OpenLayers.Layer.LTTrafficLayer2 = OpenLayers.Class(OpenLayers.Layer.TileCache, {
/*獲取圖片的地址的定時器*/
timer : null,
mapMaxExtent: null,
initialize: function (name, url, options) {
var tempoptions = OpenLayers.Util.extend({
'format': 'image/png',
isBaseLayer: true
}, options);
OpenLayers.Layer.TileCache.prototype.initialize.apply(this, [name, url, {},
tempoptions]);
this.numZoomLevels = 6;
this.maxResolution = 152.87405654296875;
this.realtimeurl = url;
this.transitionEffect = null;
},
destroy : function() {
OpenLayers.Layer.TileCache.prototype.destroy.apply(this,arguments);
this.destroyTimer();
},

refresh: function () {
if (this.visibility) {
this.clearGrid();
this.redraw();

}
},
createTimer : function() {
function time() {//獲取圖片路徑與時間戳
OpenLayers.loadURL('http://eye.bjjtw.gov.cn/Web-T_bjjt_new/query.do', {
serviceType : 'traffic',
acode : '110000',
cls : 1,
type : 0,
timestamp : Math.random()
}, this, this.success, this.failure);
}
var _time = OpenLayers.Function.bind(time, this);
_time();
this.timer = window.setInterval(_time, 60 * 1000);

},

destroyTimer : function(){
if (this.timer) {
window.clearInterval(this.timer);
this.timer = null;
}
},

success : function(resp){
var txt = resp.responseText;
if (txt === '') {
return;
}

resp = eval('(' + txt + ')');
if (resp) {
var time = resp.sTime+"";
var times=time.substring(8,10) + ":" + time.substring(10,12);
if(this.visibility){
$('traffictime').innerHTML = times;
if($('traffictime').timestmp&&$('traffictime').timestmp!=times){
$('traffictime').timestmp = times;
this.refresh();

}
if(!$('traffictime').timestmp){
$('traffictime').timestmp = times;
this.refresh();
}
}
}
},
failure : function(resp) {

},

/**
* 按地圖引擎切圖規則實現的拼接方式
*/
getURL: function (bounds) {
var res = this.map.getResolution();
var bbox = this.map.getMaxExtent();
var size = this.tileSize;
//計算列號 
var tileX = Math.round((bounds.left - bbox.left) / (res * size.w));
//計算行號
var tileY = Math.round((bbox.top - bounds.top) / (res * size.h));
//當前的等級 
var tileZ = this.map.zoom;
if (tileX < 0) tileX = tileX + Math.round(bbox.getWidth() / bounds.getWidth());
if (tileY < 0) tileY = tileY + Math.round(bbox.getHeight() / bounds.getHeight());
return this.getTilePic(tileX, tileY, tileZ);
},

clone: function (obj) {

if (obj == null) {
obj = new OpenLayers.Layer.LTTrafficLayer2(this.name, this.url, this.options);
}
obj = OpenLayers.Layer.LTTrafficLayer2.prototype.clone.apply(this, [obj]);
return obj;
},
//請求加隨機數，解決ie6下圖片緩存不更新問題
getTilePic: function (tileX, tileY, tileZ) {
var dir = '';
if (tileZ > 6) {
var delta = Math.pow(2, tileZ - 5);
var rowDir = 'R' + Math.floor(tileY / delta);
var colDir = 'C' + Math.floor(tileX / delta);
dir = tileZ + "/" + rowDir + "/" + colDir + "/";
} else {
dir = tileZ + '/';
}

var tileNo = tileZ + "-" + tileX + "-" + tileY;
var sUrl = this.url + dir + tileNo + '.png?r=';
var d = Math.random();
sUrl += d;
//alert(sUrl);
return sUrl;
},
CLASS_NAME: "OpenLayers.Layer.LTTrafficLayer2"
});

二、在lib文件夾下的OpenLayers.js 中加載js文件的函數中添加"OpenLayers/Layer/LTTrafficLayer2.js"   
三、新建一個html頁面
添加觸發實時路況的checkbox的函數onDispTraffic
function onDispTraffic(obj)
   {
       if(trafficLayer.visibility){
     trafficLayer.setVisibility(false);
     trafficLayer.destroyTimer();
     
     $('traffictime').innerHTML="";
     if($('showTraCheck').checked)
      $('showTraCheck').checked = false;   
      }else{
     trafficLayer.setVisibility(true);
     trafficLayer.createTimer();
     
     
     
     }
   
   }


四、在map容器中添加實時路況控制的div層
<div style="position:absolute; right:5px; top:5px; color:#000; z-index:1000;">
   
              <input type="checkbox"  id="showTraCheck"  /><span id="spantra"><font style="font-weight:bold;color:#000000">顯示實時路況</font></span>
     <font  class="traffictext" id="traffictime" ></font>
     </div>
整體代碼如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<meta name="apple-mobile-web-app-capable" content="yes">

<title>OpenLayers TileCache Example</title>

<link rel="stylesheet" href="img/style.css" type="text/css">
<script src="lib/OpenLayers.js"></script>

<script type="text/javascript">
var map, layer,marker;
var layerOptions=null;
var trafficLayer;
OpenLayers.INCHES_PER_UNIT["千米"] = OpenLayers.INCHES_PER_UNIT["km"]; 
OpenLayers.INCHES_PER_UNIT["米"] = OpenLayers.INCHES_PER_UNIT["m"]; 
OpenLayers.INCHES_PER_UNIT["英里"] = OpenLayers.INCHES_PER_UNIT["mi"]; 
OpenLayers.INCHES_PER_UNIT["英寸"] = OpenLayers.INCHES_PER_UNIT["ft"]; 
function init(){

map = new OpenLayers.Map( $('map'), {

controls: [],
maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),
maxResolution:156543.03125,
numZoomLevels:19,
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units:'m'

});
var mapabc = new OpenLayers.Layer.MapABC(
"Mapabc",
["http://emap0.is.autonavi.com/appmaptile?","http://emap1.is.autonavi.com/appmaptile?","http://emap2.is.autonavi.com/appmaptile?","http://emap3.is.autonavi.com/appmaptile?"],
layerOptions
);
trafficLayer=new OpenLayers.Layer.LTTrafficLayer2("實時路況",
"http://219.232.196.52:8081/",
{isBaseLayer: false,visibility:false}
);
map.addLayers([mapabc,trafficLayer]); 
map.addControl( new OpenLayers.Control.ScaleLine({
topOutUnits:"千米",
topInUnits:"米",
bottomOutUnits:"英里",
bottomInUnits:"英寸" 
//如果底部單位為空 則不顯示比例尺下部分
}));
map.addControl(new OpenLayers.Control.PanZoomBar({'zoomWorldIcon':true}));
map.addControl( new OpenLayers.Control.KeyboardDefaults());
map.setCenter(new OpenLayers.LonLat(116.397128, 39.916527).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 11
); 

$('showTraCheck').checked = false;
}
OpenLayers.Util.onImageLoadErrorColor = "transparent";
//OpenLayers.Util.onImageLoadErrorColor = "pink"



function onDispTraffic(obj)
{
if(trafficLayer.visibility){
trafficLayer.setVisibility(false);
trafficLayer.destroyTimer();

$('traffictime').innerHTML="";
if($('showTraCheck').checked)
$('showTraCheck').checked = false; 
}else{
trafficLayer.setVisibility(true); 
trafficLayer.createTimer();

}

}

</script>
<body onload="init()">





<div id="map" style="position:relative;width: 100%;height: 100%;border: 1px solid #ccc;">
<div style="position:absolute; right:5px; top:5px; color:#000; z-index:1000;">

<input type="checkbox" id="showTraCheck" onclick="onDispTraffic(this);" /><span id="spantra"><font style="font-weight:bold;color:#000000">顯示實時路況</font></span>
<font class="traffictext" id="traffictime" ></font>
</div>
</div>
</body>

</html>

效果如下

 

更多信息 請關注openlayers中文官方站  http://www.openlayers.cn