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串方法如下:

         /**
 * 添加一个点
 * @return
 */
public String getPoints() {
    Point g1 = new Point();
    g1.setPoint("[125.37673830988,43.858870032345]");
    Feature feature = new Feature(g1);
    FeatureCollection c = new FeatureCollection(feature);
    System.out.println(c.draw());
    return c.draw();
}

输出c.draw()如下:

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[125.37673830988,43.858870032345]}}]}

d.Ajax异步获取JSON串:页面展现中，通过ajax异步获取后台提供的JSON串，这里不累述。

 

e.页面展现

"text/javascript">
var map,vectors_map,vector_point,geojson;
function init(){
 //创建地图
 map = ......;
 vectors_map = new OpenLayers.Layer.WMS(
  ......
 );
 //创建一个点图层,用来展现我们从后台获取的点信息
 vector_point = new OpenLayers.Layer.Vector();
 //将地图图层和点图层加载到Map
 map.addLayers([vectors_map,vector_point]);
 //创建GeoJSON类对象,用于解析JSON串
 geojson = new OpenLayers.Format.GeoJSON();
 map.setCenter(new OpenLayers.LonLat(125.30593872070312, 43.87017822557581),5);
}
//1.这里定义的jsons应该是通过ajax从后台获取的
var jsons = {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[124.82786, 45.1371017]}}]};
//2.通过后台获取json串后，调用addJson()方法后，就可以将点展现到页面。
function addJson(){
   vector_point.addFeatures(geojson.read(jsons));
}

【效果】

 

 

 

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

 

【步骤】基本和单点一样,不同之处在{拼写JSON串}

 

c.拼写JSON串。通过http://download.csdn.net/source/2991502下载拼写JSON的Jar包,拼写JSON串方法如下:  

        /**
 * 添加两个点
 *
 * @return
 */
public String getPoints() {
    Point g1 = new Point();
    g1.setPoint("[124.70169067383,43.859191897451]");
    Feature feature = new Feature(g1);
    Point g2 = new Point();
    g2.setPoint("[125.37673830988,43.858870032345]");
    Feature feature2 = new Feature(g2);

    List components = new ArrayList(2);
    components.add(feature2);
    components.add(feature);

    FeatureCollection c = new FeatureCollection(components);
    System.out.println(c.draw());
    return c.draw();
}

   

输出c.draw()如下:

{"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串。

         /**
 * 添加两个点
 *
 * @return
 */
public String getPoints() {
    Point g1 = new Point();
    g1.setPoint("[124.70169067383,43.859191897451 ]");
    Feature feature = new Feature(g1);
    Map properties = new HashMap();
    properties.put("image", "red.png");// 这里提供了点将使用的图片，自己可以随便定义
    feature.setProperties(properties);

    Point g2 = new Point();
    g2.setPoint("[125.37673830988,43.858870032345 ]");
    Feature feature2 = new Feature(g2);
    Map properties2 = new HashMap();
    properties2.put("image", "yell.png");// 这里提供了点将使用的图片，自己可以随便定义
    feature2.setProperties(properties2);

    List components = new ArrayList(2);
    components.add(feature);
    components.add(feature2);

    FeatureCollection c = new FeatureCollection(components);
    System.out.println(c.draw());
    return c.draw();
}

输出c.draw()如下:

{"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.页面展现

"text/javascript">
var map,vectors_map,vector_point,geojson;
function init(){
 //创建地图
 map = ......;
 vectors_map = new OpenLayers.Layer.WMS(
  ......
 );

//新增部分，将对vector_point这个图层定义一个样式，不使用默认样式
 var styleMap = new OpenLayers.StyleMap({
      "default": {
            fillOpacity: 1,
            strokeOpacity:1,
            strokeColor: "#000000",
            graphicWidth:30,
            graphicHeight:50,
            externalGraphic: "${image}"
         }
 });
 vector_point = new OpenLayers.Layer.Vector("Simple Geometry", {
      styleMap: styleMap,
      rendererOptions: {zIndexing: true}
 });

 //创建一个点图层,用来展现我们从后台获取的点信息
 //屏蔽这句话vector_point = new OpenLayers.Layer.Vector();
 //将地图图层和点图层加载到Map
 map.addLayers([vectors_map,vector_point]);
 //创建GeoJSON类对象,用于解析JSON串
 geojson = new OpenLayers.Format.GeoJSON();
 map.setCenter(new OpenLayers.LonLat(125.30593872070312, 43.87017822557581),5);
}
//1.这里定义的jsons应该是通过ajax从后台获取的
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 ]}}]};
//2.通过后台获取json串后，调用addJson()方法后，就可以将点展现到页面。
function addJson(){
   vector_point.addFeatures(geojson.read(jsons));
}

 

【效果C】

 

 

【注意】如果你的程序没有出来效果，检查两个地方

 

1.自定义图片的位置是否正确;

 

2.externalGraphic: "${image}"是否起作用了;

先写一个固定的图片，看看效果。externalGraphic: "red.png"

如果可以正常显示，这表明符号被屏蔽了。我们在开发中,页面可能会使用到其他框架，比如DWR,JQuery。这个时候，有的框架会屏蔽

符号的作用。解决办法在页面添加 <%@ page isELIgnored ="true" %>