openlayers 3加載GeoServer發佈的wfs類型服務

時間 2019-11-12

標籤 openlayers 加載 geoserver 發佈 wfs 類型服務简体版

原文原文鏈接

轉：https://blog.csdn.net/u013323965/article/details/52449502

問題產生：

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中調用會存在跨域的問題產生

但出現瞭如圖所示的問題，查看開發工具發現json數據沒有套上回調名。

調用代碼

在代碼中，我將輸出格式改變爲javascript來解決jsonp

 1 //參數字段  
 2     var wfsParams = {    
 3             service : 'WFS',    
 4             version : '1.0.0',    
 5             request : 'GetFeature',    
 6             typeName : 'cite:bou2_4p',  //圖層名稱     
 7             outputFormat : 'text/javascript',  //重點，不要改變  
 8             format_options : 'callback:loadFeatures'  //回調函數聲明  
 9         };    
10       
11      var vectorSource = new ol.source.Vector({    
12          format: new ol.format.GeoJSON(),    
13          loader: function(extent, resolution, projection) {  //加載函數  
14              var url = 'http://localhost:8080/geoserver/wfs';    
15              $.ajax({    
16                  url: url,    
17                  data : $.param(wfsParams),   //傳參  
18                  type : 'GET',    
19                  dataType: 'jsonp',   //解決跨域的關鍵  
20                  jsonpCallback:'loadFeatures'  //回調  
21                      
22              });    
23          },    
24          strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({    
25              maxZoom: 25    
26          })),    
27          projection: 'EPSG:4326'    
28      });    
29       //回調函數使用  
30      window.loadFeatures = function(response) {    
31          vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(response));  //載入要素  
32              
33      };    
34      var vectorLayer = new ol.layer.Vector({    
35          source: vectorSource  
36      });