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.頁面展現

<script type="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<Component> components = new ArrayList<Component>(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<String, String> properties = new HashMap<String, String>();
    properties.put("image", "red.png");// 這里提供了點將使用的圖片，自己可以隨便定義
    feature.setProperties(properties);

    Point g2 = new Point();
    g2.setPoint("[125.37673830988,43.858870032345 ]");
    Feature feature2 = new Feature(g2);
    Map<String, String> properties2 = new HashMap<String, String>();
    properties2.put("image", "yell.png");// 這里提供了點將使用的圖片，自己可以隨便定義
    feature2.setProperties(properties2);

    List<Component> components = new ArrayList<Component>(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.頁面展現

<script type="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" %>