OpenLayers 3从SQL加载几何

时间:2016-06-09 20:28:22

标签: openlayers openlayers-3

我正在尝试从SQL加载一个MultiPolygon到Geo Jason对象并且它无法正常工作..

什么工作(这会创建几何对象)......

<ControlTemplate TargetType="{x:Type TreeViewItem}">
    <Grid>
        ....
        <ToggleButton x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
        <Border Name="Bd" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
            <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
        </Border>
        <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" />

        //Add code below 
        <Path Margin="-1000,0,0,0" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" VerticalAlignment="Bottom" Stretch="Fill" StrokeThickness="1" StrokeStartLineCap="Square" StrokeEndLineCap="Square" Stroke="Blue" Data="M 0 0 H 1" />

    </Grid>

什么行不通......

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

};

其中webMapValues.geometry是从SQL填充的,其值为...

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

注意唯一的区别是SQL加载的变量中的值在&#34;&#34;引号。

我尝试了一对&#34;格式&#34;解决方案但似乎陷入了死胡同。

非常感谢任何帮助!!

2 个答案:

答案 0 :(得分:0)

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

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

因为从SQL返回的结构已经是Toby Speight的一个正确的GeoJson对象,而我猜的OL3需要一个字符串。

答案 1 :(得分:0)

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

&#13;
&#13;
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());
&#13;
html, body {
    margin: 0;
    height: 100%;
    width: 100%;
}

#map {
    height: 100%;
    width: 100%;
}
&#13;
<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>
&#13;
&#13;
&#13;