openlayer加載wfs圖層的地址和座標系說明

• openlayer加載wfs圖層的地址說明
  如果我們把wfs圖層發佈在geoserver上，那麼大多數情況下會生成一個發佈地址：
  http://ip:port/geoserver/工作區名稱/ows?service=WFS…
  openlayer加載時後面也要填補上，這裏對後面填補的內容說明一下：
  http://ip:port/geoserver/工作區名稱/ows?service=WFS&version=1.0.0&request=GetFeature&typename=工作區名稱:圖層名稱&outputFormat=application/json&srsname=EPSG:4528&bbox=暫省略,EPSG:3857
  這一串參數是什麼：
  前面的固定：包括：service、version、request、typename、outputFormat
  後面的需要自己瞭解下：
  srsname指的是發佈圖層本身的座標系，在geoserver中定義好：
  bbox是openlayer當前加載地圖的座標系下的視圖範圍，比如若默認情況下加載了osm：openstreetmap底圖，默認座標系是EPSG:3857，那麼這裏bbox就是在3857座標系下當前視圖範圍的座標bounds，這裏可以在加載圖層時定義好讓其根據地圖瀏覽自動填充這個字段，但是bbox中座標系定義部分要寫對，當前map時3857就寫3857，別寫錯，不然獲取不到feature的：
  
    如果我們把最後請求地址放到瀏覽器中就能看到返回的是一串串feature。而openlayer是把這些feature一個個讀出來在地圖中渲染，如果我們一開始讓地圖定位到一個沒有feature的地方，則並不會請求任何數據，也不會渲染任何數據，若定位到有部分feature的地方，則會請求該區域的數據，然後我們移動地圖，瀏覽器會不斷請求這個地址，bbox不一樣獲取到不同feature然後渲染，若我們一開始就定位到能展示所有feature的地方，則請求到所有數據，後面移動地圖也不會再次請求了。

• openlayer加載wfs圖層座標系說明：
  openlayer加載wfs圖層時，座標系若不是3857或者4326，則需要定義這個座標系，並且不能在layer中直接設置定義的座標系，而要在wfs加載的每個feature中單獨設置。

1. 定義座標系：需要引入proj4，npm install proj4，安裝後import proj4 from ‘proj4’;引入，然後到epsg官網上查到對應座標系的proj4定義：
   http://epsg.io/
   
   
   以上頁面往下拉：
   
   把proj4的定義文字複製下來，寫入代碼的def定義中：

 proj4.defs("EPSG:4528","+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");
register(proj4)
var proj4528 = proj.get('EPSG:4528');
//proj4528.setExtent([0, 0, 700000, 1300000]);
proj4528.setExtent([
  40347872.25 ,2703739.74,2703739.74,40599933.05,5912395.20])
 
 

其中最後一句 extent爲一個數組，數據元素參照epsg中bounds：

對應填好就ok了。

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
var onError = function() {
  vectorSource.removeLoadedExtent(extent);
}
xhr.onerror = onError;
xhr.onload = function() {
  if (xhr.status == 200) {
    vectorSource.addFeatures(
      vectorSource.getFormat().readFeatures(xhr.responseText,{
        dataProjection: 'EPSG:4528',
        featureProjection: 'EPSG:3857'
      }));
  } else {
    onError();
  }
}
xhr.send();

加載時候在onload函數中設置dataProjection和featureProjection，前者爲圖層本身座標，後者爲openlayer map座標。