前端使用openlayers,geoserver开发gis

我也是个gis初学者，每天记录多一点，欢迎纠错
openlayers官网地址： https://openlayers.org/en/latest/apidoc/
一 地图初始化

   import Map from "ol/Map";
  import View from "ol/View";
  import TileLayer from 'ol/layer/Tile'
  import OSM from 'ol/source/OSM'
  import XYZ from 'ol/source/XYZ'
  创建底图
/**
 * 天地图
 * @param {string} t
 *
 * vec_w: 矢量底图
 * cva_w: 矢量注记
 * img_w: 卫星影像底图
 * cia_w: 影像注记
 * ter_w: 地形底图
 * cta_w: 地形注记
 * ibo_w: 境界（省级以上）
 */
 function createTdtLayer(t = 'vec_c') {
    return new TileLayer({
        className: "defalut-layer",
        source: new XYZ({
            url: 'http://t{0-7}.tianditu.com/DataServer?T=' + t + '&x={x}&y={y}&l={z}&tk=你的密钥'
        })
    })
}
  var layers=createTdtLayer("vec_w');
  layers.push(createTdtLayer('cva_w'));
  layers.push(createTdtLayer('ibo_w'));
 创建 视图层
   this.view = new View({
      projection: "EPSG:4326", // 默认是3857球体墨卡托 改成4326 wg84坐标  
      center: center,
      zoom: this.zoom,
      maxZoom: this.maxZoom,
      minZoom: this.minZoom,
    });
    初始化地图
    this.map = new Map({
      layers: layers,//这个layer可以是数组也可以是单个的值
      target: this.$refs.map,
      view: this.view,
      // 删除默认的控件
      controls: [],
      ...this._options,
    });

关于projection 投影坐标的值可以看gis基础投影坐标系
二 加载geoserver发布的图层
首先了解wfs wms的区别：参考这里，简单来说wms加载是只做渲染的，不改变原始图层的样式，只做渲染也可以查询要素查询图例。wfs可以自定义图层的颜色及其他样式，可实现要素的增删改查
使用wfs加载,参考openlayer加载geojson图层
这里的url地址是json文件的地址，在geoserver服务后台可以拿到
三 实现wfs编辑要素发送到后台
Openlayers和geoserver对图层进行编辑
关于geoserver请求图层的参数拼接可以参考geoserver用户手册
返回的数据是xml格式的需要解析成普通对象
解析前如：

let res = WFSTSerializer.readTransactionResponse(request.responseText);
解析完后的数据格式就是个对象了
{
totalDeleted: 0，
totalInserted: 0，
totalUpdated: 1，
}

四 懒得写了（无奈…）