在OL3中加載矢量圖層時使用和不使用ajax

我正嘗試使用OL3從地理服務器使用以下JavaScript代碼加載矢量圖層。在OL3中加載矢量圖層時使用和不使用ajax

<!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示例來加載矢量源中的功能，但它不起作用。

此外，我想知道是否有更簡單的解決方案從地理服務器WFS加載矢量圖層，沒有AJAX的東西。 ol2似乎更直接。

來源

2015-09-03 msc87

你好。你準確使用了哪些Openlayers版本？它是3.9.0嗎？ – slevin

你的回調是

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

如果更改httpOutPut到response，並從服務器的響應是正確的，你應該是好的。

您並未將範圍/ bbox發送到geoserver，因此您可能會在範圍外獲取功能。

這是當前在ol3中加載WFS數據的方式。掌握了recent change，所以OpenLayers 3.9.0將包含使用WFS的簡化方法並使用新的WFS示例。

來源

2015-09-06 20:13:07

嗨。這些例子中的哪一個是從地理服務器到OL獲得WFS的官員？問題中的代碼或[this]（http://openlayers.org/en/v3.9.0/examples/vector-wfs.html?q=wfs）？ OL例子讓我很困惑。你知道任何解釋什麼是什麼的教程嗎？謝謝 – slevin

@slevin：您提供的鏈接是OpenLayers官方示例（版本3.9）。這個問題中的代碼深受OpenLayers 3.8及更低版本官方示例的啓發。所以這兩個都是官方的例子，但是來自不同的版本 –

在OL3中加載矢量圖層時使用和不使用ajax

回答

相關問題