2011-01-19 10:50

4735人阅读

(11)

    说到实时监控,我们不能不承认Openlayers功能的确非常强大。Openlayers中通过很多方式都能实现实时监控。我讲讲我的实现方式。

      我的方式很简单：页面发起异步请求;服务端程序将请求结果处理成GeoJSON串回传至请求页面;请求页面通过OpenLayers提供的OpenLayers.Format.GeoJSON解析GeoJSON串，将结果展现到地图上。

 

      下面的示例显示:实时获得油机的位置数据,展示到页面上。

 

页面程序: 

1. //初始地图   
2. function init(){  
3.     ......  
4.     vectors = new OpenLayers.Layer.Vector(...);  
5.     geojson = new OpenLayers.Format.GeoJSON();  
6.     map.addLayer(vectors);  
7. }  
8. //通过DWR异步取得GeoJSon串,交由OpenLayers.Format.GeoJSON来处理.   
9. function locorie(){  
10.     //异步发出请求   
11.     dwrService.orie(orieSeri,function(data){  
12.         //通过OpenLayers.Format.GeoJSON处理服务端提供的GenJSon串   
13.         var features = geojson.read(data,"FeatureCollection");  
14.         if(features) {  
15.             //将结果展示到地图上   
16.             vectors.addFeatures(features);  
17.         }  
18.     });  
19. }  
20. //十秒更新一次数据   
21. function startOrie(){  
22.     var t=setTimeout("locorie();startOrie();",10000);  
23. }  

//初始地图 function init(){ ...... vectors = new OpenLayers.Layer.Vector(...); geojson = new OpenLayers.Format.GeoJSON(); map.addLayer(vectors); } //通过DWR异步取得GeoJSon串,交由OpenLayers.Format.GeoJSON来处理. function locorie(){ //异步发出请求 dwrService.orie(orieSeri,function(data){ //通过OpenLayers.Format.GeoJSON处理服务端提供的GenJSon串 var features = geojson.read(data,"FeatureCollection"); if(features) { //将结果展示到地图上 vectors.addFeatures(features); } }); } //十秒更新一次数据 function startOrie(){ var t=setTimeout("locorie();startOrie();",10000); }

 

 

 

 服务端程序:

 

 

1. public String[] orie(String orieSeri) {  
2.     String orieStr = "";  
3.     boolean state = true;  
4.     if (null == orieStr || "".equals(orieSeri)) {  
5.         state = false;  
6.     }  
7.     int dataSeri = Integer.parseInt(orieSeri);  
8.     List<Location> list = null;  
9.     if (state) {  
10.         // 获得dataSeri之后的位置数据 Location.getDataSeri >= dataSeri   
11.         list = locDao.findLocByFlow(dataSeri);  
12.     }  
13.     if (state && (list == null || list.size() == 0)) {  
14.         // 没有数据   
15.         state = false;  
16.     }  
17.     if (state&&(list.size() == 1 && dataSeri == list.get(0).getDataSeri()  
18.                     .intValue())) {  
19.         // 没有新的数据   
20.         state = false;  
21.     }  
22.       
23.     if (state) {  
24.         LineString line = new LineString();  
25.         StringBuffer geo = new StringBuffer();  
26.         Point pointEnd = new Point();  
27.         Feature feaPoint = new Feature(pointEnd);  
28.         Map<String, String> propoint = new HashMap<String, String>();  
29.         feaPoint.setProperties(propoint);  
30.         for (int i = 0; i < list.size(); i++) {  
31.             geo.append("[" + list.get(i).getCurLoc() + "]");  
32.             if (i != (list.size() - 1)) {  
33.                 geo.append(",");  
34.             }  
35.         }  
36.         line.setLine(geo.toString());  
37.         Feature feaLine = new Feature(line);  
38.         Map<String, String> properties = new HashMap<String, String>();  
39.         properties.put("color", "#1A60CA");  
40.         feaLine.setProperties(properties);  
41.         List<Component> components = new ArrayList<Component>();  
42.         components.add(feaLine);  
43.         components.add(feaPoint);  
44.         FeatureCollection feaCol = new FeatureCollection(components);  
45.         orieStr = feaCol.draw();  
46.     }  
47. }  

public String[] orie(String orieSeri) { String orieStr = ""; boolean state = true; if (null == orieStr || "".equals(orieSeri)) { state = false; } int dataSeri = Integer.parseInt(orieSeri); List<Location> list = null; if (state) { // 获得dataSeri之后的位置数据 Location.getDataSeri >= dataSeri list = locDao.findLocByFlow(dataSeri); } if (state && (list == null || list.size() == 0)) { // 没有数据 state = false; } if (state&&(list.size() == 1 && dataSeri == list.get(0).getDataSeri() .intValue())) { // 没有新的数据 state = false; } if (state) { LineString line = new LineString(); StringBuffer geo = new StringBuffer(); Point pointEnd = new Point(); Feature feaPoint = new Feature(pointEnd); Map<String, String> propoint = new HashMap<String, String>(); feaPoint.setProperties(propoint); for (int i = 0; i < list.size(); i++) { geo.append("[" + list.get(i).getCurLoc() + "]"); if (i != (list.size() - 1)) { geo.append(","); } } line.setLine(geo.toString()); Feature feaLine = new Feature(line); Map<String, String> properties = new HashMap<String, String>(); properties.put("color", "#1A60CA"); feaLine.setProperties(properties); List<Component> components = new ArrayList<Component>(); components.add(feaLine); components.add(feaPoint); FeatureCollection feaCol = new FeatureCollection(components); orieStr = feaCol.draw(); } }

 

 

 

 

 服务器端提供的数据格式如下:

 

 

1. //一条线   
2. {  
3. "type":"FeatureCollection",  
4. "features":[{  
5. "type":"Feature",  
6. "geometry":{  
7. "type":"LineString",  
8. "coordinates":[[42.895131111145, 22.148587703705],[43.895131111145, 23.148587703705]]}}]  
9. }  

//一条线 { "type":"FeatureCollection", "features":[{ "type":"Feature", "geometry":{ "type":"LineString", "coordinates":[[42.895131111145, 22.148587703705],[43.895131111145, 23.148587703705]]}}] }  

 

 

 

 

 服务器端生成json串，我用装饰者模式写了一个模块，只要调用这个模块的API就会生成需要的Json串。