Openlayers 3 Last Geometrie von SQL

Question

Ich versuche, ein Multi zu einem Geo Jason Objekt von SQL zu laden und es nicht funktioniert ..

was funktioniert (dies erzeugt die Geometrie-Objekt) ...

var geoJsonObj = { 
    'type': 'Feature', 
    'geometry': { 
     "coordinates": [ 
      [[[-91.0759333619999, 40.15440933399983], 
       [-91.066378752, 40.154309680999823], 
       [-91.066282352, 40.157927062999832], 
       [-91.0751007809999, 40.157994385999814], 
       [-91.0758658189999, 40.157997289999805], 
       [-91.075866624, 40.157608482999827], 
       [-91.0758737049999, 40.157300970999813], 
       [-91.0759333619999, 40.15440933399983]]] 
     ] 
     , "type": "MultiPolygon" 
    } 

}; 

, was nicht funktioniert ...

var geoJsonObj = { 
    'type': 'Feature', 
    'geometry': webMapValues.geometry 
}; 

wo webMapValues.geometry von SQL bevölkert ist und hat einen Wert von ...

"{ 
"coordinates": 
[[[ 
[-91.0759333619999,40.15440933399983], 
[-91.066378752,40.154309680999823], 
[-91.066282352,40.157927062999832], 
[-91.0751007809999,40.157994385999814], 
[-91.0758658189999,40.157997289999805], 
[-91.075866624,40.157608482999827], 
[-91.0758737049999,40.157300970999813], 
[-91.0759333619999,40.15440933399983] 
]]] 
,"type":"MultiPolygon"}" 

Beachten Sie, der einzige Unterschied besteht darin, dass der Wert in der von SQL geladenen Variable in Anführungszeichen steht.

Ich habe ein paar "Format" -Lösungen versucht, aber scheinen in eine Sackgasse zu laufen.

Jede Hilfe wird sehr geschätzt !!

Answer 1

Die eigentliche Antwort war JSON.parse wie folgt zu verwenden ...

JSON.parse(response.FieldList[key].Shape) 

wie die Struktur zurück von SQL kommenden wurde bereits ein richtiges GeoJSON Objekt Toby Speights Punkt und OL3 nimmt einen String, denke ich.

Answer 2

Sie müssen die JSON-Zeichenfolge in ein Objekt analysieren, das Sie dann mit dem GeoJSON-Objektframe zusammenführen und zu OpenLayers hinzufügen können.

var geomStr = '{"coordinates":[[[[-91.0759333619999, 40.15440933399983],[-91.066378752, 40.154309680999823],[-91.066282352, 40.157927062999832],[-91.0751007809999, 40.157994385999814],[-91.0758658189999, 40.157997289999805],[-91.075866624, 40.157608482999827],[-91.0758737049999, 40.157300970999813],[-91.0759333619999, 40.15440933399983]]]],"type":"MultiPolygon"}'; 
 

 
var geoJson = { 
 
    "type": "FeatureCollection", 
 
    "features": [{ 
 
     "type": "Feature", 
 
     "geometry": JSON.parse(geomStr) 
 
    }] 
 
}; 
 

 
var vectorLayer = new ol.layer.Vector({ 
 
    source: new ol.source.Vector({ 
 
     features: new ol.format.GeoJSON().readFeatures(geoJson, { 
 
      dataProjection: 'EPSG:4326', 
 
      featureProjection: 'EPSG:3857' 
 
     }) 
 
    }) 
 
}); 
 

 
var map = new ol.Map({ 
 
    target: 'map', 
 
    controls: [], 
 
    layers: [new ol.layer.Tile({ 
 
     source: new ol.source.OSM() 
 
    }), vectorLayer], 
 
    view: new ol.View({ 
 
     center: [0, 0], 
 
     zoom: 10 
 
    }) 
 
}); 
 

 
map.getView().fit(
 
    vectorLayer.getSource().getExtent(), 
 
    map.getSize());

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.16.0/ol.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.16.0/ol.js"></script> 
 
<div id="map"></div>