vue + Leaflet加载天地图+加载wmts瓦片+动态绘制多边形+手摸手

青儿吖 青儿吖 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 4.2k累计阅读 4.2k平均单平台 已同步平台 CSDN 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄8年
关注
原创 2023-03-16 11:21:24 4.2k 阅读 AI 写同款· GEO 优化 ›
AI权益加码！Claude Code、Cursor等20+工具免费用！ 购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！ 阅读详情

创作不易，喜欢的话，收藏+关注鼓励一下我吧~

拆分解析：

npm install leaflet --save
npm install leaflet.wmts --save

main.js引入

//Leaflet全局配置
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet.wmts'
Vue.use(L)


<div id="viewDiv4" class="viewDiv"></div>

初始化地图

initLeaftMap() {
      // if (this.map) this.map.remove();
      this.map = null;
      this.removePolygon();//初始化polygon
      let longitude = 120.76;//经度
      let latitude = 30.86;//纬度
      let center = [latitude, longitude];
      //限制地图的拖动范围是正负90到正负180，这样才合理。
      var corner1 = L.latLng(-90, -180); //设置左上角经纬度
      var corner2 = L.latLng(90, 180);	//设置右下点经纬度
      var bounds = L.latLngBounds(corner1, corner2); //构建视图限制范
      //设置地图相关初始配置
      this.map = L.map("viewDiv4", {
        center: center,// 地图的初始地理中心 [纬度,经度]
        minZoom: 1,
        maxZoom: 20,
        zoom: 15, //初始地图缩放级别
        crs: L.CRS.EPSG4326,//设置坐标系4326
        scrollWheelZoom: true, //默认开启鼠标滚轮缩放
        zoomControl: false, //禁用 + - 按钮
        doubleClickZoom: false, // 禁用双击放大
        attributionControl: false, // 移除右下角leaflet标识
        maxBounds: bounds,
      });
      const TK_KEY = "c3ee6607def5247760aaaee6d01b13ae";
      // 底图
      const VEC_C = 'http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=';
      L.tileLayer(VEC_C + TK_KEY, {
        maxZoom: 20,
        tileSize: 256,
        zoomOffset: 1,
      }, {noWrap: true}).addTo(this.map);
      this.map.on('mousemove', (e) => {
        this.map.wrapLatLng(e.latlng)
        let trueLatLng = this.map.wrapLatLng(e.latlng);
        let currentLongitude = '';//经度
        let currentLatitude = '';//纬度
        currentLongitude = trueLatLng.lng;
        currentLatitude = trueLatLng.lat;
        this.currentLongitude = currentLongitude;
        this.currentLatitude = currentLatitude;
      });
    },

项目要求实现下图所示的效果，底图使用天地图的卫星图，点击绘制多边形，绘制好点击运行 请求都断接口，接口返回如下的data,用data的数据请求瓦片信息，然后将请求的瓦片显示在地图上，

{
code:200
data:"http://51.241.201.111:9000/geoserver/test_ydp/gwc/service/wmts?layer=test_ydp:ndviT51RTQ_20250128T023951876dbfac-8819-4489-ba25-018850812077"
message:"success"
}

效果如下图所示：
在这里插入图片描述

上图所示功能完整代码如下：

<template>
  <div class="showslicecacheMapCtn4">
    <div class="txt1">在地图绘制多边形,双击结束自动生成</div>
    <div class="showslicecacheMapCtn">
      <div id="viewDiv4" class="viewDiv">
      </div>
      <div class="latlon" v-if="currentLongitude">经度:{{ currentLongitude.toFixed(2) }},纬度:{{
          currentLatitude.toFixed(2)
        }}
      </div>
      <el-select v-model="timeValue" placeholder="请选择时间">
        <el-option
            v-for="item in timeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="timediv2 runCtn">
      <div class="txt">时间：</div>
      <el-date-picker
          v-model="time2"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间">
      </el-date-picker>
      <div class="btn2">
        <el-button type="primary" @click="createFace">绘制多边形</el-button>
        <el-button type="primary" @click="removePolygon">删除多边形</el-button>
        <el-button type="primary" @click="runBtn" :loading="isRes">运行</el-button>
      </div>
    </div>
    <div class="runCtn">
      <div  class="btnctn">
        <div  class="paddingLeft20">
          <el-button type="primary" @click="closeAllBtn">全部折叠</el-button>
        </div>
        <div  class="paddingLeft20">
          <el-button type="primary" @click="expandBtn">全部展开</el-button>
        </div>
        <div class="clearCtn">
          <el-button type="primary" @click="clearBtn">清空</el-button>
        </div>
      </div>
    </div>
    <div>
      <json-viewer
          v-if="isShowjsonViewer"
          ref="jsonref"
          :value="resData1"
          style="width: 100%; min-width: 3.125rem"
          :expand-depth="expandVal"
          copyable
          expanded
          boxed
          sort
      ></json-viewer>
    </div>
  </div>
</template>

<script>
import eventBus from "@/plugins/eventBus";
import {get_wrap_data} from "@/api/api2";
import VueJsonPretty from 'vue-json-pretty/lib/vue-json-pretty.js'
import 'vue-json-pretty/lib/styles.css';
export default {
  name: "showslicecacheMap3",
  components: { VueJsonPretty},
  data() {
    return {
      isRes: false,
      markerpoint: [],//保存点的标记
      time2: '2023-02-02 00:00:00',//日期 给定默认时间
      currentLongitude: '',//经度
      currentLatitude: '',//纬度
      map: {},//地图
      polygonPointArr: [],//所有多边形经纬度集合
      TIME: '',
      /** 定义保存面的相关变量 **/
      points: [], // 画的过程中的点
      lines: {}, // 画的过程中生成的多边形
      tempLines: {}, // 鼠标移动中生成的多边形（实际是一条线段）
      polygonList: {}, // 双击结束生成多边形
      facelines: [], // 存储画的多边形
      facetempLines: [], // 存储移动的多边形
      facepolygonList: [], // 存储结束生成的多边形
      isShowjsonViewer: true,
      isAllUnfold: false,//默认不是全部展开
      expandVal: 2,
      resData1: {},
      timeOptions: [{
        value: '20230128',
        label: '20230128'
      }, {
        value: '20230120',
        label: '20230120'
      }, {
        value: '20230129',
        label: '20230129'
      }],
      timeValue: ''
    }
  },
  created() {
    eventBus.$on('emitinitLeaftMapFn4_1', () => {
      this.initLeaftMap();
    });
    eventBus.$on('emitinitLeaftMapFn4_2', () => {
      this.initPageFn();
    });
  },
  beforeDestroy() {
    eventBus.$off("emitinitLeaftMapFn4_1");
  },
  methods: {
    runBtn() {
      let polygonPointArr = this.polygonPointArr;
      if (polygonPointArr.length < 1) {
        this.$message({
          type: 'warning',
          message: '请画多边形 再请求'
        });
        return false;
      }
      let tempArrAll = [];//经纬度调换位置后存放
      polygonPointArr.forEach(item1 => {
        let tempArrSm = []
        item1.forEach(item2 => {
          tempArrSm.push([item2[1], item2[0]])
        });
        tempArrAll.push(tempArrSm);
      });
      let tempFeaturesArr = [];
      tempArrAll.forEach(item => {
        tempFeaturesArr.push(
            {
              "type": "Feature",
              "properties": {},
              "geometry": {
                "type": "Polygon",
                "coordinates": [item]
              }
            }
        )
      });
      let time2 = this.time2;
      //时间非空判断
      if (time2 == null || time2 == '') {
        this.$message({
          type: 'warning',
          message: '请选择时间'
        });
        return false;
      }
      let objs = {
        "type": "FeatureCollection",
        "time": time2,
        "crs": {
          "type": "name",
          "properties": {"name": "urn:ogc:def:crs:OGC:1.3:CRS84"}
        },
        "features": tempFeaturesArr
      }
      let tempobj = {
        geoJson: objs
      }
      this.isRes = true;
      get_wrap_data(tempobj).then(result => {
        this.isRes = false;
        if (result) {
          this.polygonPointArr=[];//清空之前请求所用的 所有多边形经纬度集合
          this.resData1 = result;
          const {data, code, msg} = result;
          if (code == 200) {
            this.isShowjsonViewer = true;
            this.isAllUnfold = false;
            this.expandVal = 2;
            this.addLayerFn(data);
            this.$message({
              type: 'info',
              message: '多边形保存成功' //
            });
          }
        }
      }).catch(err => {
        this.isRes = false;
        this.polygonPointArr=[];//清空之前请求所用的 所有多边形经纬度集合
        this.resData1 = {};
      });
    },
    // 2. 绘制多边形
    createFace() {
      this.$message.success('请在地图绘制多边形,双击结束自动生成')
      this.lines = L.polyline([], {color: '#fc6a00', fillColor: '#fc6a00', fillOpacity: 0.0001})
      this.tempLines = L.polyline([], {color: '#fc6a00', fillColor: '#fc6a00', fillOpacity: 0.0001})
      this.map.addLayer(this.lines)
      this.map.addLayer(this.tempLines)

      this.map.on('click', e => {
        this.points.push([e.latlng.lat, e.latlng.lng])
        this.lines.addLatLng(e.latlng)
        this.map.addLayer(this.lines)
        this.facelines.push(this.lines)
      })
      this.map.on('mousemove', e => {
        if (this.points.length > 0) {
          this.tempLines.setLatLngs([this.points[this.points.length - 1], [e.latlng.lat, e.latlng.lng]])
          this.map.addLayer(this.tempLines)
          this.facetempLines.push(this.tempLines)
        }
      })
      this.map.on('dblclick', e => {
        this.polygonList = L.polygon([this.points], {
          color: '#fc6a00',
          fillColor: '#fc6a00',
          fillOpacity: 0.0001,
          id: this.getUUid()
        }).addTo(this.map);
        this.map.addLayer(this.polygonList);
        this.facepolygonList.push(this.polygonList);
        let points = this.points;
        //数组pop方法 ， 删除数组的最后一位 并返回 会修改原数组
        let polygonPoint = [points.pop()].concat(points);
        //最少是个三角形
        if (polygonPoint.length > 3) {
          this.polygonPointArr.push(polygonPoint);
        }
        this.points = [];
        this.lines.setLatLngs([]);
        this.map.off('click');
      })
    },
    removePolygon() {
      this.points.forEach(item => {
        this.map.removeLayer(item);
      });
      this.facelines.forEach(item => {
        this.map.removeLayer(item);
      });
      this.facetempLines.forEach(item => {
        this.map.removeLayer(item);
      });
      this.facepolygonList.forEach(item => {
        this.map.removeLayer(item);
      });
      this.points = [];
      this.facelines = [];
      this.facetempLines = [];
      this.facepolygonList = [];
      this.polygonPointArr = [];
    },
    initLeaftMap() {
      // if (this.map) this.map.remove();
      this.map = null;
      this.removePolygon();//初始化polygon
      let longitude = 120.76;//经度
      let latitude = 30.86;//纬度
      let center = [latitude, longitude];
      //限制地图的拖动范围是正负90到正负180，这样才合理。
      var corner1 = L.latLng(-90, -180); //设置左上角经纬度
      var corner2 = L.latLng(90, 180);	//设置右下点经纬度
      var bounds = L.latLngBounds(corner1, corner2); //构建视图限制范
      //设置地图相关初始配置
      this.map = L.map("viewDiv4", {
        center: center,// 地图的初始地理中心 [纬度,经度]
        minZoom: 1,
        maxZoom: 20,
        zoom: 15, //初始地图缩放级别
        crs: L.CRS.EPSG4326,//设置坐标系4326
        scrollWheelZoom: true, //默认开启鼠标滚轮缩放
        zoomControl: false, //禁用 + - 按钮
        doubleClickZoom: false, // 禁用双击放大
        attributionControl: false, // 移除右下角leaflet标识
        maxBounds: bounds,
      });
      const TK_KEY = "天地图的key";
      // 底图
      const VEC_C = 'http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=';
      L.tileLayer(VEC_C + TK_KEY, {
        maxZoom: 20,
        tileSize: 256,
        zoomOffset: 1,
      }, {noWrap: true}).addTo(this.map);
      this.map.on('mousemove', (e) => {
        this.map.wrapLatLng(e.latlng)
        let trueLatLng = this.map.wrapLatLng(e.latlng);
        let currentLongitude = '';//经度
        let currentLatitude = '';//纬度
        currentLongitude = trueLatLng.lng;
        currentLatitude = trueLatLng.lat;
        this.currentLongitude = currentLongitude;
        this.currentLatitude = currentLatitude;
      });
    },
    //增加图层
    addLayerFn(data) {
      let url = data;
      let idx = url.indexOf('?');
      let domain = url.slice(0, idx);
      let layer = url.slice(idx + 7);
      //设置地图可以进行0-22的等级缩放
      var matrixIds = [];
      for (var i = 0; i < 22; ++i) {
        matrixIds[i] = {
          identifier: "" + i,
          topLeftCorner: new L.LatLng(90, -180)
        };
      }
      //设置地图wmts瓦片地图加载配置
      var urlMap = domain;//瓦片地图地址
      var wmtsOptionsMap = {
        layer: layer,//瓦片地图名称
        tilematrixSet: "EPSG:4326",//GeoServer使用的网格名称
        tileSize: 256,//切片大小
        service: 'WMTS',
        format: 'image/png',//瓦片图格式
        matrixIds: matrixIds,//可缩放
        noWrap: true,//不重复
      }
      var wmtsMap = new L.TileLayer.WMTS(urlMap, wmtsOptionsMap);
      this.map.addLayer(wmtsMap);
    },
    initPageFn() {
      this.removePolygon();
    },
    //全部展开
    expandBtn() {
      if (!this.isAllUnfold) {
        this.isShowjsonViewer = false
        this.isAllUnfold = true;
      }
      this.expandVal = 10;
      this.$nextTick(() => {
        this.isShowjsonViewer = true
      })
    },
    //全部折叠
    closeAllBtn() {
      this.isAllUnfold = false;
      this.isShowjsonViewer = false;
      this.expandVal = 0;
      this.$nextTick(() => {
        this.isShowjsonViewer = true;
      })
    },
    clearBtn() {
      this.resData1 = {}
    },
  }
}
</script>

<style lang="scss">
.showslicecacheMapCtn4 {
  .txt1 {
    padding-bottom: 10px;
    padding-top: 10px;
  }

  .showslicecacheMapCtn {
    position: relative;
    width: 750px;
    height: 460px;
    .viewDiv {
      z-index: 1;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      border-radius: 2px
    }


    .leaflet-container a.leaflet-popup-close-button {
      display: none;
    }

    .leaflet-touch .leaflet-control-attribution {
      //display: none;
    }

    .leaflet-popup-content {
      width: 100px;
    }

    .latlon {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 100;
      color: #0078A8;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 2px;
      padding-left: 5px;
      padding-right: 5px;
      font-size: 12px;
    }

  }
  .el-select{
    position: absolute;
    top: 0;
    z-index: 2;
    .el-input__inner{
      height: 30px;
      line-height: 30px;
      width: 131px;
    }
  }
}

</style>
收录于
vue

当前文章被收录于：

vue
11 篇文章 1 人学习
订阅专栏 查看详情
leaflet

当前文章被收录于：

leaflet
2 篇文章 0 人学习
订阅专栏 查看详情
天地图

当前文章被收录于：

天地图
2 篇文章 0 人学习
订阅专栏 查看详情
标签
#vue.js #javascript #前端
本内容遵循 CC 4.0 BY-SA 版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
leaflet讲解:vue中使用leaflet加载wmts瓦片地图（1） 哈喽大家好，很高兴在CSDN博客跟大家第一次见面。前几天做了一个基于leaflet加载wmts瓦片离线地图的项目。发现由于VUE最近的兴起leafle并没有根据vue中如何使用它的教程。这对于我们这些小白很不友好所以我准备在这里分几个步骤为大家讲解。 今天我们就来先尝试使用leaflet加载瓦片地图。 首页我们要在vue文件中安装leafle和leafle.wmts插件（注：leafle并不具备加载wmts功能） npm install leaflet --save npm install leaf. 阅读详情

相关推荐

Leaflet 加载天地图

leaflet加载天地图的矢量图和影像图

yb305 2876

leaflet1.3.1加载天地图WMTS影像（EPSG:4326）

leaflet1.3.1版本引用了leaflet-tilelayer-wmts.js做了修改可加载天地图WMTS影像（EPSG:4326）Demo

leaflet 使用 wmts

leaflet 使用 wmts一直做地图方面的页面开发，这次接到一个新需求，使用leaflet对接公司的WMTS服务。 开始干活，查看leaflet文档 http://leafletjs.com/examples/wms/wms.html，原生只支持WMS接入。于是想到了必然会有大牛添加leaflet编写支持WMTS的插件，在Plugins去找，果然: 根据插件demo，按需求写入参数

qq_37540634的博客 1万+

leaflet-wmts:leaflet 加载 WMTS 服务地图底图，如国内各级天地图服务

leaflet加载wmts图层 L.tileLayer.wmts("http://www.ais.msa.gov.cn/MapService",{ "layer": "default", "style": "default", "format": "image/png", "tilematrixSet": "advsea" //高级海图 advsea ,基础海陆混合 basicsearoad ,高级海陆混合 advsearoad }).addTo(map); 其他 更多Leaflet示例请点击：

使用 Leaflet 加载 WMTS 数据并显示图形

Leaflet 是一款轻量级的 JavaScript 地图库，它提供了丰富的地图交互功能和高度可定制的样式，是开发者常用的工具之一。然而，在使用 Leaflet 加载 WMTS（Web Map Tile Service）数据时，可能会遇到一些问题，本文将对其中的 bug 进行解决。通过引入 Leaflet 库和相应的 CSS 文件，定义加载 WMTS 图层的函数，并在 Leaflet 地图中添加该图层，我们可以实现地图的可视化展示。同时，确保遵守相关的法律法规，并尊重地图数据提供方的服务协议。

laugh666的博客 1746

leaflet加载本地Geoserver发布的WMTS

原生leaflet不支持 wmts 图层，需要到插件库中选则需要的 wmts 图层插件类型。可以到 leaflet 官网上查找需要的插件。也可以在官网上搜索关键词找到相关插件。: github 上的项目可以在 npm 上找到对应的项目， 可以通过如安装对应的包。

qq_38436431的博客 3405

Leaflet加载geowebcache的WMTS服务

leaflet加载WMTS服务

shanshanqwertyuiop的博客 1093

海图文件API： WMTS 地图瓦片获取

ECDIS（Electronic Chart Display and Information System）是指符合有关国际标准的船用电子海图系统。船位监控： 把本船的位置、所处的静态环境、周围的动态目标信息显示在一个屏幕上，使得船舶驾驶员能够迅速地获取所有这些信息，及时地做出操船决策。leaflet加载天地图：卫星底图（影像图层） 和 路网底图（矢量图层）【天地图API升级，解决504问题】WMTS 标准图层是用于加载 OGC 标准的 WMTS 地图服务的一种图层类。

专注于计算机研发知识和资讯分享 765

ECDIS（Electronic Chart Display and Information System）是指符合有关国际标准的船用电子海图系统

WMTS 标准图层是用于加载 OGC 标准的 WMTS 地图服务的一种图层类，自 v1.4.3 新增，仅支持 EPSG3857 坐标系统的 WMTS 图层。技术方案： 本地GeoServer +vue + Leaflet加载地图+加载wmts矢量瓦片+动态绘制多边形。也可以在 npm 官网上搜索关键词 leaflet-wmts ， leaflet-wmts 找到相关插件。原生leaflet不支持 wmts 图层，需要到插件库中选则需要的 wmts 图层插件类型。支持引入非高德官方的栅格图片图层。

专注于计算机研发知识和资讯分享 1161

GeoServer GIS 服务器（geoServer离线地图服务器搭建）

tomcat是支持war包部署的，将下载的zip文件解压，把geoserver.war包拿出来扔到comcat --> webapps下，启动tomcat服务即可，由于我前面把tomcat端口修改为60005，访问时在浏览器输入。不利于存储，比较占内存。该组织发布了一个坐标参照系统的数据集，并维护坐标参照系统的数据集参数，以及坐标转换描述，数据集对全球收录到的坐标参照系统进行了编码。点击工作区，点击添加新的工作区填写工作区名称，命名空间url地址，这个地址在地图发布后可以调用不同的图层，一定要填写。

专注于计算机研发知识和资讯分享 1525

Leaflet加载天地图

Leaflet加载天地图

liuchao的博客 3202

leaflet 加载天地图及坐标系设置

【代码】leaflet 加载天地图（卫星图 路网图）

qq_37550440的博客 3417

leaflet：入门基础（三）之加载数据

前言 上一篇 leaflet：入门基础（二） 讲了如何加载底图 这一篇将讲解如何加载自己已有的数据（未更完 1：加载Geojson数据 需要的数据：一个geojson数据（可以是点/线/面 注：如果手上有shp数据，可以通过https://mapshaper.org/转换得到geojson数据（使用说明[链接]） var map = new L.Map('map', { center: new L.LatLng(39.86,116...

Puzzle的博客 1万+

Leaflet加载WMTS数据并显示图形，解决leaflet.TileLayer.WMTS的问题

在Leaflet中，TileLayer用于加载和显示瓦片地图。在本文中，我们将探讨如何加载WMTS数据并在Leaflet中显示图形。以上就是加载WMTS数据并在Leaflet中显示图形的方法。通过自定义扩展Leaflet.TileLayer，我们能够充分利用Leaflet库的功能来处理WMTS数据源。在创建图层实例时，我们需要提供WMTS数据源的URL、图层名称以及TileMatrixSet名称。Leaflet加载WMTS数据并显示图形，解决leaflet.TileLayer.WMTS的问题。

ByteZenith的博客 950

leaflet加载天地图、叠加2000坐标wmts服务

Leaflet加载天地图、叠加2000坐标的wmts服务

weixin_38738760的博客 3242

vue使用leaflet加载高德/天地图

vue使用leafletvue使用leaflet vue使用leaflet npm安装leaflet依赖 npm install leaflet 新建vue页面，在页面中局部使用leaflet（不在main.js中设置全局使用） <template> <div class="leaflet"> <div class="container"> <div id="map" class="map"></div> &

furenqiang的博客 1万+

leaflet加载天地图

leaflet是一个轻量级的并且开源的地图框架，是由esri发起的，由于其轻量、简单而被大家喜欢，本文带你学习如何在leaflet中加载天地图。

LZUGIS 1万+

leaflet加载天地图：卫星底图（影像图层） 和 路网底图（矢量图层）

基于天地图使用Leaflet.js进行WebGIS开发，依赖天地图，我们可以实现不同的底图的在线切换，还能实现根据中文地名查找其对应的经纬度信息并且在地图上进行展示。使用Leaflet开发一个加载天地图影像底图和影像文字标注，在地图的基础之上实现一个全国范围内的地名地址检索。自己没有对应的地图服务器和地理查询服务器的时候，使用天地图来实现业务的快速支撑。底图通过辅助的注记信息，让我们在地图的展示时更加的友好和明确，能抓住地图的重点。不同的账号类型的访问限制策略（配额）

专注于计算机研发知识和资讯分享 2277
上一篇： vue-json-viewer展示json格式代码数据详解
下一篇： vue+leaflet动态画圆 并且显示geojson数据点，给点绑定点击事件完整代码
点赞 2
评论 0
书签 书签 12
青儿吖
青儿吖
博客等级 码龄8年 8粉丝 19原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

青儿吖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值