openlayer笔记2 关于wfs 的增删改查

最新推荐文章于 2024-09-11 11:51:47 发布

原创最新推荐文章于 2024-09-11 11:51:47 发布 · 825 阅读

3 ·

CC 4.0 BY-SA版权

openlayer 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何通过WFS接口查询、在GeoServer上加载数据以及使用VectorLayer实现按条件查询、数据添加、修改和删除的操作，包括设置属性、坐标系转换和发送WFS请求的详细步骤。

查询所有数据

其实就是查询图层的所有数据，并加载在vertorlayer上面，没什么技术颔联，主要就是关于这个连接
http://localhost:8080/geoserver/test/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=test:testlayer&outputFormat=application%2Fjson
其中关于test为数据存储，testlayer为存储空间

  //this.geoserverLayerName  为在geoserver 添加的图层  
  //测试数据 添加WFS数据  添加所有
      var pointTypename = "test:" + this.geoserverLayerName;
      var pointVectorSource = new VectorSource({
        format: new GeoJSON(),
        url: function (extent) { 
          return (
            "http://localhost:8080/geoserver/test/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName=" +
            pointTypename +
            "&outputFormat=application%2Fjson"
          );
        },
        strategy: bbox,
      }); 
      var pointVectorLayer = new VectorLayer({
        source: pointVectorSource,
         style: new StyleOL({
          image: new StyleOL({
            radius: 5,
             fill: new StyleOL({
               color: "#389BCD",
             opacity: 0.5,
            }),
           }),
         }),
      }); 
      this.map.addLayer(pointVectorLayer);

按条件查询数据

其中 filter 可以去官网看看api 有多个并联写法，我这边就写一个
fetch 发送数据，如果想把他抽出来，主要同步处理

  //根据属性查询名字
      // generate a GetFeature request
      var featureRequest = new WFS().writeGetFeature({
        // srsName: "EPSG:4326",
        featureNS: "http://localhost:8080/geoserver/",
        featurePrefix: "test",
        featureTypes: ["test:" + this.geoserverLayerName],
        outputFormat: "application/json",
        // 查询方式就和写 SQL 一样
        filter: equalToFilter("plan_id", "2"),
      });
      var vectorSource = new VectorSource();
      var vector = new VectorLayer({
        source: vectorSource,
        style: new Style({
          stroke: new Stroke({
            color: "rgba(0, 0, 255, 1.0)",
            width: 2,
          }),
        }),
      });
      this.map.addLayer(vector);

      var featString = new XMLSerializer().serializeToString(featureRequest);
      // var _this = this;
      // console.log(featString);
      fetch("http://localhost:8080/geoserver/test/wfs?service=WFS", {
        method: "POST",
        body: featString,
      })
        .then(function (response) {
          //  console.log(response);
          return response.json();
        })
        .then(function (json) {
          // console.log(json);
          // console.log(json);
          var features = new GeoJSON().readFeatures(json);
          vectorSource.addFeatures(features);
          // _this.map.getView().fit(vectorSource.getExtent());
        });

然后关于查询，要注意的是坐标系，默认的坐标系为墨卡托坐标系，和自己本地的坐标系是否相同，是否是一个数据

添加

添加是在绘画结束的时候进行添加，这时候就有了可以添加的feature ，newFeature.set("remark", "1"); 是设置插入的参数 newFeature.setGeometryName("spatial_data"); 是你插入的表格的里面的控件属性的字段
_this.sendWFS 是后面写的一个公共方法

         this.draw.on("drawend", function (evt) { 
        var geometry = evt.feature.getGeometry().clone();
        // 设置feature对应的属性，这些属性是根据数据源的字段来设置的
        var newFeature = new Feature();
        newFeature.setGeometryName("spatial_data"); //这里必须命名为postgis对应字段名
        newFeature.setGeometry(geometry);
        newFeature.set("remark", "1"); //这里可以设置其他属性
        newFeature.set("id", "1");
        _this.sendWFS(newFeature, "insert");
      });

删除

关于删除主要是得加入select 这个模块，主要是为了为了选中获取feature

  //删除元素
      var select = new Select();
      this.map.addInteraction(select);
      // var selectedFeatures = select.getFeatures();
      var dragBox = new DragBox({
        condition: platformModifierKeyOnly,
      });
      this.map.addInteraction(dragBox);
      var _this = this;
      select.on("select", function (evt) {
        var feature = evt.selected[0];
        _this.sendWFS(feature, "delete"); 
      });

修改

需要注意的是使用了modifyInteraction ，这个是一个交互，具体是在select之后进行修改,
最后注意的是刚draw刚绘制上去的数据，是没有ID 的，而需要重新添加ID 和Gemoetry

 	var modifyInteraction = new Modify({
        features: select.getFeatures(),
      });
      var _this = this;
      modifyInteraction.on("modifyend", function (evt) {
        // 把修改完成的feature暂存起来
        var modifiedFeatures = evt.features;
        var modifiedFeature = modifiedFeatures.item(0).clone();
        modifiedFeature.setId(modifiedFeatures.item(0).getId());
        modifiedFeature.setGeometryName("spatial_data");

        _this.sendWFS(modifiedFeature, "update");
        // console.log("编辑结束");
        // console.log(modifiedFeature);
      });
      this.map.addInteraction(modifyInteraction);

发送请求

可以看到writeTransaction 的参数分别对应的是添加、修改、删除三个槽位

sendWFS(newFeature, type) {
      //发送WFS 请求 ，type 分别为insert update delect
      var featObject;
      var WFSTSerializer = new WFS();
      var _this = this;
      if (type == "insert") {
        featObject = WFSTSerializer.writeTransaction([newFeature], null, null, {
          featureNS: _this.featureNS,
          featurePrefix: _this.featurePrefix, //工作空间名称
          featureType: _this.geoserverLayerName, //图层名称
          // srsName: 'EPSG:4326'
        });
      } else if (type == "update") {
        featObject = WFSTSerializer.writeTransaction(null, [newFeature], null, {
          featureNS: _this.featureNS,
          featurePrefix: _this.featurePrefix, //工作空间名称
          featureType: _this.geoserverLayerName, //图层名称
          // srsName: 'EPSG:4326'
        });
      } else if (type == "delete") {
        featObject = WFSTSerializer.writeTransaction(null, null, [newFeature], {
          featureNS: _this.featureNS,
          featurePrefix: _this.featurePrefix, //工作空间名称
          featureType: _this.geoserverLayerName, //图层名称
          // srsName: 'EPSG:4326'
        });
      }
      var serializer = new XMLSerializer();
      var featString = serializer.serializeToString(featObject);
      // console.log(featString);
      var request = new XMLHttpRequest();
      request.open("POST", "http://localhost:8080/geoserver/wfs?service=wfs");
      request.setRequestHeader("Content-Type", "text/xml");
      request.send(featString);
    },