MiniProjectX/vue3-vuetify3-typescript-blog-system/dataAdd.js

import {WFS} from 'ol/format';

export default class useWfs{
   constructor(feature){
       this.feature = feature//传入要增删改的图层数据
   }
   
//添加图层到数据库和服务器
    wfsAdd() {
        let WFSTSerializer = new WFS();
        let featObject = WFSTSerializer.writeTransaction([this.feature],
            null, null, {
            featureType: 'shop',
            featurePrefix: 'build',
            featureNS: 'Http://localhost:8084/geoserver/test',
            srsName: 'EPSG:3857'
        });
        //创建请求
        let serializer = new XMLSerializer();
        let featString = serializer.serializeToString(featObject);
        let request = new XMLHttpRequest();
        //发送请求
        this.wfsSend(request,featString)
    }

//删除数据
    wfsDelete() {
        let WFSTSerializer = new WFS();
        let featObject = WFSTSerializer.writeTransaction(null,
            null, [this.feature], {
            featureType: 'shop',//图层名
            featurePrefix: 'build',
            featureNS: 'Http://localhost:8084/geoserver/test',//命名空间uri
            srsName: 'EPSG:3857'
        });
        //创建请求
        let serializer = new XMLSerializer();
        let featString = serializer.serializeToString(featObject);
        let request = new XMLHttpRequest();
        this.wfsSend(request,featString)
    }

//修改数据
    wfsModify() {
        let WFSTSerializer = new WFS();
        let featObject = WFSTSerializer.writeTransaction(null,
            [this.feature], null, {
            featureType: 'shop',
            featurePrefix: 'build',
            featureNS: 'Http://localhost:8084/geoserver/test',
            srsName: 'EPSG:3857'
        });
        //创建请求
        let serializer = new XMLSerializer();
        let featString = serializer.serializeToString(featObject);
        let request = new XMLHttpRequest();
        this.wfsSend(request, featString)
    }

//发送数据请求  
    wfsSend(request, featString) {
        console.time('aaa')
        request.open('POST', 'http://localhost:8084/geoserver/test/ows?');
        request.setRequestHeader('Content-Type', 'text/xml');
        request.send(featString);
        request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {
                console.log(request.responseText);
            }
        }
        console.timeEnd('aaa')
    }
}