在帶有和不帶有ajax的OL3中加載矢量層

Question

我正在嘗試使用OL3使用以下JavaScript代碼從Geoserver加載矢量圖層。

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.8.2/css/ol.css" />
<link rel="stylesheet" href="ol3-layerswitcher-master/src/ol3-layerswitcher.css" />
</head>
<body>
<div id="map" class='map'></div>
<script src="http://openlayers.org/en/v3.8.2/build/ol.js"></script>
<script src="ol3-layerswitcher-master/src/ol3-layerswitcher.js"></script>
<script>
var geojasonFormat = new ol.format.GeoJSON();

var vectorSource = new ol.source.Vector({
    loader: function(extent, resolution, projection) {
        var url = 'http://bart.nateko.lu.se:8080/geoserver/wfs?&service=wfs&version=1.1.0&request=GetFeature&typeName=Ehsan:nyc_roads&outputFormat=application/json&maxFeatures=100&format_options=callback:loadFeatures';
        // use jsonp: false to prevent jQuery from adding the "callback"
        // parameter to the URL
        $.ajax({url:url,dataType:'jsonp',jsonp:true});
    },
    strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({
    maxZoom: 19
    }))
});

window.loadFeatures = function(httpOutPut){
    vectorSource.addFeatures(geojsonFormat.readFeatures(response))
    };  


var vectorLayer = new ol.layer.Vector({
                    title:'road layer',
                    source: vectorSource,
                    style: new ol.style.Style({
                        stroke: 'rgba(255,255, 255, 1.0)',
                        width: 2
                    })
                });

var vectorGroup = new ol.layer.Group({
    'title':'vector',
    layers:[vectorLayer]});


var map = new ol.Map({
    target: document.getElementById('map'),
    layers:[
        new ol.layer.Group({
            'title': 'Base maps',
            layers:[ 
                new ol.layer.Tile({
                title: 'base map',
                type: 'base',
                source: new ol.source.MapQuest({layer: 'sat'})
                })
            ],
        }),vectorGroup

    ],
    view: new ol.View({
        center: ol.proj.transform([-74, 40.74], 'EPSG:4326', 'EPSG:3857'),
        zoom: 15    })
});
/*var extent = vectorLayer.getSource().getExtent();
map.getView().fit(extent, map.getSize());*/

var layerSwitcher = new ol.control.LayerSwitcher();
map.addControl(layerSwitcher);

</script>
</body>
</html>

我試圖遵循使用ajax在矢量源中加載功能的openlayers WFS示例，但是它不起作用。

另外，我想知道是否存在一種更簡單的解決方案，用於從Geoserver WFS加載矢量圖層，而沒有AJAX。 ol2似乎更簡單。

Answer 1

您的回叫是

window.loadFeatures = function(httpOutPut){
    vectorSource.addFeatures(geojsonFormat.readFeatures(response))
    };

如果將httpOutPut更改為response並且服務器的響應正確，則可能沒問題。

您沒有將范圍/ bbox發送到geoserver，因此可能會在范圍之外獲取要素。

這是在ol3中加載WFS數據的當前方法。 最近對master進行了更改，因此OpenLayers 3.9.0將包含使用WFS的簡化方法並使用新的WFS示例。

在帶有和不帶有ajax的OL3中加載矢量層

問題描述

1 個解決方案

解決方案1
1 2015-09-06 20:13:07

在帶有和不帶有ajax的OL3中加載矢量層

問題描述

1 個解決方案

解決方案1 1 2015-09-06 20:13:07

解決方案1
1 2015-09-06 20:13:07