OpenLayers 在Vue中增删改

最新推荐文章于 2023-10-23 19:43:55 发布
最新推荐文章于 2023-10-23 19:43:55 发布
阅读量1.2k 收藏 16
点赞数
分类专栏： openlayers geoserver 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qgbihc/article/details/108547898
版权

目的

使用openlayers在vue中完成Feature的增删改动作，达到可以编辑，保存矢量地图的目的。

  1. WFS
    Web Feature Service——Web要素服务
    WMS是由服务器将一地图图像发送给客户端，而WFS是服务器将矢量数据发送给客户端，也就是在使用WMS时地图由服务器绘制，在使用WFS时地图由客户端绘制。

  2. WFS请求
    WFS支持直接在URL地址中加参数方式的操作，这些操作包括：

  • GetFeature —— 获取要素数据
  • Transaction —— 创建、更新和删除要素数据

下面是在WFS中GetFeatures操作的例子，该请求用于获取本地计算机GeoServer的Demo数据的nyc_roads:nyc_roads图层的要素数据：
http://localhost:8088/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326
在上述请求中：
http://localhost:8088/geoserver/wfs?说明请求的是wfs地图服务。
service=wfs&version=1.1.0说明请求的服务是wfs服务，版本号是1.1.0。
request=GetFeature说明请求的是获取这个图层所有的要素。
typeNames=nyc_roads:nyc_roads说明请求的是GeoServer中工作区nyc_roads中nyc_roads图层。
outputFormat=application/json说明请求的地图输出格式是json数据。
srsname=EPSG:4326是指定请求的地图输出坐标系为4326

更详细说明，请参考官方文档

在这里插入图片描述

前提

  1. 启动geoserver
  2. 发布测试用矢量图层。使用geoserver官方提供的例子。url如下：
    https://docs.geoserver.org/latest/en/user/gettingstarted/shapefile-quickstart/index.html

核心代码

  1. 加载Geoserver发布的wfs地图服务
// 加载wfs图层
queryWfs() {
    // 如果已经加载过了wfs图层，那我们就移除这个图层，然后重新添加
    if (this.wfsVectorLayer) {
        this.map.removeLayer(this.wfsVectorLayer);
    }

    // 创建新的图层来加载wfs的要素，即重新加载wfs矢量图层
    this.wfsVectorLayer = new VectorLayer({
        source: new Vector({
            format: new GeoJSON({
                geometryName: 'the_geom' // 因为数据源里面字段the_geom存储的是geometry，所以需要指定
            }),
            url: 'http://localhost:8088/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326'
        }),
        //使用style+feature的方式修改添加的矢量图层的feature样式
        style: function(feature, resolution) {
            return new Style({
                stroke: new Stroke({
                    color: 'blue',
                    width: 5
                })
            });
        }
    });
    this.map.addLayer(this.wfsVectorLayer);
},
  1. 通过wfs修改要素
let WFSTSerializer = new WFS();
let featObject = WFSTSerializer.writeTransaction(null,
    features, null, {
        featureType: 'nyc_roads',
        featureNS: 'http://geoserver.org/nyc_roads',  // 注意这个值必须为创建工作区时的命名空间URI
        srsName: 'EPSG:4326'      //参考坐标系
    });
// 转换为xml内容发送到服务器端
let serializer = new XMLSerializer();
let featString = serializer.serializeToString(featObject);
let request = new XMLHttpRequest();
request.open('POST', 'http://localhost:8088/geoserver/wfs?service=wfs');
// 指定内容为xml类型
request.setRequestHeader('Content-Type', 'text/xml');
request.send(featString);

writeTransaction 的参数为：(inserts, updates, deletes, options)
前三个分别时，插入，更新，删除的Feature数组。

如果返回类似 is read-only 的字样，那是因为geoserver图层默认是只读的，修改的Security属性即可。

<?xml version="1.0" encoding="UTF-8"?><ows:ExceptionReport xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:ows="http://www.opengis.net/ows" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.0.0" xsi:schemaLocation="http://www.opengis.net/ows http://localhost:8080/geoserver/schemas/ows/1.0.0/owsExceptionReport.xsd">
<ows:Exception exceptionCode="NoApplicableCode">
<ows:ExceptionText>{http://geoserver.org/nyc_roads}nyc_roads is read-only</ows:ExceptionText>
</ows:Exception>
</ows:ExceptionReport>
  1. 使用openlayers的Select，Modify，Draw交互对象，完成选择，修改，增加动作。
// 选取feature的交互类
this.selectInteraction = new Select({
    style: new Style({
        stroke: new Stroke({
            color: 'red',
            width: 2
        })
    })
});
// 修改feature的交互类
this.modifyInteraction = new Modify({
    style: new Style({
        stroke: new Stroke({
            color: 'red',
            width: 5
        })
    }),
    //这个要修改的feature是我们之前通过ol.interaction.Select选中的feature
    features: this.selectInteraction.getFeatures()
});
//监听修改feature
this.modifyInteraction.on('modifyend', this.modifyEnd);

// 绘制feature的交互类
this.drawInteraction = new Draw({
    type: 'LineString', // 设定为线条
    style: new Style({
        stroke: new Stroke({
            color: 'red',
            width: 10
        })
    }),
    source: this.drawLayer.getSource()
});
//监听绘制feature
this.drawInteraction.on('drawend', this.drawEnd );

完整代码

贴上完整代码，便于测试验证。

<template>
    <div id="map" ref="rootmap">
        <div style="position: absolute;z-index: 9999; background: ghostwhite;display: flex;align-items: center;padding: 10px;">
            <input type="checkbox" value="select" ref="select" @click="selectAction"/>选择
            <input type="checkbox" value="modify" ref="modify" @click="modifyAction" style="margin-left:10px; "/>编辑
            <input type="checkbox" value="add" ref="add" @click="addAction" style="margin-left:10px; "/>新增
            <input type="button" value="保存" @click="saveAction" style="margin-left:10px; "/>
            <input type="button" value="删除选中" @click="deleteFeature" style="margin-left:10px; "/>
        </div>
    </div>
</template>

<script>
    import "ol/ol.css";
    import {Map, View, Feature} from "ol";
    import TileLayer from "ol/layer/Tile";
    import VectorLayer from "ol/layer/Vector"
    import {OSM, TileWMS, Vector} from "ol/source";
    import GeoJSON from "ol/format/GeoJSON";
    import {Style, Stroke} from "ol/style";
    import Draw from "ol/interaction/Draw";
    import {defaults, FullScreen, MousePosition, OverviewMap, ScaleLine, ZoomSlider, ZoomToExtent} from "ol/control"
    import {Select, Modify} from "ol/interaction";
    import {WFS} from "ol/format";
    import {MultiLineString} from "ol/geom";

    export default {
        data() {
            return {
                map: null,
                newId: 1,
                action: [],

                wfsVectorLayer: null,
                drawLayer: null,

                selectInteraction: null,
                modifyInteraction: null,
                drawInteraction: null,

                modifiedFeatures: null,
                drewFeature: null
            };
        },
        mounted() {
            let osmLayer = new TileLayer({
                source: new OSM()
            });

            // 创建用于新绘制feature的layer
            this.drawLayer = new VectorLayer({
                source: new Vector(),
                style: new Style({
                    stroke: new Stroke({
                        color: 'blue',
                        width: 5
                    })
                })
            });

            // 选取feature的交互类
            this.selectInteraction = new Select({
                style: new Style({
                    stroke: new Stroke({
                        color: 'red',
                        width: 2
                    })
                })
            });
            // 修改feature的交互类
            this.modifyInteraction = new Modify({
                style: new Style({
                    stroke: new Stroke({
                        color: 'red',
                        width: 5
                    })
                }),
                //这个要修改的feature是我们之前通过ol.interaction.Select选中的feature
                features: this.selectInteraction.getFeatures()
            });
            //监听修改feature
            this.modifyInteraction.on('modifyend', this.modifyEnd);

            // 绘制feature的交互类
            this.drawInteraction = new Draw({
                type: 'LineString', // 设定为线条
                style: new Style({
                    stroke: new Stroke({
                        color: 'red',
                        width: 10
                    })
                }),
                source: this.drawLayer.getSource()
            });
            //监听绘制feature
            this.drawInteraction.on('drawend', this.drawEnd);

            this.map = new Map({
                target: "map",
                layers: [
                    osmLayer
                    , this.drawLayer
                ],
                view: new View({
                    center: [-73.99710639567148, 40.742270050255556],
                    maxZoom: 19,
                    zoom: 14,
                    projection: 'EPSG:4326'
                })
            });

            this.queryWfs();

        },

        methods: {
            // 加载wfs图层
            queryWfs() {
                // 如果已经加载过了wfs图层，那我们就移除这个图层，然后重新添加
                if (this.wfsVectorLayer) {
                    this.map.removeLayer(this.wfsVectorLayer);
                }

                // 创建新的图层来加载wfs的要素，即重新加载wfs矢量图层
                this.wfsVectorLayer = new VectorLayer({
                    source: new Vector({
                        format: new GeoJSON({
                            geometryName: 'the_geom' // 因为数据源里面字段the_geom存储的是geometry，所以需要指定
                        }),
                        url: 'http://localhost:8088/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=nyc_roads:nyc_roads&outputFormat=application/json&srsname=EPSG:4326'
                    }),
                    //使用style+feature的方式修改添加的矢量图层的feature样式
                    style: function (feature, resolution) {
                        return new Style({
                            stroke: new Stroke({
                                color: 'blue',
                                width: 5
                            })
                        });
                    }
                });
                this.map.addLayer(this.wfsVectorLayer);
            },
            //选择地图要素时执行的方法
            selectAction() {
                if (this.$refs["select"].checked) {
                    this.$refs["add"].checked = false;
                    // 勾选选择复选框时，添加选择器到地图。先移除后添加
                    this.map.removeInteraction(this.selectInteraction);
                    this.map.addInteraction(this.selectInteraction);
                } else {
                    // 不勾选选择复选框的情况下，移出选择器和修改器
                    //移除选择器
                    this.map.removeInteraction(this.selectInteraction);
                    //把修改的checkbox置为false
                    this.$refs["modify"].checked = false;
                    //移除修改选择器
                    this.map.removeInteraction(this.modifyInteraction);
                    //把修改features置为空
                    this.modifiedFeatures = null;
                }
            },
            //修改地图要素时执行的方法
            modifyAction() {
                if (this.$refs["modify"].checked) {
                    // 勾选修改复选框时，添加选择器和修改器到地图
                    //把选择地图要素的checkbox置为true
                    this.$refs["select"].checked = true;
                    this.$refs["add"].checked = false;
                    //先移除修改器
                    this.map.removeInteraction(this.modifyInteraction);
                    //再添加修改器
                    this.map.addInteraction(this.modifyInteraction);
                    //先移除选择器
                    this.map.removeInteraction(this.selectInteraction);
                    //再添加选择器
                    this.map.addInteraction(this.selectInteraction);
                } else {
                    // 不勾选修改复选框时，移出修改器
                    this.map.removeInteraction(this.modifyInteraction);
                    this.modifiedFeatures = null;
                }
            },
            addAction() {
                if (this.$refs["add"].checked) {
                    this.$refs["select"].checked = false;
                    this.$refs["modify"].checked = false;
                    // 勾选新增复选框时，添加绘制的Interaction
                    this.map.removeInteraction(this.drawInteraction);
                    this.map.addInteraction(this.drawInteraction);
                } else {
                    // 取消勾选新增复选框时，移出绘制的Interaction，删除已经绘制的feature
                    this.map.removeInteraction(this.drawInteraction);
                    if (this.drewFeature) {
                        this.drawLayer.getSource().removeFeature(this.drewFeature);
                    }
                    this.drewFeature = null;
                }
            },
            modifyEnd(e) {
                console.log(e);
                // 把修改完成的feature暂存起来
                this.modifiedFeatures = e.features;
            },
            drawEnd(e) {
                // 绘制结束时暂存绘制的feature
                this.drewFeature = e.feature;
            },
            saveAction() {
                if (this.$refs["add"].checked) {
                    this.onSaveNew();
                }
                if (this.$refs["modify"].checked) {
                    this.onSaveModify();
                }
            },
            deleteFeature() {
                // 删选择器选中的feature
                if (this.selectInteraction.getFeatures().getLength() > 0) {
                    this.deleteWfs([this.selectInteraction.getFeatures().item(0)]);
                    // 3秒后自动更新features
                    setTimeout(() => {
                        this.selectInteraction.getFeatures().clear();
                        this.queryWfs();
                    }, 3000);
                }
            },
            // 保存已经编辑的要素
            onSaveModify() {
                //如果修改的地图要素不为空
                console.log("save wfs....0")
                if (this.modifiedFeatures && this.modifiedFeatures.getLength() > 0) {
                    // 转换坐标
                    let modifiedFeature = this.modifiedFeatures.item(0).clone();
                    // 注意ID是必须，通过ID才能找到对应修改的feature
                    modifiedFeature.setId(this.modifiedFeatures.item(0).getId());
                    // 调换经纬度坐标，以符合wfs协议中经纬度的位置
                    modifiedFeature.getGeometry().applyTransform(function (flatCoordinates, flatCoordinates2, stride) {
                        for (let j = 0; j < flatCoordinates.length; j += stride) {
                            let y = flatCoordinates[j];
                            let x = flatCoordinates[j + 1];
                            flatCoordinates[j] = x;
                            flatCoordinates[j + 1] = y;
                        }
                    });

                    console.log("save wfs....1")
                    //把修改提交到服务端
                    this.modifyWfs([modifiedFeature]);
                }
            },
            // 把修改提交到服务器端
            modifyWfs(features) {
                console.log("save wfs....")
                let WFSTSerializer = new WFS();
                let featObject = WFSTSerializer.writeTransaction(null,
                    features, null, {
                        featureType: 'nyc_roads',
                        featureNS: 'http://geoserver.org/nyc_roads',  // 注意这个值必须为创建工作区时的命名空间URI
                        srsName: 'EPSG:4326'      //参考坐标系
                    });
                // 转换为xml内容发送到服务器端
                let serializer = new XMLSerializer();
                let featString = serializer.serializeToString(featObject);
                let request = new XMLHttpRequest();
                request.open('POST', 'http://localhost:8088/geoserver/wfs?service=wfs');
                // 指定内容为xml类型
                request.setRequestHeader('Content-Type', 'text/xml');
                request.send(featString);
            },

            // 保存新绘制的feature
            onSaveNew() {
                // 转换坐标
                let geometry = this.drewFeature.getGeometry().clone();
                geometry.applyTransform(function (flatCoordinates, flatCoordinates2, stride) {
                    for (let j = 0; j < flatCoordinates.length; j += stride) {
                        let y = flatCoordinates[j];
                        let x = flatCoordinates[j + 1];
                        flatCoordinates[j] = x;
                        flatCoordinates[j + 1] = y;
                    }
                });

                // 设置feature对应的属性，这些属性是根据数据源的字段来设置的
                let newFeature = new Feature();
                newFeature.setId('nyc_roads.new.' + this.newId);
                newFeature.setGeometryName('the_geom');
                newFeature.set('the_geom', null);
                newFeature.set('name', newFeature.getId());
                newFeature.set('modified', newFeature.getId());
                newFeature.set('vsam', 0);
                newFeature.set('sourcedate', '');
                newFeature.set('sourcetype', '');
                newFeature.set('source_id', this.newId);
                newFeature.set('borough', '');
                newFeature.set('feat_code', 0);
                newFeature.set('feat_desc', '11');
                newFeature.set('feat_type', 0);
                newFeature.set('exported', 'true');
                newFeature.setGeometry(new MultiLineString([geometry.getCoordinates()]));

                this.addWfs([newFeature]);
                // 更新id
                this.newId = this.newId + 1;
                // 3秒后，自动刷新页面上的feature
                setTimeout(() => {
                    this.drawLayer.getSource().clear();
                    this.queryWfs();
                }, 3000);
            },

            // 添加到服务器端
            addWfs(features) {
                let WFSTSerializer = new WFS();
                let featObject = WFSTSerializer.writeTransaction(features,
                    null, null, {
                        featureType: 'nyc_roads',
                        featureNS: 'http://geoserver.org/nyc_roads',
                        srsName: 'EPSG:4326'
                    });
                let serializer = new XMLSerializer();
                let featString = serializer.serializeToString(featObject);
                let request = new XMLHttpRequest();
                request.open('POST', 'http://localhost:8088/geoserver/wfs?service=wfs');
                request.setRequestHeader('Content-Type', 'text/xml');
                request.send(featString);
            },
            // 在服务器端删除feature
            deleteWfs(features) {
                let WFSTSerializer = new WFS();
                let featObject = WFSTSerializer.writeTransaction(null,
                    null, features, {
                        featureType: 'nyc_roads',
                        featureNS: 'http://geoserver.org/nyc_roads',
                        srsName: 'EPSG:4326'
                    });
                let serializer = new XMLSerializer();
                let featString = serializer.serializeToString(featObject);
                let request = new XMLHttpRequest();
                request.open('POST', 'http://localhost:8088/geoserver/wfs?service=wfs');
                request.setRequestHeader('Content-Type', 'text/xml');
                request.send(featString);
            }

        }
    };
</script>

<style>
    #map {
        height: 100%;
    }

    /*隐藏ol的一些自带元素*/
    .ol-attribution, .ol-zoom {
        display: none;
    }
</style>
qgbihc
关注
专栏目录
Vue+OpenLayers6入门教程汇总目录，OpenLayers教程，Vue+OpenLayers中文文档，OpenLayers手册，OpenLayers6文档教程，OpenLayers中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-21 9465
OpenLayers介绍，相比较其他地图引擎有什么优点四种流行地图引擎比较Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍。
199：vue+openlayers 添加删除修改feature信息，双向不同颜色指示互动
大剑师兰特的GIS世界
01-11 799
第199个本示例的目的是介绍如何在vue+openlayers项目中绘制多边形，每绘制一个，左侧输出一个feature指示标志，双向颜色互动指示。
openlayers对矢量图（多边形） 的增删改查
07-24
openlayers对矢量图（多边形） 的增删改查，三角形、矩形、五边形，你想几边就几边；添加、删除矢量图，修改矢量图，旋转、平移、拉伸
Geoserver+openlayer+postGis要素增删改查
02-18
此代码主要是编写了通过geoServer发布数据服务，postGis作为空间数据的数据库，通过openlayer完成几个数据的增加，修改，删除，查询，包括属性查询，并且提供元数据测试。
openlayer在线标绘，并实现增删改查
09-16
openlayer加载离线地图，实现点线面三种要素的的在线标绘，并实现对标绘要素的增删改查功能，以及图层切换功能和定位功能
Vue+OpenLayers 访问geoserver加载地图
qq_53273102的博客
11-30 2289
Vue+OpenLayers 访问geoserver加载地图
geoserver+openlayers做地图展示，添加标注，删除标注，vue版本，前后端分离版
两袖清风野蛮人
01-25 1856
1、下载依赖 npm install ol 2、引入代码 <template> <div class="" style="width: 95%; height: 95%"> <div style="width: 100%; height: 100%" id="map" ref="rootmap"></div> <div id="popup" class="ol-popup"> <a href="#" id="
geoserver+postgis+openlayers 空间要素的增删改
06-13
geoserver+postgis+openlayers 空间要素的增删改功能，具体还可参考https://blog.csdn.net/rrrrroy_Ha/article/details/90904465
vue3版openlayers基础脚手架
08-24
在本项目中，“vue3版openlayers基础脚手架”是一个使用Vue3框架构建的Web应用程序，它专门用于展示和操作二维地图。OpenLayers是一个强大的开源JavaScript库，它允许开发者在网页上创建交互式地图，支持多种数据源...
vuelayers-与OpenLayers一起使用的Vue 2组件。-Vue.js开发
05-27
具有OpenLayers概述功能的VueLayers Web地图Vue组件VueLayers是将OpenLayers概述功能强大的OpenLayers API引入VueLayers Web map Vue组件的组件库。世界。 它可以显示带有从不同来源加载的平铺，栅格或矢量图层的...
vue3+vite+openlayers6实现绘制扇形及环形组件代码
08-05
在手写openlayers6 绘制扇形及环形源码的过程中会摘取openlayers中的核心逻辑，简化代码实现过程，保留核心功能，例如：vue3接入openlayers openlayers绘制环形 openlayers绘制扇形 适合人群：具备一定编程基础，...
OpenLayers学习教程(实现多边形绘制和自动划分并结合WFS协议增删改查GeoServer要素)
BayMin0-0的博客
09-15 531
项目结构:Vue3+Ts+OpenLayers+WFS协议+GeoServer服务 学习声明:假定你已经学会了Vue和Ts并了解一定的OpenLayers和GeoServer框架内容的使用 首先下载项目源码:点击进入项目的github 下载项目到本地后进入到项目位置打开cmd窗口执行npm i命令下载本项目相关依赖包 启动你本地的GeoServer服务 最后在项目位置上打开cmd窗口执行npm run server命令启动本项目 ...
192：vue+openlayers: 选择feature，弹窗操作，删除所选feature
大剑师兰特的GIS世界
01-04 1052
第192个本示例的目的是介绍如何在vue+openlayer中使用select来选择feature元素，选择的过程中弹窗出现删除和关闭按钮，删除的内容是selected的feature，关闭的是功能浮窗。
openlayers中根据id获取指定layer并删除该layer中的指定的feature要素
qq_37967853的博客
02-10 3669
openlayers中根据id获取指定layer并删除该layer中的指定的feature要素
OpenLayers Layer删除Feature
Gary Leong
11-22 9305
var copyLayer = VectorLayer[i]; copyLayer.getSource().removeFeature(feature); map.removeLayer(VectorLayer[i]); delete (VectorLayer[i]); VectorLayer[i] = copyLayer; map.addLayer(VectorLayer[i]); map.up...
webGIS实践（geoserver+openlayer+django）3_6_openlayer与geoserver交互增删改查
吴道简的博客
05-17 784
一、效果 操作方式选择 查看，在图面上点选，可以渲染对应的矢量要素，表格中有要素的属性，点击 提交，会提示只支持insert、update、delete。 操作方式选择 增加，切换到绘制，可以在图面上绘制几何对象，完成绘制后，在属性表中修改属性，点击 提交，完成新增。 操作方式先 查看，选中对象，操作方式切换到 修改，可以修改矢量要素的几何和属性，点击 提交，完成新增。 操作方式先 查看，选中对象，操作方式切换到 删除，可以将选中的要素删除。 二、代码 增加...
openlayer怎么删除固定的feature
最新发布
Littlegirlha的博客
10-23 329
删除固定feature的方法, 删除多个Feature可以循环遍历这个方法。
openlayers调起WFS服务进行增、删、改操作及相关问题汇总
此爱如少年
03-09 5034
前言 openlayers中提供了通过wfs服务操作后台数据的方法，对应的方法为ol.format.WFS类的writeTransaction方法。以下通过简单的示例来了解下。 示例中的wfs服务来自geoserver 一、简单示例- 1、通过wfs服务获取数据 // 服务配置，命名空间、图层、服务地址等 var geoserverData = { wsName: 'topp', uri: 'http://www.openplans.org/topp', wfsURL: 'http://loca
191：vue+openlayers 选择feature，固定按钮删除selected feature
大剑师兰特的GIS世界
01-04 837
第191个本示例的目的是介绍如何在vue+openlayer中使用select来选择feature元素，通过按键来删除selected的feature。
OpenLayers与Vue3集成案例深度解析
在 Vue3 的项目中使用 OpenLayers，我们可以利用 Vue3 的响应式系统来动态地更新地图的视图和数据。通过组合式 API（Composition API），我们可以更容易地封装和重用地图相关的逻辑。 案例学习将涉及以下知识点： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值