我正在尝试使用 OL3 使用以下 JavaScript 代码从地理服务器加载矢量图层。
<!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>
我尝试遵循 openlayers WFS 示例，使用 ajax 加载矢量源中的功能，但它不起作用。
此外，我想知道是否有一个更简单的解决方案可以从地理服务器 WFS 加载矢量图层，无需 AJAX。 ol2 似乎更直接。
最佳答案
您的回调是
window.loadFeatures = function(httpOutPut){
vectorSource.addFeatures(geojsonFormat.readFeatures(response))
};
如果您将 httpOutPut 更改为 response 并且服务器的响应是正确的，那么您应该没问题。
您没有将范围/bbox发送到地理服务器，因此您可能会获得范围之外的要素。
这是 ol3 中当前加载 WFS 数据的方式。已经有recent change掌握，因此 OpenLayers 3.9.0 将包含使用 WFS 的简化方式并使用新的 WFS 示例。
关于javascript - 使用和不使用ajax在OL3中加载矢量图层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32379389/