geoserver+postgis+openlayers实现数据的更改

效果图如下

先设置点位要使用的样式，代码如下

createStyle(name) {
      return new Style({
        image: new Icon({
          scale: 0.1,
          anchor: [0.5, 1],
          src: this.src
        }),
        text: new Text({
          text: name,
          textAlign: "center",
          offsetY: -30,
          fill: new Fill({
            color: "yellow"
          }),
          backgroundFill: new Fill({
            color: "#750075"
          })
        })
      });
    }

样式的设置采用了函数的方式，根据传入的name来确定地图上面显示的文字。

加载画图工具，在画图结束后加载输入框设置点位name信息

addInteraction(geomType) {
      this.draw = new Draw({
        source: this.pointSource,
        type: geomType,
        stopClick: true
      });
      this.snap = new Snap({
        source: this.pointSource
      });
      this.draw.on("drawend", evt => {
        if (evt.feature != null) {
          this.isCanUse = true;
          this.map.removeInteraction(this.draw);
          this.overlay.setPosition(evt.feature.getGeometry().getCoordinates());
          this.map.addOverlay(this.overlay);
          let geometryCoordinates = evt.feature.getGeometry().getCoordinates();
          this.feature = new Feature({
            geom: new Point([geometryCoordinates[1], geometryCoordinates[0]])
          });
        }
      });
    }

点击确定后输入框中有文字时将该文字设置为新增feature的name属性，并且触发新增函数，将新增的feature写入数据库中并且刷新界面显示最新的地图

确定按钮事件

onSubmit() {
      if (!this.formInline.name) {
        this.$message.error("请输入道观名称");
        return;
      }
      this.feature.setGeometryName("geom");
      this.feature.set("name", this.formInline.name);
      // this.feature.setStyle(this.createStyle(this.feature.values_.name));
      this.transact("insert", this.feature, "postgisdaoguan");

      this.isCanUse = false;
      this.overlay.setPosition(null);
      this.addClick();
    }

新增feature写入数据库事件

transact(transType, feat, layerName) {
      if (layerName == "") {
        return;
      }
      var node;
      var s;
      var formatWFS = new WFS();
      switch (transType) {
        case "insert":
          node = formatWFS.writeTransaction([feat], null, null, {//第二个参数是修改，第三个是删除
            featureType: layerName,
            featurePrefix: "dao",
            featureNS: "http://localhost/dao", // 注意这个值必须为创建工作区时的命名空间URI
            srsName: "EPSG:4326"
          });
          break;
        case "update":
          node = formatWFS.writeTransaction(null, [feat], null, {
            featureType: layerName,
            featureNS: "http://localhost/dao", // 注意这个值必须为创建工作区时的命名空间URI
            srsName: "EPSG:4326"
          });
          break;
      }
      s = new XMLSerializer();
      var str = s.serializeToString(node);
      axios({
        method: "post",
        url: "http://localhost:8519/geoserver/dao/wfs",
        data: str,
        headers: {
          "Content-type": "text/xml"
        }
      }).then(res => {
        this.pointSource.clear();
        this.wfsSource = new vectorSource({
          url:
            "http://localhost:8519/geoserver/dao/wfs?" +
            "service=WFS&version=1.1.0&" +
            "request=GetFeature&typeName=dao:postgisdaoguan&" +
            "outputFormat=json&srsname=EPSG:4326",
          format: new GeoJSON({
            geometryName: "geom"
          })
        });
        this.wfsLayer.setSource(this.wfsSource);
      });
    }

在使用代码的时候url都要改成自己发布的服务。
在开发这个功能的时候我采用的是vue+element-ui+openlayers+geoserver+postgis结合开发，大家在使用我写的这部分代码的时候请自己根据情况适当进行改造，并且我这里只写了增加的功能，删除与修改请大家自行改造。¹
实现该功能的vue组件
提取码：0euh

---

1. writeTransaction中的参数，要素写在第一个参数表示新增，第二个表示修改，第三个表示删除。 ↩︎