Openlayer2：動態添加幾何體

我從服務中獲取響應JSON，我需要解析它並使用它中的幾何體在使用OL2的地圖上渲染。Openlayer2：動態添加幾何體

JSON格式：

{"abc":{"def":[{"ghj":5,"cvb":"m", 

"geometry":{ 

"type":"MultiPolygon","coordinates":[[[[-77.09261699781653,38.87124716098509],[-77.09261699781653,38.87125044082939],[-77.09262121055383,38.87125044082939],[-77.09262121055383,38.87126028036227],[-77.09261699781653,38.87126028036227],[-77.09261699781653,38.87126356020657],[-77.09262121055383,38.87126356020657],[-77.09262121055383,38.87127667958376],[-77.09261278507921,38.871279959428044],[-77.09261278507921,38.87127667958376],[-77.09260857234192,38.87127667958376],[-77.09260857234192,38.87126356020657],[-77.0926001468673,38.87126028036227],[-77.0926001468673,38.87125044082939],[-77.09261699781653,38.87124716098509]]]],"crs":{"type":"name","properties":{"name":"epsg:4326"}} 

} 

}]}}

OL2代碼：

var featurecollection = { 
       "type": "FeatureCollection", 
       "features": [ 
       { 
      "type": "Feature", 
      "geometry": { 
response.abc.def[0].geometry 

     } 
       ] 
      }; 
      var geojson_format = new OpenLayers.Format.GeoJSON(); 
      var vector_layer = new OpenLayers.Layer.Vector(); 
      map.addLayer(vector_layer); 
      vector_layer.addFeatures(geojson_format.read(featurecollection)); 

     }

什麼，我做錯了或怎麼做的正確的方式？

編輯：整個文件如下：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css"> 
    <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css"> 
    <style> 
     .map { 
     height: 700px; 
     width: 100%; 
     } 
    </style> 
    <script src="http://openlayers.org/dev/OpenLayers.js"></script> 
    <script type="text/javascript"> 

    var xmlhttp; 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    return; 
    } 
    } 

xmlhttp.open("GET",URL,true); 
xmlhttp.setRequestHeader('Authorization','YWRtaW46YWRtaW4='); 
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=utf-8"); 
xmlhttp.send(); 
var response = xmlhttp.responseText; 
     var lon = -77.08391993369312; 
     var lat = 38.83950443733243; 
     var zoom = 9; 
     var map, layer; 

     function init(){ 
      map = new OpenLayers.Map('map'); 
      layer = new OpenLayers.Layer.WMS("OpenLayers WMS", 
        "http://vmap0.tiles.osgeo.org/wms/vmap0", 
        {layers: 'basic'}); 
      map.addLayer(layer); 
      map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); 
      var featurecollection = { 
       "type": "FeatureCollection", 
       "features": [ 
       { 
      "type": "Feature", 
      "geometry": { 

       response.abc.def[0].geometry; 
      } 
     } 
       ] 
      }; 
      var geojson_format = new OpenLayers.Format.GeoJSON(); 
      var vector_layer = new OpenLayers.Layer.Vector(); 
      map.addLayer(vector_layer); 
      vector_layer.addFeatures(geojson_format.read(featurecollection)); 

     } 
    </script> 
    </head> 
    <body onload="init()"> 
    <h1 id="title">GeoJSON Example</h1> 

    <div id="map" class="map"></div> 

    </body> 
</html>

來源

2014-07-09 Anushree Acharjee

它有多遠？你有數據嗎？它是否生成一個新的'geojson_format'和'vector_layer'？它是否添加了地圖？您需要在控制檯中檢查所有這些內容，但您需要提供更多詳細信息。 – Andy

我點擊一個REST API並獲取顯示爲JSON響應的響應。添加了整個文件。 –

你有沒有試過這個：http://gis.stackexchange.com/questions/23104/openlayers-geojson-files響應是異步的，所以想法是將整個響應發送給一個處理程序，然後它將解析整個JSON並返回一個功能，然後你可以添加到你的矢量圖層。 –

我設法讓您以GeoJSON通過明確聲明的類型進行解析。如果您查看 docs，您將看到它可以採用FeatureCollection（默認），Feature或Geometry。在你的情況下，你正在傳遞幾何，所以類型應該是幾何。

var geojson_format = new OpenLayers.Format.GeoJSON(); 
var geometry=geojson_format.read(json.abc.def[0].geometry, "Geometry"); 
var feature=new OpenLayers.Feature.Vector(geometry); 
var vector_layer = new OpenLayers.Layer.Vector(); 
map.addLayer(vector_layer); 
vector_layer.addFeatures(feature);

適用於您的JSON。

來源

2014-07-09 17:19:37

謝謝約翰。一件小事情..我得到的答覆作爲var response =「{results：2938，id：9283}」;我如何獲得元素呢？ –

我不知道，你的幾何在哪裏？我根據上面的JSON示例回答了這個問題，這是不同的？ –

是的，剛纔觀察到，我發出REST API後得到的響應包含在一個雙引號中。它實際上是「{」abc「：{」ghj「：5，」cvb「：」m「，」geometry「：{ 」type「：」MultiPolygon「：[[...]]]，「crs」：{「type」：「name」，「properties」：{「name」：「epsg：4326」}} } }]}}「 –

Openlayer2：動態添加幾何體

回答

相關問題