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座标。