Question

我从服务中获取响应JSON，我需要解析它并使用它中的几何体在地图上使用OL2进行渲染。

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>

Answer 1

我设法通过明确说明类型来解析你的GeoJSON。如果您查看 docs，您会看到它可以采用FeatureCollection（默认），功能或几何。在您的情况下，您传入几何体，因此类型应为几何体。

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。

Openlayers 2：动态添加几何体

1 个答案: