GeoJson+Openlayers展现后台服务提供的单点、多点的元素信息,并依据条件变化元素如元素色彩、图标

【目标1】通过Openlayers展现后台服务提供的一个点的元素信息。

 
 
【步骤】a.地图服务、b.后台查询点经纬度、c.后台拼写JSON串服务、d.Ajax异步获取JSON串、e.页面展现
 
 a.地图服务:依据个人地图服务而定,这里不累述。
 
 b.后台查询点经纬度:后台查询数据库,获取点的经纬度[125.37673830988,43.858870032345],这里不累述。
 
 c.后台拼写JSON串服务:通过http://download.csdn.net/source/2991502下载拼写JSON的Jar包,拼写JSON串方法如下:
  1.          /** 
  2.  * 添加一个点 
  3.  * @return 
  4.  */  
  5. public String getPoints() {  
  6.     Point g1 = new Point();  
  7.     g1.setPoint("[125.37673830988,43.858870032345]");  
  8.     Feature feature = new Feature(g1);  
  9.     FeatureCollection c = new FeatureCollection(feature);  
  10.     System.out.println(c.draw());  
  11.     return c.draw();  
  12. }  

输出c.draw()如下:
  1. {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[125.37673830988,43.858870032345]}}]}  

d.Ajax异步获取JSON串:页面展现中,通过ajax异步获取后台提供的JSON串,这里不累述。
 
e.页面展现
  1. "text/javascript">  
  2. var map,vectors_map,vector_point,geojson;  
  3. function init(){  
  4.  //创建地图  
  5.  map = ......;  
  6.  vectors_map = new OpenLayers.Layer.WMS(  
  7.   ......  
  8.  );  
  9.  //创建一个点图层,用来展现我们从后台获取的点信息  
  10.  vector_point = new OpenLayers.Layer.Vector();  
  11.  //将地图图层和点图层加载到Map  
  12.  map.addLayers([vectors_map,vector_point]);  
  13.  //创建GeoJSON类对象,用于解析JSON串  
  14.  geojson = new OpenLayers.Format.GeoJSON();  
  15.  map.setCenter(new OpenLayers.LonLat(125.30593872070312, 43.87017822557581),5);  
  16. }  
  17. //1.这里定义的jsons应该是通过ajax从后台获取的  
  18. var jsons = {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[124.82786, 45.1371017]}}]};  
  19. //2.通过后台获取json串后,调用addJson()方法后,就可以将点展现到页面。  
  20. function addJson(){  
  21.    vector_point.addFeatures(geojson.read(jsons));  
  22. }  

【效果】
 
 
 
【目标2】通过Openlayers展现后台服务提供的多个点的元素信息。
 
【步骤】基本和单点一样,不同之处在{拼写JSON串}
 
c.拼写JSON串。通过http://download.csdn.net/source/2991502下载拼写JSON的Jar包,拼写JSON串方法如下:  
  1.         /** 
  2.  * 添加两个点 
  3.  *  
  4.  * @return 
  5.  */  
  6. public String getPoints() {  
  7.     Point g1 = new Point();  
  8.     g1.setPoint("[124.70169067383,43.859191897451]");  
  9.     Feature feature = new Feature(g1);  
  10.     Point g2 = new Point();  
  11.     g2.setPoint("[125.37673830988,43.858870032345]");  
  12.     Feature feature2 = new Feature(g2);  
  13.   
  14.     List components = new ArrayList(2);  
  15.     components.add(feature2);  
  16.     components.add(feature);  
  17.   
  18.     FeatureCollection c = new FeatureCollection(components);  
  19.     System.out.println(c.draw());  
  20.     return c.draw();  
  21. }  
   
输出c.draw()如下:
  1. {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[125.37673830988,43.858870032345]}},{"type":"Feature","geometry":{"type":"Point","coordinates":[124.70169067383,43.859191897451]}}]}  
 
【效果】 
 
 
 
【目标】:通过Openlayers展现后台服务提供的多个点的元素信息,并且根据状态改变成不同的图片信息。
 
【步骤】基本和多点一样,不同之处在{拼写JSON串}和{页面展现}
 
c.拼写JSON串。
  1.          /** 
  2.  * 添加两个点 
  3.  *  
  4.  * @return 
  5.  */  
  6. public String getPoints() {  
  7.     Point g1 = new Point();  
  8.     g1.setPoint("[124.70169067383,43.859191897451 ]");  
  9.     Feature feature = new Feature(g1);  
  10.     Map properties = new HashMap();  
  11.     properties.put("image", "red.png");// 这里提供了点将使用的图片,自己可以随便定义  
  12.     feature.setProperties(properties);  
  13.   
  14.     Point g2 = new Point();  
  15.     g2.setPoint("[125.37673830988,43.858870032345 ]");  
  16.     Feature feature2 = new Feature(g2);  
  17.     Map properties2 = new HashMap();  
  18.     properties2.put("image", "yell.png");// 这里提供了点将使用的图片,自己可以随便定义  
  19.     feature2.setProperties(properties2);  
  20.   
  21.     List components = new ArrayList(2);  
  22.     components.add(feature);  
  23.     components.add(feature2);  
  24.   
  25.     FeatureCollection c = new FeatureCollection(components);  
  26.     System.out.println(c.draw());  
  27.     return c.draw();  
  28. }  

输出c.draw()如下:
  1. {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"image":"red.png"},"geometry":{"type":"Point","coordinates":[124.70169067383,43.859191897451 ]}},{"type":"Feature","properties":{"image":"yell.png"},"geometry":{"type":"Point","coordinates":[125.37673830988,43.858870032345 ]}}]}  

e.页面展现
  1. "text/javascript">  
  2. var map,vectors_map,vector_point,geojson;  
  3. function init(){  
  4.  //创建地图  
  5.  map = ......;  
  6.  vectors_map = new OpenLayers.Layer.WMS(  
  7.   ......  
  8.  );  
  9.    
  10. //新增部分,将对vector_point这个图层定义一个样式,不使用默认样式  
  11.  var styleMap = new OpenLayers.StyleMap({  
  12.       "default": {  
  13.             fillOpacity: 1,  
  14.             strokeOpacity:1,  
  15.             strokeColor: "#000000",  
  16.             graphicWidth:30,  
  17.             graphicHeight:50,  
  18.             externalGraphic: "${image}"  
  19.          }  
  20.  });  
  21.  vector_point = new OpenLayers.Layer.Vector("Simple Geometry", {  
  22.       styleMap: styleMap,  
  23.       rendererOptions: {zIndexing: true}  
  24.  });  
  25.    
  26.  //创建一个点图层,用来展现我们从后台获取的点信息  
  27.  //屏蔽这句话vector_point = new OpenLayers.Layer.Vector();  
  28.  //将地图图层和点图层加载到Map  
  29.  map.addLayers([vectors_map,vector_point]);  
  30.  //创建GeoJSON类对象,用于解析JSON串  
  31.  geojson = new OpenLayers.Format.GeoJSON();  
  32.  map.setCenter(new OpenLayers.LonLat(125.30593872070312, 43.87017822557581),5);  
  33. }  
  34. //1.这里定义的jsons应该是通过ajax从后台获取的  
  35. var jsons = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"image":"red.png"},"geometry":{"type":"Point","coordinates":[124.70169067383,43.859191897451 ]}},{"type":"Feature","properties":{"image":"yell.png"},"geometry":{"type":"Point","coordinates":[125.37673830988,43.858870032345 ]}}]};  
  36. //2.通过后台获取json串后,调用addJson()方法后,就可以将点展现到页面。  
  37. function addJson(){  
  38.    vector_point.addFeatures(geojson.read(jsons));  
  39. }  

 
【效果C】
 
 
【注意】如果你的程序没有出来效果,检查两个地方
 
1.自定义图片的位置是否正确;
 
2.externalGraphic: "${image}"是否起作用了;
先写一个固定的图片,看看效果。externalGraphic: "red.png"
如果可以正常显示,这表明,使DWR,JQuery
符号的作用。解决办法在页面添加 <%@ page isELIgnored ="true" %>

你可能感兴趣的:(GeoJson+Openlayers展现后台服务提供的单点、多点的元素信息,并依据条件变化元素如元素色彩、图标)