轉自原文 openlayer3加載geoserver發布的WFS服務
1 參考一
1.1 問題
openlayer3加載WFS存在跨域問題，需要用jsonp解決，而jsonp需要用script加載，但加載有誤，如圖所示，讀取cite:bou2_4p圖層的GeoJSON
載入地址是這樣的http://localhost:8080/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:bou2_4p&maxFeatures=20000000&outputFormat=application%2Fjson
（與WMS不同，真正的發布地址並不是這個）
在geoserver中看到，它輸出的格式是json，但如果在js中調用會存在跨域的問題產生
1.2 調用代碼
在代碼中，我將輸出格式改變為javascript來解決jsonp。
//參數字段 var wfsParams = { service : 'WFS', version : '1.0.0', request : 'GetFeature', typeName : 'cite:bou2_4p', //圖層名稱 outputFormat : 'text/javascript', //重點，不要改變 format_options : 'callback:loadFeatures' //回調函數聲明 }; var vectorSource = new ol.source.Vector({ format: new ol.format.GeoJSON(), loader: function(extent, resolution, projection) { //加載函數 var url = 'http://localhost:8080/geoserver/wfs'; $.ajax({ url: url, data : $.param(wfsParams), //傳參 type : 'GET', dataType: 'jsonp', //解決跨域的關鍵 jsonpCallback:'loadFeatures' //回調 }); }, strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({ maxZoom: 25 })), projection: 'EPSG:4326' }); //回調函數使用 window.loadFeatures = function(response) { vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(response)); //載入要素 }; var vectorLayer = new ol.layer.Vector({ source: vectorSource }); map.addLayer(vectorLayer);
但出現了如圖所示的問題，查看開發工具發現json數據沒有套上回調名。
1.3 問題的解決
問題應該是在geoserver中產生的，后來在geoserver的web.xml中發現，jsonp的注釋沒有被注銷，導致無法輸出jsonp
最后結果，看到已經沒有問題
2 參考二
openlayers3調用GeoServer發布的wfs
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Load wfs</title>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="js/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="js/ol.js"></script>
<!--<script src="js/p-ol3.debug.js"></script>-->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/drag.js"></script>
</head>
<div id="map" style="width: 100%"></div>
<button id="loadJson" onClick="loadJson();">Load Json</button>
<body>
<script type="text/javascript">
//======================================
var osmLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
controls: ol.control.defaults(),
layers:[
osmLayer
],
target: 'map',
view: new ol.View({
center: [590810,4915303],
zoom: 2,
projection: 'EPSG:3857'
})
});
map.addLayer(wfsVectorLayer);
//======================================方法一
var wfsVectorLayer;
wfsVectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON({
geometryName: 'the_geom'
}),
url: 'http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=tiger:tiger_roads&outputFormat=application/json&srsname=EPSG:4326'
}),
style: function(feature, resolution) {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 5
})
});
}
});
//======================================方法二
//參數字段
var wfsParams = {
service : 'WFS',
version : '1.0.0',
request : 'GetFeature',
typeName : 'topp:tasmania_roads', //圖層名稱
outputFormat : 'text/javascript', //重點，不要改變
format_options : 'callback:loadFeatures' //回調函數聲明
};
//使用jsonp，可以解決跨域的問題，GeoServer中的web.xml文件關於jsonp的注釋要去掉，就可以支持跨域了
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) { //加載函數
var url = 'http://localhost:8888/geoserver/wfs';
$.ajax({
url: url,
data : $.param(wfsParams), //傳參
type : 'GET',
dataType: 'jsonp', //解決跨域的關鍵
jsonpCallback:'loadFeatures' //回調
});
},
strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({
maxZoom: 25
})),
projection: 'EPSG:4326'
});
//回調函數使用
window.loadFeatures = function(response) {
//vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(response)); //載入要素
//坐標轉換，將返回的數據的坐標轉換到當前使用地圖的坐標系，否則，無法正常顯示
vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(response,{
dataProjection: 'EPSG:4326', // 設定JSON數據使用的坐標系
featureProjection: 'EPSG:3857' // 設定當前地圖使用的feature的坐標系
})); //載入要素
};
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
//======================================
</script>
</body>
</html>
執行結果：
圖中用紅色筆圈出來的部分就是添加的wfs層
