vue通过npm安装js实现mapbox自定义3D模板

最新推荐文章于 2024-04-24 10:26:44 发布
最新推荐文章于 2024-04-24 10:26:44 发布
阅读量1.7k 收藏 3
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44252277/article/details/106937831
版权

vue实现mapbox自定义3D模板

  1. 使用npm进行安装js(默认安装最新版) npm地址

    1.npm i mapbox-gl
2.npm i maptalks
3.npm i maptalks.mapboxgl
4.npm i @mapbox/mapbox-gl-language
5.npm i three

  2. 引用我们需要的js

    const mapboxgl = require('mapbox-gl');
const maptalks = require('maptalks');
const maptalksM = require('maptalks.mapboxgl');
const MapboxLanguage = require("@mapbox/mapbox-gl-language");
const THREE = window.THREE = require('three');
const {ColladaLoader} = require('three/examples/jsm/loaders/ColladaLoader');//在three.js包下

  3. 定义data数据

    data() {
        return {
            positionLocation: [121.509758, 31.300800],
            zoom: 16,
            pitch: 60,  //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
            bearing: 10,
            antialias: false, //抗锯齿，通过false关闭提升性能
            maxPitch: 60,
            container: 'map',
            lonlats: [],
            baseUrl: "api/service-count",
            markerRe: [],//标点
            x_PI: 3.14159265358979324 * 3000.0 / 180.0,
            PI: 3.1415926535897932384626,
            a: 6378245.0,
            ee: 0.00669342162296594323,
            layer: "",
        };
    },

  4. 定义一个容器

    <template>
    <div id="map">
    </div>
</template>
<style scoped>
/* mapbox css*/
 	@import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css');
    #map {
        position: absolute;
        top: 40px;
        bottom: 0;
        width: 100%;
        margin-left: -24px;
    }
</style>

  5. 完整的js代码 （去mapboxgl官网中注册账号，并新建一个token）

                    
         /**
          * 判断坐标是否在国内   百度坐标转gps坐标 start
          */
         out_of_china(lng, lat) {
             return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
         },
         /**
          * 提供了百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换
          * 即 百度 转 谷歌、高德
          */
         bd09togcj02(bd_lon, bd_lat) {
             var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
             var x = bd_lon - 0.0065;
             var y = bd_lat - 0.006;
             var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
             var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
             var gg_lng = z * Math.cos(theta);
             var gg_lat = z * Math.sin(theta);
             return [gg_lng, gg_lat]
         },
         /**
          * GCJ02 转换为 WGS84
          */
         gcj02towgs84(lng, lat) {
             if (this.out_of_china(lng, lat)) {
                 return [lng, lat]
             } else {
                 var dlat = this.transformlat(lng - 105.0, lat - 35.0);
                 var dlng = this.transformlng(lng - 105.0, lat - 35.0);
                 var radlat = lat / 180.0 * this.PI;
                 var magic = Math.sin(radlat);
                 magic = 1 - this.ee * magic * magic;
                 var sqrtmagic = Math.sqrt(magic);
                 dlat = (dlat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtmagic) * this.PI);
                 dlng = (dlng * 180.0) / (this.a / sqrtmagic * Math.cos(radlat) * this.PI);
                 var mglat = lat + dlat;
                 var mglng = lng + dlng;
                 return [lng * 2 - mglng, lat * 2 - mglat]
             }
         },
         transformlat(lng, lat) {
             var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
             ret += (20.0 * Math.sin(6.0 * lng * this.PI) + 20.0 * Math.sin(2.0 * lng * this.PI)) * 2.0 / 3.0;
             ret += (20.0 * Math.sin(lat * this.PI) + 40.0 * Math.sin(lat / 3.0 * this.PI)) * 2.0 / 3.0;
             ret += (160.0 * Math.sin(lat / 12.0 * this.PI) + 320 * Math.sin(lat * this.PI / 30.0)) * 2.0 / 3.0;
             return ret
         },

         transformlng(lng, lat) {
             var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
             ret += (20.0 * Math.sin(6.0 * lng * this.PI) + 20.0 * Math.sin(2.0 * lng * this.PI)) * 2.0 / 3.0;
             ret += (20.0 * Math.sin(lng * this.PI) + 40.0 * Math.sin(lng / 3.0 * this.PI)) * 2.0 / 3.0;
             ret += (150.0 * Math.sin(lng / 12.0 * this.PI) + 300.0 * Math.sin(lng / 30.0 * this.PI)) * 2.0 / 3.0;
             return ret
         },
         baiMapGps(long, lat) {
             let bd09togcj = this.bd09togcj02(long, lat);//百度转火星
             let baiMapGps = this.gcj02towgs84(bd09togcj[0], bd09togcj[1]);//GCJ02 转换为 WGS84
             return baiMapGps;
         },
         /**
          * 百度坐标转gps坐标 end
          */
         initMarker() {
             this.$http({
                 url: this.baseUrl + "/xxxx/xx",
                 method: "GET"
             })
                 .then(response => {
                     this.lonlats = response.data[0];
                     this.marker();
                     this.initMap();
                 })
                 .catch(e => {
                     console.log(e);
                 });
         },
         initMap() {
             mapboxgl.accessToken = 'pk.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
             var map = new mapboxgl.Map({
                 container: 'map',
                 style: 'mapbox://styles/mapbox/dark-v9',
                 maxPitch: this.maxPitch,
                 center: this.positionLocation,
                 zoom: this.zoom,
                 pitch: this.pitch,
                 bearing: this.bearing
             });
             /**
              * 设置中文
              */
             map.addControl(new MapboxLanguage({
                 defaultLanguage: 'zh'
             }));
             /**
              * 添加 3D模板 start
              */
                 // 确保模型在地图上正确地理参考的参数
             var modelOrigin = [121.509758, 31.300800];
             var modelAltitude = 0;
             var modelRotate = [Math.PI / 2, 0, 0];
             var modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(
                 modelOrigin,
                 modelAltitude
             );

             // 转换参数以在地图上定位，旋转和缩放3D模型
             var modelTransform = {
                 translateX: modelAsMercatorCoordinate.x,
                 translateY: modelAsMercatorCoordinate.y,
                 translateZ: modelAsMercatorCoordinate.z,
                 rotateX: modelRotate[0],
                 rotateY: modelRotate[1],
                 rotateZ: modelRotate[2],
                 /* Since our 3D model is in real world meters, a scale transform needs to be
                 * applied since the CustomLayerInterface expects units in MercatorCoordinates.
                 */
                 scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
             };
             // 根据CustomLayerInterface为3D模型配置自定义层
             //var THREE = window.THREE; //= require('three');
             var customLayer = {
                 id: '3d-model',
                 type: 'custom',
                 renderingMode: '3d',
                 onAdd: function (map, gl) {
                     this.camera = new THREE.Camera();
                     this.scene = new THREE.Scene();

                     // 创建两个three.js灯来照亮模型
                     var directionalLight = new THREE.DirectionalLight(0xcccccc);
                     directionalLight.position.set(0, -70, 100).normalize();
                     this.scene.add(directionalLight);

                     var directionalLight2 = new THREE.DirectionalLight(0xcccccc);
                     directionalLight2.position.set(0, 70, 100).normalize();
                     this.scene.add(directionalLight2);

                     // 使用three.js GLTF加载器将3D模型添加到three.js场景
                     var loader = new ColladaLoader;
                     loader.load('./dist/xxx.dae',
                         function (gltf) {
                             this.scene.add(gltf.scene);
                         }.bind(this),
                         // called while loading is progressing
                         function (xhr) {
                             //console.log("xhr:", xhr);
                             //console.log((xhr.loaded / xhr.total * 100) + '% loaded');
                         },
                         // called when loading has errors
                         function (error) {
                             console.log("errot:", error);
                         }
                     );
                     this.map = map;
                     // 对three.js使用Mapbox GL JS地图画布
                     this.renderer = new THREE.WebGLRenderer({
                         canvas: map.getCanvas(),
                         context: gl,
                         antialias: true
                     });
                     this.renderer.autoClear = false;
                 },
                 render: function (gl, matrix) {
                     var rotationX = new THREE.Matrix4().makeRotationAxis(
                         new THREE.Vector3(1, 0, 0),
                         modelTransform.rotateX
                     );
                     var rotationY = new THREE.Matrix4().makeRotationAxis(
                         new THREE.Vector3(0, 1, 0),
                         modelTransform.rotateY
                     );
                     var rotationZ = new THREE.Matrix4().makeRotationAxis(
                         new THREE.Vector3(0, 0, 1),
                         modelTransform.rotateZ
                     );

                     var m = new THREE.Matrix4().fromArray(matrix);
                     var l = new THREE.Matrix4()
                         .makeTranslation(
                             modelTransform.translateX,
                             modelTransform.translateY,
                             modelTransform.translateZ
                         )
                         .scale(
                             new THREE.Vector3(
                                 modelTransform.scale,
                                 -modelTransform.scale,
                                 modelTransform.scale
                             )
                         )
                         .multiply(rotationX)
                         .multiply(rotationY)
                         .multiply(rotationZ);

                     this.camera.projectionMatrix = m.multiply(l);
                     this.renderer.state.reset();
                     this.renderer.render(this.scene, this.camera);
                     this.map.triggerRepaint();
                 }
             };
             /**
              * 添加 3D模板 end
              */
             /**
              * 添加 热力图 start
              */
             let lonlat = this.lonlats.lonlat;
             let arrList = [];
             for (let i = 0; i < lonlat.length; i++) {
                 let aa = {
                     type: "Feature",
                     properties: {
                         dbh: Math.ceil(Math.random() * 100)
                     },
                     geometry: {
                         type: "Point",
                         coordinates: this.baiMapGps(lonlat[i].lon, lonlat[i].lat)
                     }
                 };
                 arrList.push(aa);
             }
             var geojson = {
                 type: "FeatureCollection",
                 features: arrList
             };
             /* 摄像头数据 */
             let cameraGeojson = {
                 type: "FeatureCollection",
                 features: [
                     {
                         type: 'Feature',
                         properties: {
                             dbh: '摄像头1'
                         },
                         geometry: {
                             type: 'Point',
                             coordinates: [121.510758, 31.301800],
                         }
                     },
                 ]
             };
             map.on('load', function () {
                 /* 3D 模板 */
                 map.addLayer(customLayer, 'waterway-label');
                 /* 摄像头 */
                 map.loadImage(
                     './dist/2.png',
                     function (error, image) {
                         if (error) throw error;
                         map.addImage('camera', image);
                         map.addSource('point', {
                             'type': 'geojson',
                             'data': cameraGeojson
                         });
                         map.addLayer({
                             id: 'points',
                             type: 'symbol',
                             source: 'point',
                             layout: {
                                 'icon-image': 'camera',
                                 'icon-size': 1.0
                             }
                         });
                         map.on('click', 'points', function (e) {
                             alert(e.features[0].properties.dbh);
                         });
                     });
                 /* 热力图 */
                 map.addSource('trees', {
                     type: 'geojson',
                     data: geojson
                 });
                 // add heatmap layer here
                 // add circle layer here
                 map.addLayer({
                     id: 'trees-heat',
                     type: 'heatmap',
                     source: 'trees',
                     maxzoom: 15,
                     paint: {
                         // increase weight as diameter breast height increases
                         'heatmap-weight': {
                             property: 'dbh',
                             type: 'exponential',
                             stops: [
                                 [1, 0],
                                 [62, 1]
                             ]
                         },
                         // increase intensity as zoom level increases
                         'heatmap-intensity': {
                             stops: [
                                 [11, 1],
                                 [15, 3]
                             ]
                         },
                         // assign color values be applied to points depending on their density
                         'heatmap-color': [
                             'interpolate',
                             ['linear'],
                             ['heatmap-density'],
                             0, 'rgba(236,222,239,0)',
                             0.2, 'rgb(208,209,230)',
                             0.4, 'rgb(166,189,219)',
                             0.6, 'rgb(103,169,207)',
                             0.8, 'rgb(28,144,153)',
                             1.0, 'rgb(219,63,99)'
                         ],
                         // increase radius as zoom increases
                         'heatmap-radius': {
                             stops: [
                                 [11, 15],
                                 [15, 20]
                             ]
                         },
                         // decrease opacity to transition into the circle layer
                         'heatmap-opacity': {
                             default: 1,
                             stops: [
                                 [14, 1],
                                 [15, 0]
                             ]
                         },
                     }
                 }, 'waterway-label');
                 map.addLayer({
                     id: 'trees-point',
                     type: 'circle',
                     source: 'trees',
                     minzoom: 14,
                     paint: {
                         // increase the radius of the circle as the zoom level and dbh value increases
                         'circle-radius': {
                             property: 'dbh',
                             type: 'exponential',
                             stops: [
                                 [{zoom: 15, value: 1}, 5],
                                 [{zoom: 15, value: 62}, 10],
                                 [{zoom: 22, value: 1}, 20],
                                 [{zoom: 22, value: 62}, 50],
                             ]
                         },
                         'circle-color': {
                             property: 'dbh',
                             type: 'exponential',
                             stops: [
                                 [0, 'rgba(236,222,239,0)'],
                                 [10, 'rgb(236,222,239)'],
                                 [20, 'rgb(208,209,230)'],
                                 [30, 'rgb(166,189,219)'],
                                 [40, 'rgb(103,169,207)'],
                                 [50, 'rgb(28,144,153)'],
                                 [60, 'rgb(1,108,89)'],
                                 [80, 'rgb(232,78,109)'],

                             ]
                         },
                         'circle-stroke-color': 'white',
                         'circle-stroke-width': 1,
                         'circle-opacity': {
                             stops: [
                                 [14, 0],
                                 [15, 1]
                             ]
                         }
                     }
                 }, 'waterway-label');
                 map.on('click', 'trees-point', function (e) {
                     var proup = new mapboxgl.Popup()
                     proup.setLngLat(e.features[0].geometry.coordinates)
                     proup.setHTML('<div>当前人数:'+ e.features[0].properties.dbh +'</div> ')
                     proup.addTo(map);

                 });
             });
             /**
              * 热力图 end
              */
         }
Best'
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
threebox:Mapbox GL JS的three.js插件，支持基本动画和高级3D渲染
05-06
threebox 使用自定义图层功能的Mapbox GL JS的three.js插件。 提供方便的方法来管理线性坐标中的对象，以及同步地图和场景摄像机。 兼容性/依赖性 Mapbox v.0.50.0及更高版本（用于自定义图层支持） Three.r94（已捆绑到Threebox版本中）。 如果需要，可以交换其他版本并重建，但不能保证兼容性。 入门 从下载捆绑 ，并将其添加到页面上的[removed]标记中。 有几个介绍性的例子。 要运行它们，请使用Mapbox访问令牌以及格式创建一个config.js文件。 。 贡献 使用npm run build或npm run dev来构建库，以在开发时连续重建。 这两个命令都将在/dist/threebox.js输出一个包。 测试-运行index.html并检查控制台以获取测试结果。
Angular8通过npm引入Mapbox GL 和 Ant L7
hequhecong10857的博客
06-10 806
ERROR in node_modules/@antv/l7-core/es/services/asset/IIconService.d.ts(1,8): error TS1259: Module '"/node_modules/eventemitter3/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag node_modules/@antv/l7-map/es/geo/trans..
Vue集成three.js，加载glb、gltf类型的3d模型
最新发布
唐僧洗头用飘柔
04-24 1173
你好！这是你第一次使用所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
vue + mapbox 通过genjson数据加载3D建筑模型
wjm0519的博客
10-29 1829
1.代码 <template> <div> <div id="map"></div> </div> </template> <script> import mapboxgl from 'mapbox-gl' // import * as THREE from 'three' // import { GLTFLoader } from 'three/examples/jsm/loaders/G.
Vue3 创建mapbox
weixin_58557797的博客
08-25 581
vue3+ts 加载mapbox，mapbox+WMTS
mapbox 地图样式规范
qq_42038997的博客
09-26 965
Mapbox 样式文件定义的是地图所呈现的视觉外观，包括：需要绘制哪些数据、绘制的顺序、以及绘制数据时如何进行符号化。样式文档是以 JSON对象中的属性字段进行组织的。
vue-mapbox-gl:Mapbox GL JS的Vue.js组件
05-06
安装纱yarn add mapbox-gl-vueNPM npm install mapbox-gl-vue --save 从下载最新的vue-mapbox-gl.min.js 使用[removed]标记包括< script src =" vue-mapbox-gl.min.js " > </ script > 包括Mapbox GL JS...
vue-mapbox：用于与mapbox-gl-js交互的Vuejs 2组件
02-06
Vue-mapbox是Mapbox GL JS库的包装，该库提供了与地图交互的途径。 尺寸 缩小并压缩至约15 kB 浏览器兼容性 快来了 发展历程 git clone git@github.com:soal/vue-mapbox.git cd vue-mapbox npm install 在开发人员...
v-mapbox-docs：使用Vue 3构建的v-mapbox v2.0的文档站点
02-22
v-mapbox的文档网站 设置 安装依赖项： npm run install 发展 npm run dev 静态生成 这将创建dist/目录以发布到静态主机： npm run generate 要预览静态生成的应用，请运行npm run start 有关工作原理的详细说明...
mapbox-gl-draw:mapbox-gl-js的绘图工具
04-30
兼容版本记录在package.json中在NPM上，此软件包最近已从mapbox-gl-draw移至@mapbox/mapbox-gl-draw正在安装npm install @mapbox/mapbox-gl-drawDraw随CSS一起提供，请确保将其包含在构建中。打字稿Typescript定义...
vue-mapboxgl-components:基于 Vue 和 mapbox-gl 的地理信息可视化组件库
05-06
npm i vue-mapboxgl-components --save 或者通过 yarn 添加依赖 yarn add vue-mapboxgl-components 引入 在 Vue 项目的 main.js 中写入以下内容： import Vue from 'vue' <!-- 引入组件JavaScript文件 --> ...
mapbox搭载vue3测试demo 总共20个具体案例
05-30
mapbox搭载vue3测试demo 总共20个具体案例 1、[行政边界查询地址](https://lbs.amap.com/demo/javascript-api/example/district-search/draw-district-boundaries) 2、[坐标拾取系统地址](http://api.map.baidu.com/lbsapi/getpoint/)
mapbox-plugins：定制的Mapbox插件，包括游戏控件，canvasOverlayer和场景动画。 使用ES6
02-05
Mapbox插件 定制的Mapbox插件，包括游戏控件，canvasOverlayer，场景动画 有关更详细的Wiki，请阅读问题博客： 注意：请使用HTTPS访问所有演示。 画布线条样式，可以集成到任何地图/图表库中。 :backhand_index_pointing_up: 从高度图像中对地形数据进行体素化。 :backhand_index_pointing_up: 挤出台风雷达图像。 :backhand_index_pointing_up: 动画线/粒子系统。 在线演示 演示版 码 安装和使用 npm我mapbox-plugins 对于node.js： var Mapbox = require('mapbox-plugins') console.warn(Mapbox.Config); 对于es6开发，更常见的是： import
mapbox在Vue框架中对three.js的应用
张志强的博客
06-06 1445
我们了解了如何设置Mapbox和Three.js，如何在Vue组件中使用它们，并提供了一些示例代码来演示如何将它们结合起来。我们将介绍如何设置Mapbox和Three.js，如何在Vue组件中使用它们，并提供一些示例代码来演示如何将它们结合起来。我们还创建了一个Three.js场景，摄像机，控制器和灯光。在这个示例中，我们创建了一个Vue组件，它包含一个Mapbox地图和一个Three.js场景。在这个示例中，我们设置了Mapbox的访问令牌，创建了一个地图容器，并将其添加到Vue组件中。
mapbox-gl中three.js对象的位置
地理信息技术杂谈 博客，欢迎技术交流
08-10 1229
mapbox-gl中集成three.js参见公众号文章：mapbox-gl集成three.js开发 官方示例中，mapbox-gl集成three.js，是将three.js加载的对象放置在设置的参考坐标中心点，在开发过程中，有时需要在three.js，依据不同位置，放置多个模型对象，或者其他three.js对象，这就需要计算每个对象的位置信息了。 mapbox-gl基础操作坐标是经纬度，three.js中常用的坐标设置单位是米，所以，根据每个模型对象的实际位置（经纬度），要进行一步转换，计算出模型距离设置的
vue3中使用mapbox
qq_45120080的博客
03-07 948
最好是申请一个令牌，大部分mapbox自带的功能在使用时都需要有令牌。例如（自定义地图样式）npm源: npm install mapbox-gl。yarn源: yarn add mapbox-gl。
MapBox&ThreeJS加载GLTF静态模型
GIS（地理信息系统）
02-22 931
MapBox&ThreeJS加载GLTF静态模型
vue + mapbox 通过geojson数据加载面
wjm0519的博客
10-28 2493
1.首先通过npm 安装mapbox-gl npm install mapbox-gl 2.页面代码 <template> <div> <div id="map"></div> </div> </template> <script> import mapboxgl from 'mapbox-gl' // import * as THREE from 'three' // import {
mapbox 在 vue2 中的使用
qq_45494569的博客
01-12 992
mapbox 在 vue 中的使用 加载天地图底图
vue mapbox
12-02
Vue Mapbox是一个基于Vue.js和Mapbox的地图组件库，它提供了一系列易于使用的组件和指令，可以帮助你快速构建交互式地图应用程序。下面是一个简单的示例，演示如何在Vue中使用Mapbox： 首先，安装Vue Mapbox： ```shell npm install vue-mapbox mapbox-gl --save ``` 然后，在Vue组件中引入Mapbox： ```vue <template> <div> <MglMap :accessToken="accessToken" :mapStyle.sync="mapStyle" :center.sync="center" :zoom.sync="zoom" > <MglNavigationControl /> <MglGeolocateControl /> <MglFullscreenControl /> </MglMap> </div> </template> <script> import { MglMap, MglNavigationControl, MglGeolocateControl, MglFullscreenControl } from 'vue-mapbox' import mapboxgl from 'mapbox-gl' export default { components: { MglMap, MglNavigationControl, MglGeolocateControl, MglFullscreenControl }, data () { return { accessToken: 'your-access-token', mapStyle: 'mapbox://styles/mapbox/streets-v11', center: [-122.4194, 37.7749], zoom: 12 } }, created () { mapboxgl.accessToken = this.accessToken } } </script> ``` 在上面的示例中，我们首先引入了Mapbox的地图组件，然后在Vue组件中使用这些组件来创建地图。我们还设置了一些地图的属性，例如地图样式、中心点和缩放级别。最后，我们将Mapbox的访问令牌设置为Vue组件的数据属性，以便在创建地图时使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值