leaflet加载wms和wfs服务

同一个数据可以设置wms和wfs两种加载方式，如我GeoServer的数据服务，全国县级矢量图：

参考文章：leaflet通过WFS服务加载geoserver 矢量数据_不去想结果，一直在路上-CSDN博客_leaflet wfs

如果是加载wms服务，很简单，代码如下：

       const wmsLayer = L.tileLayer.wms(
          "http://localhost:8080/geoserver/datamanage/wms?",
          {
            layers: "datamanage:CHN_adm1", //需要加载的图层
            format: "image/png", //返回的数据格式
            transparent: true,
          }
        );

      L.map("map", {
          center: [23.02404009136253, 114.50641060224784], // 地图中心
          zoom: 9, //缩放比列
          layers: [state.wmsLayer],
        });

如果是加载wfs服务，需要用到axios或ajax请求，代码如下：

let url = 'http://localhost:8080/geoserver/datamanage/ows'
const layer = 'datamanage:CHN_adm1';

const params = {
  service:'WFS',
  version:'1.1.0',
  request:'GetFeature',
  typeName:layer,
  outputFormat:'application/json',
  srsName:'EPSG:4326'
}
const url_str = url+L.Util.getParamString(params,url)
axios({
  method: 'get', 
  url:url_str,
  responseType:'json'
}).then(res=>{
  layer=L.geoJson(res.data,options)
  layer.addTo(state.map)
})

wfs效果如下（本案例会存在跨域问题，记得解决跨域就行了）：

其中res.data请求回来的数据带有很多东西，可以用于进一步研究：