Openlayer对wfs服务进行增删改查

目录

查询数据

新增数据

删除数据

更新数据

---

注意：ol版本要用5.3.3，保证new GeoJson正常使用。6.1.1中不能用new GeoJSON（）  

由于要修改矢量数据，涉及到权限问题，默认是不允许修改的，所以需要更改权限，操作如下： 

查询数据

查询链接：

http://120.76.197.111:8090/geoserver/csdn_data/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=csdn_data%3Asichuan&maxFeatures=50&outputFormat=application%2Fjson

方式1：

<template>
  <div id="map" style="width: 100vw; height: 100vh"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
 
import GeoJSON from "ol/format/GeoJSON";
import { Point, LineString, Polygon } from "ol/geom";
 
export default {
  components: {},
  data() {
    return {
      map: {},
      vectorlayer: {},
    };
  },
  created() {},
  mounted() {
    this.initMap();
  },
  computed: {},
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",
 
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
          new VectorLayer({
            source: new VectorSource({
              //以下两个都可以，第一个是1.0.0版本，第二个是2.0.0版本
              url: "http://120.76.197.111:8090/geoserver/csdn_data/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=csdn_data%3Asichuan&maxFeatures=50&outputFormat=application%2Fjson",
              // url: "http://120.76.197.111:8090/geoserver/csdn_data/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=csdn_data%3Asichuan&count=50&outputFormat=application%2Fjson",
 
              format: new GeoJSON(),
            }),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [104, 30.3],
          zoom: 8,
        }),
      });
    },
  },
};
</script>

方式2：通过writeGetFeature

<template>
  <div id="map" style="width: 100vw; height: 100vh"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";

import { GeoJSON, WFS, filter } from "ol/format";
import { Point, LineString, Polygon } from "ol/geom";

import Select from "ol/interaction/Select";
import { altKeyOnly, click, pointerMove } from "ol/events/condition";

export default {
  components: {},
  data() {
    return {
      map: {},
      vectorlayer: {},
    };
  },
  created() {},
  mounted() {
    this.initMap();
    this.addLayer();
  },
  computed: {},
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",

        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [104, 30.3],
          zoom: 7,
        }),
      });
    },
    async addLayer() {
      // 发送请求
      let json = await fetch("http://120.76.197.111:8090/geoserver/wfs", {
        method: "post",
        body: new XMLSerializer().serializeToString(
          new WFS().writeGetFeature({
            srsName: "EPSG:4326", //坐标系
            featureNS: "www.csdn_data.com", // 注意这个值必须为创建工作区时的命名空间URI
            featurePrefix: "csdn_data", //工作区的命名
            featureTypes: ["sichuan"], //所要访问的图层
            maxFeatures: 5000,
            outputFormat: "application/json",
          })
        ),
      }).then((response) => {
        return response.json();
      });

      let features = new GeoJSON().readFeatures(json);
      this.vectorlayer = new VectorLayer({
        source: new VectorSource(),
      });
      this.vectorlayer.getSource().addFeatures(features);
      this.map.addLayer(this.vectorlayer);
    },
  },
};
</script>

 

新增数据

目前，只能对面进行新增和编辑，不能对点和线进行新增和编辑！

ol.format.wfs的writeTransaction方法，接受4个参数，前三个参数依次分别是要插入、更新、删除操作对应的Feature对象，以数组的形式。第4个参数是一个对象，里面定义了geoserver服务的相关信息。可以在一个Transaction操作中同时执行插入、更新、和删除操作。

<template>
  <div>
    <div style="position: fixed; top: 200px; left: 200px; z-index: 90000">
      <el-button @click="startDraw()">开始绘制</el-button>
      <el-button @click="saveDraw(featureDraw)">保存绘制</el-button>
    </div>

    <div id="map" style="width: 100vw; height: 100vh"></div>
  </div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";

import { GeoJSON, WFS, filter } from "ol/format";
import { Point, LineString, Polygon, MultiPolygon } from "ol/geom";

import { Select, Draw, Modify } from "ol/interaction";
import { altKeyOnly, click, pointerMove } from "ol/events/condition";