jsts + openLayer 解决几何自相交报错问题

已于 2023-08-02 18:01:22 修改
阅读量1.2k 收藏 1
点赞数 1
文章标签： 前端 javascript 开发语言
于 2023-08-02 17:41:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vvaans/article/details/132066159
版权

报错：TopologyException: found non-noded intersection between LINESTRING ( 13022630.89845247 5279155.061076987, 13022019.402226187 5278543.81202375 ) and LINESTRING ( 13022546.663871666 5273866.515213738, 13022019.402226187 5286795.6742424425 ) [ (13022342.73927607, 5278867.01837748, NaN) ]

解决方法

        通过实例化jsts.gemo.GeometryFactory，根据坐标数据创建闭合线 , 通过isSimple方法判断其是否自相交。

        若其自相交则通过闭合线创建Polygon并获取其缓冲区数据 ，并获取类，若其类型为 Polygon则 获取当前缓冲区坐标数据 创建新的 Polygon返回， 若其类型为 MultiPolygon 则 遍历缓冲区每一个几何图形，然后通过union 方法将每一个几何图形融合为一个图形 并返回。

准备工作

引入jsts 和 openlayer 并实例化

import 'jsts/dist/jsts.min.js';
import {
  GeometryCollection,
  LinearRing,
  LineString,
  MultiLineString,
  MultiPoint,
  MultiPolygon,
  Point,
  Polygon,
} from 'ol/geom';
// 实例化OL解析类
const OLParser = new jsts.io.OL3Parser();

// 注入OL几何对象
OLParser.inject(
  Point,
  LineString,
  LinearRing,
  Polygon,
  MultiPoint,
  MultiLineString,
  MultiPolygon,
  GeometryCollection,
);

创建jsts几何处理函数

方法参考JSTS介绍和功能简单示例_jts api文档_GIS小虫的博客-CSDN博客

取交         

                ​​​​​​ 

  /**
   * 取交
   * @param geom
   * @param geomB
   * @returns
   */
  const intersects = (geom, geomB) => {
    const jstsGeom = OLParser.read(geom);
    const jstsGeomB = OLParser.read(geomB);

    if (!jstsGeom.isValid() || !jstsGeomB.isValid()) {
      console.error('几何对象出现拓扑错误,请检查修复');

      return null;
    }

    const difference = jstsGeom.intersection(jstsGeomB);

    return OLParser.write(difference);
  };

补集 

                ​​​​​​


  /**
   * 取geom中geomB的补集
   * @param geom
   * @param geomB
   * @returns
   */
  const getDifference = (geom, geomB) => {
    const jstsGeom = OLParser.read(geom);
    const jstsGeomB = OLParser.read(geomB);

    if (!jstsGeom.isValid() || !jstsGeomB.isValid()) {
      console.error('几何对象出现拓扑错误,请检查修复');

      return null;
    }

    const difference = jstsGeom.difference(jstsGeomB);

    return OLParser.write(difference);
  };

融合  
 /**
   * 融合
   * @param geom
   * @param geomB
   * @returns
   */
  const union = (geom, geomB) => {
    const jstsGeom = OLParser.read(geom);
    const jstsGeomB = OLParser.read(geomB);

    if (!jstsGeom.isValid() || !jstsGeomB.isValid()) {
      console.error('几何对象出现拓扑错误,请检查修复');

      return null;
    }

    const difference = jstsGeom.union(jstsGeomB);

    return OLParser.write(difference);
  };
对等差分

  /**
   * 对等差分
   * @param geom
   * @param geomB
   * @returns
   */
  const symDifference = (geom, geomB) => {
    const jstsGeom = OLParser.read(geom);
    const jstsGeomB = OLParser.read(geomB);

    if (!jstsGeom.isValid() || !jstsGeomB.isValid()) {
      console.error('几何对象出现拓扑错误,请检查修复');

      return null;
    }

    const difference = jstsGeom.symDifference(jstsGeomB);

    return OLParser.write(difference);
  };

创建解决自相交处理函数

  /**
   *  jsts相交处理
   *
   * @param {[number,number][]} coordinates
   * @return {Polygon|MultiPolygon}
   */
  function jstsIntersect(coordinates) {
    // 返回结果实例
    let mergeMultiPolygon;
    // 实例化几何操作工厂类
    let geomFactory = new jsts.geom.GeometryFactory();
    // 转换坐标Coordinate
    let jstsCoordinates = coordinates.map(function (pt) {
      return new jsts.geom.Coordinate(pt[0], pt[1]);
    });
    // 创建一个闭合线几何
    let linearRing = geomFactory.createLinearRing(jstsCoordinates);

    // 查看是否是一个简单几何, 是否自相交
    if (!linearRing.isSimple()) {
      //若要拆分它并查明它是否自相交，请使用缓冲区 buffer(0) 0 为缓冲区宽度

      let jstsPolygon = geomFactory.createPolygon(linearRing).buffer(0);

      if (jstsPolygon.getGeometryType() !== 'MultiPolygon') {
        // 获取闭合线几何数据创建面
        let _coordinates = jstsPolygon._shell._points._coordinates.map(
          function (pr) {
            return [pr.x, pr.y];
          },
        );

        // 这里目前限制为 Polygon
        mergeMultiPolygon = new Polygon([_coordinates]);
      } else {
        let list = [];

        // 遍历每个面 处理数据的结构
        for (let i = 0; i < jstsPolygon._geometries.length; i++) {
          let item = jstsPolygon._geometries[i];

          let p = item._shell._points._coordinates.map(function (pr) {
            return [pr.x, pr.y];
          });

          list.push(p);
        }

        // 合并融合每一个面 变成一个简单几何
        mergeMultiPolygon = list.reduce((accumulator, currentValue) => {
          if (accumulator) {
            return union(accumulator, new Polygon([currentValue]));
          } else {
            return new Polygon([currentValue]);
          }
        }, null);
      }
    }

    return mergeMultiPolygon;
  }

        

综合示例

import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Style from 'ol/style/Style';
import React, { useRef } from 'react';
// import * as ol from 'ol';
import { Feature, Map, View } from 'ol';
import * as format from 'ol/format';
import * as olLayer from 'ol/layer';
// import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import * as turf from '@turf/turf';
import * as geom from 'ol/geom';
import * as olSource from 'ol/source';
import { useEffect, useState } from 'react';
import styless from './index.module.less';
// import jsts from 'jsts';
import { message } from 'antd';
import 'jsts/dist/jsts.min.js';
import {
  GeometryCollection,
  LinearRing,
  LineString,
  MultiLineString,
  MultiPoint,
  MultiPolygon,
  Point,
  Polygon,
} from 'ol/geom';
import Draw from 'ol/interaction/Draw';
import 'ol/ol.css';

let integrationLayers, ilSource, lineString, sketch;

// 合并图形几何 对象
let mergeGeom;
// 实例化OL解析类
const OLParser = new jsts.io.OL3Parser();

// 注入OL几何对象
OLParser.inject(
  Point,
  LineString,
  LinearRing,
  Polygon,
  MultiPoint,
  MultiLineString,
  MultiPolygon,
  GeometryCollection,
);

const ModelSampling = () => {
  const mapRef = useRef();
  // const [isDraw, setIsDraw] = useState(false);
  const isDraw = useRef(false);
  const isDrag = useRef(false);
  const types1 = useRef();
  const [types, setTypes] = useState();

  function init() {
    const map = new Map({
      target: 'mapContainer',
      view: new View({
        center: [13090048.3574, 5182909.5998],
        zoom: 9,
        minZoom: 3,
        maxZoom: 20,
      }),
      layers: [
        new olLayer.Tile({
          source: new olSource.OSM(),
        }),
      ],
    });
    //
    const lineSource = new olSource.Vector();
    const vectorSource = new olSource.Vector();
    const lineVector = new olLayer.Vector({
      source: lineSource,
      style: new Style({
        stroke: new Stroke({
          color: 'red',
          width: 2,
        }),
        fill: new Fill({
          color: '#ff0',
          // width: 2,
        }),
      }),
    });

    ilSource = new olSource.Vector();

    integrationLayers = new olLayer.Vector({
      source: ilSource,
      style: new Style({
        stroke: new Stroke({
          color: 'red',
          width: 2,
        }),
        fill: new Fill({
          color: '#ff03',
          // width: 2,
        }),
      }),
    });

    map.addLayer(integrationLayers);
    map.addLayer(lineVector);

    let pointerMoveHandler = function (evt) {
      if (!sketch || !isDraw.current) return;

      if (evt.originalEvent.buttons === 4) {
        let coordinates = sketch.getGeometry().getCoordinates();

        coordinates.push(evt.coordinate);
        sketch.getGeometry().setCoordinates(coordinates);
      }
    };

    map.on('pointermove', pointerMoveHandler);

    map.on('pointerdown', function (evt) {
      // 鼠标中键
      if (evt.originalEvent.button === 1) {
        if (!sketch && isDraw.current) {
          sketch = new Feature(new geom.LineString([]));
          sketch.setId('paths');
          lineSource.addFeature(sketch);
        }
      }
    });

    map.on('dblclick', function (e) {
      if (!sketch) return;

      let coordinates = sketch.getGeometry().getCoordinates();
      coordinates.push(coordinates[0]);

      // let geomFactory = new jsts.geom.GeometryFactory();

      // // 转换坐标Coordinate
      // let jstsCoordinates = coordinates.map(function (pt) {
      //   return new jsts.geom.Coordinate(pt[0], pt[1]);
      // });

      // let linearRing = geomFactory.createLinearRing(jstsCoordinates);

      let mergeMultiPolygon = jstsIntersect(coordinates);
      console.log(mergeMultiPolygon, 'mergeMultiPolygon');
      if (mergeGeom) {
        let fn = types1.current === 1 ? union : getDifference;

        let _geom = fn(mergeGeom, mergeMultiPolygon);

        if (_geom) {
          mergeGeom = _geom;
          sketch = new Feature(_geom);
        } else {
          message.warning('绘画几何对象出现拓扑错误,请检查修复');
        }
      } else {
        // mergeGeom = new Polygon([coordinates]);
        console.log(mergeMultiPolygon, 'mergeMultiPolygon');
        mergeGeom = mergeMultiPolygon ?? new Polygon([coordinates]);

        let jstsGeom = OLParser.read(mergeGeom);

        sketch = new Feature(mergeGeom);

        if (!jstsGeom.isValid()) {
          message.warning('绘画几何对象出现拓扑错误,请检查修复');
          mergeGeom = null;
          sketch = null;
        }
      }

      // 清除 画线源
      lineSource.clear();
      // 清除结果 面
      ilSource.clear();

      ilSource.addFeature(new Feature(mergeGeom));

      let features = ilSource.getFeatures();
      // 创建一个 GeoJSON 格式的对象
      let geojsonFormat = new format.GeoJSON();

      // 将要素转换为 GeoJSON 字符串
      let geojsonStr = geojsonFormat.writeFeatures(features);

      console.log(turf.toWgs84(JSON.parse(geojsonStr)));
      sketch = null;
    });
    // drawClick(map, vectorSource);
    mapRef.current = map;
  }

  /**
   *  jsts相交处理
   *
   * @param {[number,number][]} coordinates
   * @return {Polygon|MultiPolygon}
   */
  function jstsIntersect(coordinates) {
    // 返回结果实例
    let mergeMultiPolygon = new Polygon([coordinates]);
    // 实例化几何操作工厂类
    let geomFactory = new jsts.geom.GeometryFactory();
    // 转换坐标Coordinate
    let jstsCoordinates = coordinates.map(function (pt) {
      return new jsts.geom.Coordinate(pt[0], pt[1]);
    });
    // 创建一个闭合线几何
    let linearRing = geomFactory.createLinearRing(jstsCoordinates);

    // 查看是否是一个简单几何, 是否自相交
    if (!linearRing.isSimple()) {
      //若要拆分它并查明它是否自相交，请使用缓冲区 buffer(0) 0 为缓冲区宽度

      let jstsPolygon = geomFactory.createPolygon(linearRing).buffer(0);

      if (jstsPolygon.getGeometryType() !== 'MultiPolygon') {
        // 获取闭合线几何数据创建面
        let _coordinates = jstsPolygon._shell._points._coordinates.map(
          function (pr) {
            return [pr.x, pr.y];
          },
        );

        // 这里目前限制为 Polygon
        mergeMultiPolygon = new Polygon([_coordinates]);
      } else {
        let list = [];

        // 遍历每个面 处理数据的结构
        for (let i = 0; i < jstsPolygon._geometries.length; i++) {
          let item = jstsPolygon._geometries[i];

          let p = item._shell._points._coordinates.map(function (pr) {
            return [pr.x, pr.y];
          });

          list.push(p);
        }

        // 合并融合每一个面 变成一个简单几何
        mergeMultiPolygon = list.reduce((accumulator, currentValue) => {
          if (accumulator) {
            return union(accumulator, new Polygon([currentValue]));
          } else {
            return new Polygon([currentValue]);
          }
        }, null);
      }
    }

    return mergeMultiPolygon;
  }
  // 点选绘制
  function drawClick(map, vectorSource) {
    // 创建一个绘制交互对象
    let draw = new Draw({
      source: vectorSource, // 矢量数据源
      type: 'Polygon', // 绘制类型为面
    });

    // 添加绘制交互到地图中
    map.addInteraction(draw);

    // 监听绘制完成事件
    draw.on('drawend', function (event) {
      let feature = event.feature; // 获取绘制的要素

      // 可以在这里对要素进行进一步处理，或者将其保存到数据库等操作
      console.log(feature, feature.getGeometry().getCoordinates(), 'feature');
      vectorSource.addFeature(feature);
      let vectors = new olLayer.Vector({
        source: vectorSource,
        style: new Style({
          stroke: new Stroke({
            color: 'red',
            width: 2,
          }),
          fill: new Fill({
            color: '#ff03',
            // width: 2,
          }),
        }),
      });

      map.addLayer(vectors);
      // 停止绘制交互
      map.removeInteraction(draw);
    });
  }

  /**
   * 取交
   * @param geom
   * @param geomB
   * @returns
   */
  const intersects = (geom, geomB) => {
    const jstsGeom = OLParser.read(geom);
    const jstsGeomB = OLParser.read(geomB);

    if (!jstsGeom.isValid() || !jstsGeomB.isValid()) {
      console.error('几何对象出现拓扑错误,请检查修复');

      return null;
    }

    const difference = jstsGeom.intersection(jstsGeomB);

    return OLParser.write(difference);
  };

  /**
   * 取geom中geomB的补集
   * @param geom
   * @param geomB
   * @returns
   */
  const getDifference = (geom, geomB) => {
    const jstsGeom = OLParser.read(geom);
    const jstsGeomB = OLParser.read(geomB);

    if (!jstsGeom.isValid() || !jstsGeomB.isValid()) {
      console.error('几何对象出现拓扑错误,请检查修复');

      return null;
    }

    const difference = jstsGeom.difference(jstsGeomB);

    return OLParser.write(difference);
  };

  /**
   * 融合
   * @param geom
   * @param geomB
   * @returns
   */
  const union = (geom, geomB) => {
    const jstsGeom = OLParser.read(geom);
    const jstsGeomB = OLParser.read(geomB);

    if (!jstsGeom.isValid() || !jstsGeomB.isValid()) {
      console.error('几何对象出现拓扑错误,请检查修复');

      return null;
    }

    const difference = jstsGeom.union(jstsGeomB);

    return OLParser.write(difference);
  };

  /**
   * 对等差分
   * @param geom
   * @param geomB
   * @returns
   */
  const symDifference = (geom, geomB) => {
    const jstsGeom = OLParser.read(geom);
    const jstsGeomB = OLParser.read(geomB);

    if (!jstsGeom.isValid() || !jstsGeomB.isValid()) {
      console.error('几何对象出现拓扑错误,请检查修复');

      return null;
    }

    const difference = jstsGeom.symDifference(jstsGeomB);

    return OLParser.write(difference);
  };

  const handlerTool = (type) => {
    setTypes(type);

    if (types1.current === type) {
      isDraw.current = !isDraw.current;
    } else {
      isDraw.current = true;
    }

    types1.current = type;
  };

  useEffect(() => {
    if (!mapRef.current) {
      init();
      window.addEventListener('keydown', (e) => {
        if (e.ctrlKey && e.keyCode === 90) {
          console.log(e, 'ctrl Z');
        }

        if (e.ctrlKey) {
          console.log(e, 'ctrl');
        }
      });
    }
  }, []);

  return (
    <div className={styless.opRoot}>
      <div className="tool">
        <button type="button" onClick={() => handlerTool(1)}>
          融合
        </button>
        <button type="button" onClick={() => handlerTool(2)}>
          删除
        </button>
      </div>
      <div id="mapContainer" style={{ height: '100%' }}></div>
    </div>
  );
};

export default ModelSampling;

效果

.4.
关注
解决vue3+ts打包，ts类型检查报错导致打包失败，goview打包报错options
南七小僧的学海无涯
02-02 1040
则是使用 Vite 进行最终的构建。所以会检测ts的类型是否写的正确标准，如果项目中类型错误少的话可以一一解决并打包但是goview的TS类型错误的地方实在太多了，所以直接不检测类型来进行打包。如果你也使用的是goview做大屏项目，那么解决完这个问题之后还有可能遇到打包的时候 js占内存溢出导致打包失败的问题，可以看一下这个文章，扩一下node.js内存就没问题了。然后使用 npm run build:pro 进行打包就没问题了。是 TypeScript。的"scripts"中添加。
vue3+vite+ts 配置别名@报错找不到模块
weixin_43754395的博客
11-30 3670
vue3+vite+ts配置别名@报错
计算两条线或多边形的交点（LineString | MultiLineString | Polygon ）
热门推荐
xxloveivy的博客
12-17 1万+
计算两条线或多边形的交点（LineString | MultiLineString | Polygon ）Turf简介使用方法效果展示下载链接 Turf简介 Turf是用JavaScript编写的模块化GIS地理空间引擎，用于空间分析的JavaScript库。它包括传统的空间操作，用于创建GeoJSON数据的辅助函数，以及数据分类、空间计算和统计工具。 使用Turf中的line-intersect...
Turf.js多边形合并（union）报non-noded intersection between错误的解决方案
做GIS梦的人
06-30 5343
问题 turf.js 是由Mapbox提供的一个控件分析库，非常适合WebGIS开发者使用，里面有丰富的空间分析与计算函数、数据转换函数。 最近在使用turf.js 进行多边形合并时，遇到一个问题如下，意思时多边形的两条线之间没有交点，但是后面跟的坐标全是在同一个多边形里面，自己怎么会跟自己没有交点呢？Polygon的数据格式肯定是没有问题的。 found non-noded intersection between LINESTRING ( 121.54630780220032 49.5325202383
Vue项目openlayers中使用jsts处理wkt和geojson的交集-(geojson来源zpi解析)
最新发布
厚积薄发.
07-09 369
Vue项目openlayers中使用jsts处理wkt和geojson的交集-(geojson来源zpi解析)
OpenLayer和JSTS空间相交应用
代码的味道博客
12-24 312
getAreaData(DrawGeometry, level) { const that = this //多边形绘制结束后获取空间几何数据传递，获取边界 const drawExtent = DrawGeometry.getExtent() //实例化jsts const parser = new jsts.io.OL3Parser() //映射OL3点线面等类 parser.inject(Point, LineStr.
openlayers判断多边形内部是否交叉
GISer_Kun的博客
05-31 402
判断内部有交叉的面
JTS多边形自相交异常问题处理
tomcat的博客
08-18 817
这个问题和同事谈论了下，最终在Stack Overflow上找到了解决方案，intersection前先判断下两polygon或者GeoMetry是否完整，通过isValid来判断，上链接。看了下报错信息的含义，是说对于红色区域的多边形来说，线段GH和JE之间是没有交点的，但是在做相交运算时，则需要有交点，但需要的时候却发现没有，所以报找不到交点的错。就是下图中的交错点。从逻辑上讲写的没问题，然后本地验证了下，发现是JTS自身报的异常。//去除超过空间的部分。//去除柜体重叠部分。
【GeoTools】geotools空间分析存在自相交情况时的错误解决
yuhui666666的博客
12-05 2169
报错信息如下：org.locationtech.jts.geom.TopologyException: found non-noded intersection between LINESTRING ( 115.081751296 22.877495404, 115.08235485099999 22.877178259000004 )......查看多边形发现存在自相交的情况：解决办法：自己和自己做一次叠加分析，将返回结果再和其它多边形进行叠加分析。 GeometryFactory geom
解决Layui中layer报错的问题
01-19
解决方法，查看网上说名，是非独立版导致直接使用layer导致，只需要在使用时加一说明，申明一下使用。 layui.use(['element','layer'], function(){ var element = layui.element,layer=layui.layer; //一些事件...
JTS官方开发指南中文翻译版.doc
07-23
JTS是加拿大的 Vivid Solutions公司做的一套开放源码的 Java API。它提供了一套空间数据操作的核心算法。为在兼容OGC标准的空间对象模型中进行基础的几何操作提供2D空间谓词API
空间数据分析工具
03-01
要配合GEODA用
openlayers3 多边形相交判断
05-06
JSTS提供了一个与OpenLayers兼容的适配器，名为`ol.format.WKT`，它可以将OpenLayers的几何对象转换为JSTS可处理的形式，进行相交判断。 首先，引入JSTS库（假设已通过npm安装）： ```html ...
【已解决】vue3+vant 引入Dialog Toast都会失败报错not defined
baidu_38730364的博客
09-08 6524
vant按需引入其他的组件没有问题，但是在引入Dialog时报错not defined.测试中，点击弹出的那个引入也可以，只有Dialog.confirm类似的就会报错，后面测试类似的Toast也是这样。在网上找了好多，都没有具体的解决方法。 后面看到一个帖子给的方法试了下，算是成功了。 我是在main.js里写要引用的组件，这样就可以全局使用了，但是Dialog和Toast上遇到了阻碍，对于这两个，在要使用的地方单独引用就不会报错。 原main.js： import { Button, Dial
JTS-GeometryFactory 使用说明（十）
鸟语清晨
04-12 2537
org.locationtech.jts.geom.GeometryFactory 使用说明 示例代码库 GeometryFactory 几何操作工厂类 类关系图 说明 提供一组实用方法，用于从坐标列表中构建几何体对象。 请注意，工厂构造方法不会以任何方式更改输入坐标。 直接子类 FixingGeometryFactory:几何工厂扩展，用于修复用于创建线性环的结构错误坐标序列 提供的方法 构造函数 操作方法 操作示例 package com.leokok.jts.learning.jts.core.
What is a “non-noded intersection”?
weixin_33889245的博客
01-09 740
2019独角兽企业重金招聘Python工程师标准>>> ...
JSTS介绍和功能简单示例
GIS小虫的博客
03-08 4779
JSTS是一个符合OGC标准的，包含空间拓扑功能的JavaScript类库。和turf类似，区别在于，JSTS是通过原始JTS Java 源代码翻译来的，保留了JTSAPI；而turf来自MapBox。个人感觉JSTS的文档不如turf明了(一些网址还404了)，但是可以直接适用OpenLayers（以下简称OL）的几何对象，对JTS API熟悉的话在OL工程里可能会更方便。 JSTS的参考文档比较分散，GitHub库里有比较全面的简介，这个地址里有一些简单的示例，JTS API直接用的JavaAPI，.
openlayer jsts是什么
04-26
OpenLayers是一个开源的JavaScript库，用于在Web浏览器中创建交互式地图应用程序。它提供了一套丰富的功能，包括地图显示、地图控件、地图交互、矢量数据渲染等。OpenLayers可以与各种地图服务商（如Google Maps、Bing Maps）以及自定义地图服务集成，使开发者能够轻松地在网页上展示地理信息。 JSTS（JavaScript Topology Suite）是一个用于处理地理空间数据的JavaScript库。它提供了一系列的空间分析和拓扑操作，如缓冲区分析、相交判断、几何形状合并等。JSTS可以与OpenLayers结合使用，使开发者能够在地图应用程序中进行更复杂的地理空间数据处理和分析。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值