OpenLayers 3 从 SQL 加载几何图形

Question

我正在尝试从 SQL 将 MultiPolygon 加载到 Geo Jason 对象，但它不起作用..

什么工作（这会创建几何对象）...

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"
    }

};

什么不起作用...

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

其中 webMapValues.geometry 由 SQL 填充，值为...

"{
"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"}"

请注意，唯一的区别是 SQL 加载的变量中的值在 "" 引号内。

我尝试了几种“格式”解决方案，但似乎陷入了死胡同。

非常感谢任何帮助！

Answer 1

实际的答案是像这样使用 JSON.parse...

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

因为从 SQL 返回的结构对于 Toby Speight 的观点来说已经是一个合适的 GeoJson 对象，我猜 OL3 需要一个字符串。

Answer 2

您需要将 JSON 字符串解析为一个对象，然后您可以将其与 geoJSON 对象框架合并并添加到 OpenLayers。

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>