Cesium.js基础使用（vue）

已于 2023-07-04 01:18:28 修改
阅读量5.1k 收藏 36
点赞数 11
文章标签： javascript java 开发语言
于 2023-07-04 01:08:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alone_Endeavor/article/details/131526297
版权

如何通过Cesium创建一个地图：

1、npm安装(这里使用1.95.0版本)

npm i cesium@1.95.0 -s
或
yarn add cesium@1.95.0 -s

2、组件引入

import * as Cesium from "cesium/Cesium";

3、容器创建

<div id="cesiumContainer" />

4、核心类Viewer创建

在Cesium中Viewer是一切的开端，通过newCesium.Viewer(container, options)来创建一个Viewer对象，可以把该对象理解为三维虚拟地球，在Viewer对象上的所有操作，可以看作是对三维虚拟地球的操作。

const viewer = new Viewer("cesiumContainer", {
        infoBox: false,
        animation: false, // 是否显示动画控件
        homeButton: false, // 是否显示home键
        geocoder: false, // 是否显示地名查找控件
        baseLayerPicker: false, // 是否显示图层选择控件
        timeline: false, // 是否显示时间线控件
        fullscreenButton: false, // 是否全屏显示
        infoBox: false, // 是否显示点击要素之后显示的信息
        sceneModePicker: false, // 是否显示投影方式控件  三维/二维
        navigationInstructionsInitiallyVisible: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
        orderIndependentTranslucency: false,
        shouldAnimate: true,
        scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存
        selectionIndicator: false, // 取消点击有绿框
        // imageryProvider: false, // 不提供地图
        baseLayerPicker: true, //是否显示图层选择控件
      });

5、 设置初始位置（经纬度、缩放比例）

    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          113.764043,
          34.005325,
          8000000
        ),
      });

此时，一个地球就出现了!!!

cesium内置了一些图层供我们切换。

 还可以通过一些json数据给地图添加想要的区块图层

    //阿里云地理信息工具 数据获取
      viewer.dataSources.add(
        Cesium.GeoJsonDataSource.load(
          "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json"
        )
      );
我们还可以通过cesium对一些建筑物进行观察

但需要申请Cesium的令牌(token)

如何申请？

通过以下官网地址申请

 Cesium ion

 使用：

 Cesium.Ion.defaultAccessToken =       "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDVhMjQ0Yi05MDg4LTRlNDYtYTIxMi00YmI4ZWYxOWMyNTgiLCJpZCI6MTQ5MzYwLCJpYXQiOjE2ODc3ODQ0OTh9.KlhT_LCnsEtYyawpEmJ_wx44_qTUbgze-SxGMRavbAM";

之后就可以访问高清页面；

完整代码

<template>
  <div id="cesiumContainer" @dragover="allowDrop" @drop="drop">
    <nav>
      <button @click="draw('point')">点绘制</button>
      <button @click="draw('polyline')">线绘制</button>
      <button @click="draw('polygon')">圆绘制</button>
      <button @click="clearDrawEntities">清空</button>
    </nav>

    
  </div>
</template>

<script>
import * as Cesium from "cesium/Cesium";
import { Viewer } from "cesium/Cesium";

import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { transform, getTransform } from "ol/proj";
// import { selectNodesForSpecifiedRegion } from "../../utils/gis/commonMethods";
export default {
  name: "cesiumView",
  data() {
    return {
      // map: null,
      cesiumContainer: null,
      mapViewer: null,
      tempEntities: [],
      activeNames: [],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    handleChange() {},

    //init
    initMap() {
      // 此应用程序正在使用 Cesium 的默认 ion 访问令牌，请在使用 Ceisum API 调用之前先注册一个你自己的 Cesium ion 访问令牌
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDVhMjQ0Yi05MDg4LTRlNDYtYTIxMi00YmI4ZWYxOWMyNTgiLCJpZCI6MTQ5MzYwLCJpYXQiOjE2ODc3ODQ0OTh9.KlhT_LCnsEtYyawpEmJ_wx44_qTUbgze-SxGMRavbAM";
      const viewer = new Viewer("cesiumContainer", {
        infoBox: false,
        animation: false, // 是否显示动画控件
        homeButton: false, // 是否显示home键
        geocoder: false, // 是否显示地名查找控件
        baseLayerPicker: false, // 是否显示图层选择控件
        timeline: false, // 是否显示时间线控件
        fullscreenButton: false, // 是否全屏显示
        infoBox: false, // 是否显示点击要素之后显示的信息
        sceneModePicker: false, // 是否显示投影方式控件  三维/二维
        navigationInstructionsInitiallyVisible: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
        orderIndependentTranslucency: false,
        shouldAnimate: true,
        scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存
        selectionIndicator: false, // 取消点击有绿框
        // imageryProvider: false, // 不提供地图
        baseLayerPicker: true, //是否显示图层选择控件
      });
      //设置初始位置
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          113.764043,
          34.005325,
          3000
        ),
      });

      // entities 默认点位
      // const entity = viewer.entities.add({
      //   position: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400),
      //   point: {
      //     pixelSize: 50,
      //     color: new Cesium.Color(0, 1, 0, 1),
      //   },
      // });
      // //将摄像头设置到远点处
      // viewer.trackedEntity = entity;

      //阿里云地理信息工具 数据获取
      // viewer.dataSources.add(
      //   Cesium.GeoJsonDataSource.load(
      //     "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json"
      //   )
      // );

      // Viewer.scene.globe.show = false;
      // logo去除
      viewer.cesiumWidget.creditContainer.style.display = "none";

      this.mapViewer = viewer;

      window.viewer = viewer;

      console.log(viewer, "viewer");
    },
    // deleteRectangle() {},

    //获取经纬度
    getPosition(viewer) {
      let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      handler.setInputAction(function (event) {
        let cartesian = viewer.scene.pickPosition(event.position);
        let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
        let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
        let alt = cartographic.height; // 高度
        let coordinate = {
          longitude: Number(lng.toFixed(6)),
          latitude: Number(lat.toFixed(6)),
          altitude: Number(alt.toFixed(2)),
        };
        console.log(coordinate,'coordinate');
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    /**
     * Role map drop
     * Desc 元素拖入地图放置事件
     */
    drop(e) {
      e.preventDefault();

      this.getPosition(window.viewer);
      // console.log(e, "eeeeeeeeee");
      // const pos = transform(this.map.getEventCoordinate(e), "EPSG:3857", "EPSG:4326");
      // console.log(pos, "pos");

      // const pos = ol.proj.transform(pos, 'EPSG:3857', 'EPSG:4326');
      // const data = e.dataTransfer.getData("Text");
      // console.log(data,'data')
    },
    //图标拖动效果
    drag(event, item) {
      console.log(event, item, "---------------");
    },
    /**
     * Role dragover
     * Desc 在可拖动的元素或者被选择的文本被拖进一个有效的放置目标时（每几百毫秒）触发,
     *      允许元素拖入地图
     */
    allowDrop(e) {
      e.preventDefault();
      // event.preventDefault
    },
    draw(type) {
      //点绘制
      let _this = this;
      let viewer = this.mapViewer;
      let tempEntities = this.tempEntities;
      let position = [];
      let tempPoints = [];

      /**
       * Role  depthTestAgainstTerrain 开启地形深度检测
       * desc  开启地形检测后，会计算其他地理要素和地形之间的遮挡关系。未开启时，将会出现场景变化时，地物位置显示不正确。
       */
      viewer.scene.globe.depthTestAgainstTerrain = true;

      /**
       * Role ScreenSpaceEventHandler
       * type => canvas
       * default => Document
       * desc 处理用户输入事件。可以添加自定义功能以在以下位置执行当用户输入输入时。
       */
      let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

      switch (type) {
        case "point":
          //监听 鼠标左键
          handler.setInputAction(function (movement) {
            // 从相机位置通过windowPosition 世界坐标中的像素创建一条射线。返回Cartesian3射线的位置和方向。
            let ray = viewer.camera.getPickRay(movement.position);
            // 查找射线与渲染的地球表面之间的交点。射线必须以世界坐标给出。返回Cartesian3对象
            position = viewer.scene.globe.pick(ray, viewer.scene);
            let point = _this.drawPoint(position);
            tempEntities.push(point);

            /**
             * Role ScreenSpaceEventType
             * Desc 此枚举类型用于对鼠标事件进行分类:向下，向上，单击，双击，按住按钮时移动。
             */
          }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
          // 左键双击停止绘制
          handler.setInputAction(function () {
            handler.destroy(); //关闭事件句柄
            handler = null;
          }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
          // 右击单击停止绘制
          handler.setInputAction(function () {
            handler.destroy(); //关闭事件句柄
            handler = null;
          }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
          break;
        case "polyline":
          //鼠标移动事件
          handler.setInputAction(function (movement) {},
          Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
          //左键点击操作
          handler.setInputAction(function (click) {
            //调用获取位置信息的接口
            let ray = viewer.camera.getPickRay(click.position);
            position = viewer.scene.globe.pick(ray, viewer.scene);
            tempPoints.push(position);
            let tempLength = tempPoints.length;
            //调用绘制点的接口
            let point = _this.drawPoint(tempPoints[tempPoints.length - 1]);
            tempEntities.push(point);
            if (tempLength > 1) {
              let pointline = _this.drawPolyline([
                tempPoints[tempPoints.length - 2],
                tempPoints[tempPoints.length - 1],
              ]);
              tempEntities.push(pointline);
            } else {
              // tooltip.innerHTML = "请绘制下一个点，右键结束";
            }
          }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
          //右键点击操作
          handler.setInputAction(function (click) {
            tempPoints = [];
            handler.destroy(); //关闭事件句柄
            handler = null;
          }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
          break;
        case "polygon":
          //鼠标移动事件
          handler.setInputAction(function (movement) {},
          Cesium.ScreenSpaceEventType.MOUSE_MOVE);
          //左键点击操作
          handler.setInputAction(function (click) {
            //调用获取位置信息的接口
            let ray = viewer.camera.getPickRay(click.position);
            position = viewer.scene.globe.pick(ray, viewer.scene);
            tempPoints.push(position);
            let tempLength = tempPoints.length;
            //调用绘制点的接口
            let point = _this.drawPoint(position);
            tempEntities.push(point);
            if (tempLength > 1) {
              let pointline = _this.drawPolyline([
                tempPoints[tempPoints.length - 2],
                tempPoints[tempPoints.length - 1],
              ]);
              tempEntities.push(pointline);
            } else {
              // tooltip.innerHTML = "请绘制下一个点，右键结束";
            }
          }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
          //右键点击操作
          handler.setInputAction(function (click) {
            let cartesian = viewer.camera.pickEllipsoid(
              click.position,
              viewer.scene.globe.ellipsoid
            );

            if (cartesian) {
              let tempLength = tempPoints.length;
              if (tempLength < 3) {
                alert("请选择3个以上的点再执行闭合操作命令");
              } else {
                //闭合最后一条线
                let pointline = _this.drawPolyline([
                  tempPoints[tempPoints.length - 1],
                  tempPoints[0],
                ]);
                tempEntities.push(pointline);
                _this.drawPolygon(tempPoints);
                tempEntities.push(tempPoints);
                handler.destroy(); //关闭事件句柄
                handler = null;
              }
            }
          }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
          break;
      }
    },
    drawPoint(position, config) {
      let viewer = this.mapViewer;
      let config_ = config ? config : {};
      return viewer.entities.add({
        name: "点几何对象",
        position: position,
        point: {
          color: Cesium.Color.SKYBLUE,
          pixelSize: 10,
          outlineColor: Cesium.Color.YELLOW,
          outlineWidth: 3,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        },
      });
    },
    drawPolyline(positions, config_) {
      let viewer = this.mapViewer;
      if (positions.length < 1) return;
      let config = config_ ? config_ : {};
      return viewer.entities.add({
        name: "线几何对象",
        polyline: {
          positions: positions,
          width: config.width ? config.width : 5.0,
          material: new Cesium.PolylineGlowMaterialProperty({
            color: config.color
              ? new Cesium.Color.fromCssColorString(config.color)
              : Cesium.Color.GOLD,
          }),
          depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
            color: config.color
              ? new Cesium.Color.fromCssColorString(config.color)
              : Cesium.Color.GOLD,
          }),
          clampToGround: true,
        },
      });
    },
    drawPolygon(positions, config_) {
      let viewer = this.mapViewer;
      if (positions.length < 2) return;
      let config = config_ ? config_ : {};
      return viewer.entities.add({
        name: "面几何对象",
        polygon: {
          hierarchy: positions,
          material: config.color
            ? new Cesium.Color.fromCssColorString(config.color).withAlpha(0.2)
            : new Cesium.Color.fromCssColorString("#FFD700").withAlpha(0.2),
        },
      });
    },
    //清除实体
    clearDrawEntities() {
      let viewer = this.mapViewer;
      this.tempEntities = [];
      // 清除之前的实体
      const entitys = viewer.entities._entities._array;
      let length = entitys.length;
      // 倒叙遍历防止实体减少之后entitys[f]不存在
      for (let f = length - 1; f >= 0; f--) {
        if (
          entitys[f]._name &&
          (entitys[f]._name === "点几何对象" ||
            entitys[f]._name === "线几何对象" ||
            entitys[f]._name === "面几何对象")
        ) {
          viewer.entities.remove(entitys[f]);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  position: relative;
  header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, 0.5);
  }
  .leftBar {
    width: 250px;
    height: 50%;
    position: absolute;
    top: 30%;
    z-index: 999;
    .el-collapse-item__content {
      display: flex;
      justify-content: space-between;
      // flex-wrap: wrap;
    }
    .collapseItems {
      // display: block;
      width: 100%;
      height: auto;
      .ivu-icon {
        display: block;
      }
      b {
        display: block;
        text-align: center;
      }
    }
  }
  nav {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 150px;
    height: 180px;
    // background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    button {
      width: 100%;
      height: 30px;
      cursor: pointer;
    }
  }
}
</style>

白聿冉
关注
  • 11
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
探索3D地球：Cesium.js 全面解析与应用指南
gitblog_00033的博客
03-19 460
探索3D地球：Cesium.js 全面解析与应用指南 项目地址:https://gitcode.com/CesiumGS/cesium Cesium.js 是一个强大的开源JavaScript库，用于构建交互式的3D地球和空间应用程序。它提供了丰富的功能，包括地理数据可视化、实时飞行模拟、遥感数据分析等，让开发者无需深入GIS（地理信息系统）领域就能轻松创建令人惊叹的三维地球应用。 技术分析 Ce...
个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板
04-01
该模板使用了最新的Vite构建工具和Vue3框架，并集成了TypeScript和Cesium.js技术栈。 该模板提供了一个简单的示例，展示了如何在Vue3应用程序中使用Cesium.js API创建一个基本的地球场景，并实现了一些基本的交互...
【Cesium学习（二）】Cesium在Vue项目中搭建开发
HAI_GUI的博客
08-07 1127
Vue+Cesium
Cesium.js 安装与入门：打造你的虚拟地球
最新发布
u013558123的博客
04-30 470
Cesium.js 是一个功能强大且灵活的开源库，适合于各种 3D 地球渲染和地理信息可视化需求。通过其丰富的 API 和强大的社区支持，开发者可以轻松地创建出各种复杂而引人入胜的 3D 地球和地理信息应用。
Cesium.js（1）：Cesium.js简介
u013938578的博客
04-27 245
现有的gis开发方向较流行的是webgis开发，其中Cesium是一款开源的WebGIS库，主要用于实时地球和空间数据的可视化和分析。它提供了丰富的地图显示和数据可视化功能，并能实现三维可视化开发。Cesium适用于地球科学研究、军事情报分析、航空航天领域以及虚拟现实应用等方面。本文是基于Cesium教程进行实践操作后的总结，以使新手能快速入门Cesium。
vue项目引入cesium,创建3d地球,快速上手~
白云苍狗
05-23 3792
vue项目中简单快速引入cesium,创建3d地球,简单封装自己的cesium
vue3+cesium项目搭建
Rice_w的博客
07-10 4563
最近需要在一个Vue3的项目中使用到cesium，对于一个cesium没有太多了解的人来说，还是比较麻烦的，本篇博文就将自己在这个过程踩的坑记录下来，有需要的可以看一下。
【Vue+CesiumJS学习（1）】在Vue中使用Cesium（两种方法）
yuelizhe4774的博客
03-15 6953
在Vue中使用Cesium可以通过使用Cesium官方提供的包，或者使用开发者封装后的二次包。***注意 因为该项目于2022.12.31停止vue2版本更新，现在默认安装都是vue3版本，因此需要控制版本。Step 4：新建一个Vue文件，或者直接对默认的HelloWorld.vue进行修改。开发者提供的包还有很多便捷性的东西，这里不再阐述了，有需要可以自己去看看，地址如下。Step 3：在index.html中引入js文件和css文件。两种方法均在Vue项目中运行，略过Vue项目创建步骤。
Cesium：入门教程（一）之 Hello World
热门推荐
Puzzle的博客
08-09 1万+
简介 Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。 下载 Cesium每个月月初更新一次版本，会在官网提供下载链接。........................
vue3.x中使用cesium，vue3.x+Cesium
05-04
在`vue.config.js`文件中，添加以下配置： ```javascript module.exports = { configureWebpack: config => { config.resolve.alias = { ...config.resolve.alias, 'cesium': path.resolve(__dirname, 'node_...
vue中集成cesium和threejs
12-30
项目介绍：在vue中集成cesium三维地球和threejs图形库，更好地发挥它们各自的优势。 运行说明：下载完成后，先npm install安装依赖，然后npm run serve启动项目即可。 详细说明：...
CesiumJS 1.56 (发布时间 2019-04-01)
04-02
这是2019年4月1号官方发布的完整脚本包，也欢迎下载我发布的其它资源，如"BIM模型一键输出为 3D Tiles" 等等。
vue+cesium的小项目
03-18
关于vue+cesium的小例子，不用webpack，而是main.js导入，非常希望可以帮助到你，因为我在这个vue+cesium的引入头疼了半天，官网也没有说明怎么引入vue，所以自己摸索一下，发了出来
vue-cesium:CesiumJS的Vue 3.x组件
04-02
VueCesium-用于GIS的CesiumJS的基于Vue 3.x的组件库。 :flexed_biceps: Vue 3.0合成API :fire: 用TypeScript编写 状态：测试版 该项目仍在大力开发中。 欢迎加入我们，并提出您的第一个请求。 语言能力 文献资料 ...
vue2.0项目集成Cesium的实现方法
12-09
安装cesium 在已有项目中执行, npm i cesium 修改配置 build/webpack.base.conf.js 1、定义 Cesium 源码路径 ...const cesiumSource = '../node_modules/cesium/...const vueLoaderConfig = require('./vue-loader.con
Cesium 简单使用
tx的博客
01-04 713
cesiumjs使用示例，包含创建地图，使用cesiumlab切片，标点、事件处理
cesium入门系列（一）
bulvyuanfang的博客
06-25 325
写在前面：近期开展cesium的入门学习，同时将学习的笔记记录下来，部分地方可能会很粗旷，后续会逐渐完善。vue打包出来后，源码是放置在Build文件夹下的。vscode上开启live server。二、html界面打开cesium的第一个界面（三位地球）一、登录cesium官网注册后获取token（很重要）cesium项目包准备（见附件链接）
Vue3引入cesiumjs，右键点击获取经纬度
wodenime的博客
12-04 952
项目：Vue3 + js。注：一定要设置容器大小。
教程 - 深度探讨在 Vue3 中引入 CesiumJS 的最佳方式 _
linx_i的博客
03-30 1799
目录由于 Vue2 已经进入维护期，且 Vue2 对待组件内的 data 是无差别使用递归将其劫持的，对于复杂状态的对象会造成严重的 JavaScript 访问路径过长而导致的，这个应该是老生常谈了。Vue3 提供了markRaw函数，标记一个对象，令 Vue 不再将其视作数据，所以本文基于 Vue3 来介绍如何引入 CesiumJS。心急的朋友可以直接跳过本文的介绍，拉到文末，有示例工程 zip 下载。
vue.runtime.esm.js:1888 TypeError: Cesium.Padding is not a constructor
05-31
如果在使用`new Cesium.Padding`时报错，可能是因为你使用的Cesium版本不支持`Cesium.Padding`构造函数。 在Cesium 1.51及以下的版本中，确实没有`Cesium.Padding`构造函数。如果你使用的是这些版本的Cesium，可以尝试使用以下代码来设置`padding`属性： ```javascript var viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.createWorldTerrain(), padding: { top: 0, bottom: 0, left: 0, right: 0 } }); ``` 在上面的代码中，我们将`padding`属性设置为一个对象，该对象包含四个方向的内边距值。这样可以确保场景占满整个容器，避免留白问题的出现。 你可以将上面的代码添加到你的项目中，然后重新调整浏览器窗口大小，看看留白问题是否得到了解决。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值