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

by giser · 2019-04-03

【目标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. <script type=“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<Component> components = new ArrayList<Component>(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<String, String> properties = new HashMap<String, String>();  
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<String, String> properties2 = new HashMap<String, String>();  
18.     properties2.put(“image”, “yell.png”);// 这里提供了点将使用的图片，自己可以随便定义  
19.     feature2.setProperties(properties2);  
20.   
21.     List<Component> components = new ArrayList<Component>(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. <script type=“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” %>

转载自：https://blog.csdn.net/xiaohan2826/article/details/53859870

相关推荐

• openlayers之轨迹回放
• openlayers+vue功能组件封装
• Echart在Openlayers的应用-航班的炫光特效
• OpenLayer之聚合标注和信息框弹出
• OpenLayers 学习（二）基于OpenLayers添加地图控件
• 只有在AfterDraw 中不需要StartDrawing and FinishDrawing

Tags: openlayers

• Next story 基于OpenLayers实战地理信息系统|OpenLayers视频
• Previous story OpenLayers之多源数据加载七：矢量地图

You may also like...

• 

  openlayers3中，在地图上添加静态边界线

  2019-04-02

• Openlayer图层载入时进行坐标系的转换

  2019-04-03

• 

  OpenLayers之图形绘制一：空间要素数据结构与组织

  2019-04-03