Cesium快速入门到精通系列教程一：打造第一个Cesium应用

news2025/6/5 10:33:54

一、打造第一个Cesium应用

1、官方渠道下载Cesium（可选择历史版本）

​​GitHub Releases页面​​：https://github.com/CesiumGS/cesium/releases

访问 Cesium GitHub Releases，此处列出了所有正式发布的版本。

通过标签（如 v1.95.0）选择目标版本，下载对应的压缩包（包含源码、构建文件和网页）。

​​优势​​：获取官方认证版本，附带完整变更日志和修复记录。

2、下载解压后依次执行以下命令，可以在本地运行Cesium：

yarn install
yarn start

3、Vue3中使用Cesium：

npm create vue@latest #安装当前最新版本的Vue3
cd cesium1.93 
npm install
npm i cesium@1.93 #安装cesium1.93

 以上命令执行完成后，将node_modules中cesium的以下四个目录复制到public目录：

另外，将node_modules中cesium的Widgets目录复制到src目录： 

App.vue中代码如下：

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
Cesium.Ion.defaultAccessToken = '你的AccessTokens';
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";

window.CESIUM_BASE_URL = "/"; // 设置Cesium静态资源路径（public目录）

onMounted(() => {
  const viewer = new Cesium.Viewer("cesiumContainer");

})

</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}

#cesiumContainer{
  width: 100wh;
  height: 100vh;
}
</style>

cmd中执行

npm run dev

二、Cesium基础设置：

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MzFiNGJmOS1jYzBmLTQyYjYtOTNhOS0wMThjZWE3YzM0MGMiLCJpZCI6MjU5MTEyLCJpYXQiOjE3MzI5NzM5MzB9.RUpB02gjxFwpqmbND4OKWyR7-VntYuohtjlXklFB6UE'
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";

window.CESIUM_BASE_URL = "/"; // 设置Cesium静态资源路径（public目录）

// 设置Cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.5, // 西边经度
  20.4, // 南边维度
  110.4, // 东边经度
  61.2) // 北边维度

onMounted(() => {
  const viewer = new Cesium.Viewer("cesiumContainer");
  viewer.cesiumWidget.creditContainer.style.display = "none"; // 隐藏logo
})

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

#cesiumContainer {
  width: 100wh;
  height: 100vh;
}
</style>

// 设置Cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.5, // 西边经度
  20.4, // 南边维度
  110.4, // 东边经度
  61.2) // 北边维度
viewer.cesiumWidget.creditContainer.style.display = "none"; // 隐藏logo

三、viewer查看器设置

  const viewer = new Cesium.Viewer("cesiumContainer", {
    geocoder: false, //设置搜索框是否可见
    homeButton: false, // 返回初始位置键是否可见
    sceneModePicker: false, // 查看器选择模式选择键是否可见
    baseLayerPicker: false, // 图层选择键是否可见
    navigationHelpButton: false, // 帮助按钮是否可见
    animation: false, // 播放控制按钮是否可见
    timeline: false, // 时间轴是否可见
    fullscreenButton: false, // 全屏按钮是否可见
  });

四、Cesium自定义地图与地图叠加

1、天地图加载

天地图是中国国家基础地理信息系统，由中国测绘地理信息局和国家地理信息公共服务平台共同开发和运营。它提供多项地理信息服务，包括地图数据、地理编码、路径规划以及地理搜索等。天地图的目标是为各行业提供高质量、全面的地理信息数据和解决方案。

天地图调用申请：

登录已有账号。如果尚未注册，请先进行注册。

访问天地图首页，进入开发资源，然后点击地图API。

在地图API页面，点击申请Key。

选择“创建新应用”，并填写应用的详细信息。

申请完成后，您可以查看新应用的Key。

在服务调用时，请使用刚刚申请到的Key作为Token。

天地图影像加载：

中国的天地图（Tianditu）提供了丰富的影像与矢量数据，通过 Cesium 可以轻松地将天地图的服务加载到三维地球中。下面是如何加载天地图的矢量图层、影像图层及其注记图层的示例。

矢量底图：

  const MAP_KEY = '你的天地图访问密钥';
  const viewer = new Cesium.Viewer("cesiumContainer", {
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + MAP_KEY,
      layer: "tdtVecBasicLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible"
    })
  });

矢量注记：

  const MAP_KEY = '你的天地图访问密钥';
  const viewer = new Cesium.Viewer("cesiumContainer", {
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      url: "http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + MAP_KEY,
      layer: "tdtAnnoLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible"
    })
  });

影像底图：

  const MAP_KEY = '你的天地图访问密钥';
  const viewer = new Cesium.Viewer("cesiumContainer", {
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + MAP_KEY,
      layer: "tdtBasicLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible"
    })
  });

影像注记：

  const MAP_KEY = '你的天地图访问密钥';
  const viewer = new Cesium.Viewer("cesiumContainer", {
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + MAP_KEY,
      layer: "tdtAnnoLayer",
      style: "default",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible"
    })
  });

使用 Cesium.WebMapTileServiceImageryProvider 类来添加一个WMTS（Web Map Tile Service）图层。具体配置包括：

  • url：指定底图的服务地址，这里我们使用天地图提供的矢量服务。
  • layer：图层的名称。
  • style：图层样式，这里使用默认样式。
  • format：指定图块格式为JPEG。
  • tileMatrixSetID：使用Google Maps兼容的平铺矩阵集。

该配置将返回一个矢量底图，可以在Cesium视图中进行渲染。

调整色调和对比度：

为了创建一个视觉上更具冲击力的暗黑色系效果，我们对底图的色调和对比度进行了调整：

imagery.hue = 3; // 图层色调  
imagery.contrast = -1.2; // 图层对比度
  • imagery.hue：此属性用于调整底图的色调。例如设置为3可能会使颜色偏向于蓝色或绿色，具体效果依赖于底图的原始色调。
  • imagery.contrast：此属性设置对比度。负值（如-1.2）会降低对比度，使图像的颜色更加柔和，并增强暗色区域的细节，从而使底图视觉上更加协调和沉稳。

2、高德地图加载

在 Cesium 中加载高德地图作为底图，可以通过配置 Cesium 的 ImageryProvider 来实现。高德地图提供了多种图层服务：

加载高德地图矢量图层

// 创建高德地图矢量图层
const gaodeVector = new Cesium.UrlTemplateImageryProvider({
    url: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    subdomains: ['1', '2', '3', '4'],
    maximumLevel: 19,
    credit: '高德地图'
});

// 添加到地图
viewer.imageryLayers.addImageryProvider(gaodeVector);

加载高德地图影像图层

// 创建高德地图影像图层
const gaodeImagery = new Cesium.UrlTemplateImageryProvider({
    url: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    subdomains: ['1', '2', '3', '4'],
    maximumLevel: 19,
    credit: '高德地图'
});

// 添加到地图
viewer.imageryLayers.addImageryProvider(gaodeImagery);

加载高德地图标注图层

标注图层通常需要叠加在矢量或影像图层之上：

// 创建高德地图标注图层
const gaodeLabels = new Cesium.UrlTemplateImageryProvider({
    url: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
    subdomains: ['1', '2', '3', '4'],
    maximumLevel: 19,
    credit: '高德地图'
});

// 添加到地图（通常叠加在影像图层之上）
viewer.imageryLayers.addImageryProvider(gaodeLabels);

完整示例代码

下面是一个完整的示例，展示如何在 Cesium 中同时加载高德地图的影像图层和标注图层：

onMounted(() => {
  const MAP_KEY = '你的Cesium token';
  const viewer = new Cesium.Viewer("cesiumContainer", {
    geocoder: false, //设置搜索框可见
    homeButton: false, // 返回初始位置键是否可见
    sceneModePicker: false, // 查看器选择模式选择键是否可见
    baseLayerPicker: false, // 图层选择键是否可见
    navigationHelpButton: false, // 是否显示帮助按钮
    animation: false, // 是否显示播放控制按钮
    timeline: false, // 是否显示时间轴
    fullscreenButton: false, // 是否显示全屏按钮
  })

  // 移除默认图层
  viewer.imageryLayers.removeAll();

  // 创建高德地图影像图层
  const gaodeImagery = new Cesium.UrlTemplateImageryProvider({
    url: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    subdomains: ['1', '2', '3', '4'],
    maximumLevel: 19,
    credit: '高德地图'
  });

  // 创建高德地图标注图层
  const gaodeLabels = new Cesium.UrlTemplateImageryProvider({
    url: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
    subdomains: ['1', '2', '3', '4'],
    maximumLevel: 19,
    credit: '高德地图'
  });

  // 添加图层到地图
  viewer.imageryLayers.addImageryProvider(gaodeImagery);
  viewer.imageryLayers.addImageryProvider(gaodeLabels);

  viewer.cesiumWidget.creditContainer.style.display = "none"; // 隐藏logo
});

3、地图叠加

多源影像图层叠加​​

onMounted(() => {
  const MAP_KEY = '天地图MAP_KEY';
  const viewer = new Cesium.Viewer("cesiumContainer", {
    geocoder: false, //设置搜索框可见
    homeButton: false, // 返回初始位置键是否可见
    sceneModePicker: false, // 查看器选择模式选择键是否可见
    baseLayerPicker: false, // 图层选择键是否可见
    navigationHelpButton: false, // 是否显示帮助按钮
    animation: false, // 是否显示播放控制按钮
    timeline: false, // 是否显示时间轴
    fullscreenButton: false, // 是否显示全屏按钮
  });

  // 加载高德矢量地图
const amapLayer = new Cesium.UrlTemplateImageryProvider({
    url: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    subdomains: ['1', '2', '3', '4'],
    maximumLevel: 19,
    credit: '高德地图'
});

// 加载天地图卫星影像
const tiandituLayer = new Cesium.WebMapTileServiceImageryProvider({
  url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + MAP_KEY,
  layer: "tdtImgBasicLayer",
  style: "default",
  format: "image/jpeg",
  tileMatrixSetID: "GoogleMapsCompatible"
});

// 添加到图层集合
viewer.imageryLayers.addImageryProvider(amapLayer);
viewer.imageryLayers.addImageryProvider(tiandituLayer);

  viewer.cesiumWidget.creditContainer.style.display = "none"; // 隐藏logo
})

通过viewer.imageryLayers数组顺序控制图层叠加层级，后添加的图层显示在最上层。

控制图层顺序和透明度

onMounted(() => {
  const viewer = new Cesium.Viewer("cesiumContainer", {
    geocoder: false, //设置搜索框可见
    homeButton: false, // 返回初始位置键是否可见
    sceneModePicker: false, // 查看器选择模式选择键是否可见
    baseLayerPicker: false, // 图层选择键是否可见
    navigationHelpButton: false, // 是否显示帮助按钮
    animation: false, // 是否显示播放控制按钮
    timeline: false, // 是否显示时间轴
    fullscreenButton: false, // 是否显示全屏按钮
  });

  // 移除默认图层
  viewer.imageryLayers.removeAll();

  // 添加高德地图矢量图层
  const gaodeVector = new Cesium.UrlTemplateImageryProvider({
    url: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    subdomains: ['1', '2', '3', '4'],
    maximumLevel: 19,
    credit: '高德地图'
  });
  viewer.imageryLayers.addImageryProvider(gaodeVector);

  // 添加高德地图标注图层（叠加在矢量图层之上）
  const gaodeLabels = new Cesium.UrlTemplateImageryProvider({
    url: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
    subdomains: ['1', '2', '3', '4'],
    maximumLevel: 19,
    credit: '高德地图'
  });
  const layer2 = viewer.imageryLayers.addImageryProvider(gaodeLabels);

  const layers = viewer.imageryLayers;

  // 设置图层透明度（0.0完全透明，1.0完全不透明）
  const layer = layers.get(0);  // 获取第二个图层
  layer.alpha = 0.2;  // 设置70%透明度

  // 或者
  // layer2.alpha = 0.2;
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2397568.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

力扣题解106：从中序与后序遍历序列构造二叉树

力扣题解106：从中序与后序遍历序列构造二叉树

一、题目内容 题目要求根据二叉树的中序遍历序列和后序遍历序列来重建二叉树。具体来说&#xff0c;我们需要利用中序遍历序列和后序遍历序列的特点&#xff0c;通过递归的方法逐步构建出完整的二叉树。 中序遍历序列的特点是&#xff1a;左子树 -> 根节点 -> 右子树。后…
阅读更多...
学习STC51单片机25（芯片为STC89C52RCRC）

学习STC51单片机25（芯片为STC89C52RCRC）

每日一言 生活就像弹簧&#xff0c;你弱它就强&#xff0c;你强它就弱&#xff0c;别轻易认输。 ESP8266作为路由器模式&#xff08;AP模式&#xff09;也就是在局域网内可以有服务器的作用 那么我们需要将pc作为设备进行连接ESP的发射出来的WIFE 叫做这个AI啥的 也有可能叫做…
阅读更多...
宁夏农业科技：创新引领，赋能现代农业新篇章

宁夏农业科技：创新引领，赋能现代农业新篇章

在广袤的宁夏大地上&#xff0c;农业科技如同一股强劲的春风&#xff0c;吹拂着每一寸土地&#xff0c;为宁夏的农业发展注入了新的活力与希望。近年来&#xff0c;宁夏农业科技以其独特的创新力和实践力&#xff0c;不断推动着现代农业的转型升级&#xff0c;让这片古老的土地…
阅读更多...
Accelerate 2025北亚巡展正式启航！AI智御全球·引领安全新时代

Accelerate 2025北亚巡展正式启航！AI智御全球·引领安全新时代

近日&#xff0c;网络安全行业年度盛会Accelerate 2025北亚巡展正式在深圳启航&#xff01;智库专家、产业领袖及Fortinet高管、产品技术团队和300余位行业客户齐聚一堂&#xff0c;围绕“AI智御全球引领安全新时代”主题&#xff0c;共同探讨AI时代网络安全新范式。大会聚焦三…
阅读更多...
005学生心理咨询评估系统技术解析：搭建科学心理评估平台

005学生心理咨询评估系统技术解析：搭建科学心理评估平台

学生心理咨询评估系统技术解析&#xff1a;搭建科学心理评估平台 在心理健康教育日益受重视的当下&#xff0c;学生心理咨询评估系统成为了解学生心理状态的重要工具。该系统涵盖试卷管理、试题管理等核心模块&#xff0c;面向管理员和用户两类角色&#xff0c;通过前台展示与…
阅读更多...
贪心算法应用：多重背包启发式问题详解

贪心算法应用：多重背包启发式问题详解

贪心算法应用&#xff1a;多重背包启发式问题详解 多重背包问题是经典的组合优化问题&#xff0c;也是贪心算法的重要应用场景。本文将全面深入地探讨Java中如何利用贪心算法解决多重背包问题。 多重背包问题定义 **多重背包问题(Multiple Knapsack Problem)**是背包问题的变…
阅读更多...
【保姆级教程】PDF批量转图文笔记

【保姆级教程】PDF批量转图文笔记

如果你有一个PDF文档&#xff0c;然后你想把它发成图文笔记emmm&#xff0c;最好再加个水印&#xff0c;你会怎么做&#xff1f; 其实也不麻烦&#xff0c;打开PDF文档&#xff0c;挨个截图&#xff0c;然后打开PS一张一张图片拖进去&#xff0c;再把水印图片拖进去&#xff0…
阅读更多...
数据库系统概论（十一）SQL 集合查询 超详细讲解（附带例题表格对比带你一步步掌握）

数据库系统概论（十一）SQL 集合查询 超详细讲解（附带例题表格对比带你一步步掌握）

数据库系统概论&#xff08;十一&#xff09;SQL 集合查询 超详细讲解&#xff08;附带例题表格对比带你一步步掌握&#xff09; 前言一、什么是集合查询&#xff1f;二、集合操作的三种类型1. 并操作2. 交操作3. 差操作 三、使用集合查询的前提条件四、常见问题与注意事项五、…
阅读更多...
clickhouse如何查看操作记录，从日志来查看写入是否成功

clickhouse如何查看操作记录，从日志来查看写入是否成功

背景 插入表数据后&#xff0c;因为原本表中就有数据&#xff0c;一时间没想到怎么查看插入是否成功&#xff0c;因为对数据源没有很多的了解&#xff0c;这时候就想怎么查看下插入是否成功呢&#xff0c;于是就有了以下方法 具体方法 根据操作类型查找&#xff0c;比如inse…
阅读更多...
5G-A：开启通信与行业变革的新时代

5G-A：开启通信与行业变革的新时代

最近&#xff0c;不少细心的用户发现手机信号标识悄然发生了变化&#xff0c;从熟悉的 “5G” 变成了 “5G-A”。这一小小的改变&#xff0c;却蕴含着通信技术领域的重大升级&#xff0c;预示着一个全新的通信时代正在向我们走来。今天&#xff0c;就让我们深入了解一下 5G-A&a…
阅读更多...
TDengine 集群运行监控

TDengine 集群运行监控

简介 为了确保集群稳定运行&#xff0c;TDengine 集成了多种监控指标收集机制&#xff0c;并通过 taosKeeper 进行汇总。taosKeeper 负责接收这些数据&#xff0c;并将其写入一个独立的 TDengine 实例中&#xff0c;该实例可以与被监控的 TDengine 集群保持独立。TDengine 中的…
阅读更多...
uniapp路由跳转toolbar页面

uniapp路由跳转toolbar页面

需要阅读uview-ui的API文档 注意需要使用type参数设置后才起作用 另外route跳转的页面会覆盖toolbar工具栏 toConternt(aid) {console.log(aid:, aid)this.$u.route({// url: "pages/yzpg/detail",url: "pages/yzappl/index",// url: "pages/ind…
阅读更多...
【linux】知识梳理

【linux】知识梳理

操作系统的分类 1. 桌⾯操作系统: Windows/macOS/Linux 2. 移动端操作系统: Android(安卓)/iOS(苹果) 3. 服务器操作系统: Linux/Windows Server 4. 嵌⼊式操作系统: Android(底层是 Linux) Liunx介绍 liunx系统:服务器端最常见的操作系统类型 发行版:Centos和Ubuntu 远程连接操…
阅读更多...
NodeMediaEdge快速上手

NodeMediaEdge快速上手

NodeMediaEdge快速上手 简介 NodeMediaEdge是一款部署在监控摄像机网络前端中&#xff0c;拉取Onvif或者rtsp/rtmp/http视频流并使用rtmp/kmp推送到公网流媒体服务器的工具。 通过云平台协议注册到NodeMediaServer后&#xff0c;可以同NodeMediaServer结合使用。使用图形化的…
阅读更多...
ChatOn：智能AI聊天助手，开启高效互动新时代

ChatOn：智能AI聊天助手，开启高效互动新时代

在当今快节奏的生活中&#xff0c;无论是工作、学习还是日常交流&#xff0c;我们常常需要快速获取信息、整理思路并高效完成任务。ChatOn 正是为满足这些需求而生&#xff0c;它基于先进的 ChatGPT 和 GPT-4o 技术&#xff0c;为用户提供市场上最优秀的中文 AI 聊天机器人。这…
阅读更多...
基于Vue3.0的【Vis.js】库基本使用教程（002）：图片知识图谱的基本构建和设置

基于Vue3.0的【Vis.js】库基本使用教程（002）：图片知识图谱的基本构建和设置

文章目录 3、图片知识图谱3.1 初始化图片知识图谱3.2 修改节点形状3.3 修改节点背景颜色3.4 完整代码下载3、图片知识图谱 3.1 初始化图片知识图谱 1️⃣效果预览： 2️⃣关键代码： 给节点添加image属性： const nodes = ref([{id: 1,
阅读更多...
C# Costura.Fody 排除多个指定dll

C# Costura.Fody 排除多个指定dll

按照网上的说在 FodyWeavers.xml 里修改 然后需要注意的是 指定多个排除项 不是加 | 是换行 一个换行 就排除一项 我测试的 <?xml version"1.0" encoding"utf-8"?> <Weavers xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance&quo…
阅读更多...
设计模式——迭代器设计模式（行为型）

设计模式——迭代器设计模式（行为型）

摘要 本文详细介绍了迭代器设计模式&#xff0c;这是一种行为型设计模式&#xff0c;用于顺序访问集合对象中的元素&#xff0c;同时隐藏集合的内部结构。文章首先定义了迭代器设计模式并阐述了其核心角色&#xff0c;包括迭代器接口、具体迭代器、容器接口和具体容器。接着&a…
阅读更多...
android-studio-2024.3.2.14如何用WIFI连接到手机（给数据线说 拜拜！）

android-studio-2024.3.2.14如何用WIFI连接到手机（给数据线说 拜拜！）

原文&#xff1a;Android不用数据线就能调试真机的方法—给数据线说 拜拜&#xff01;&#xff08;adb远程调试&#xff09; android-studio-2024.3.2.14是最新的版本&#xff0c;如何连接到手机&#xff0c;可用WIFI&#xff0c;可不用数据线&#xff0c;拜拜 第一步&#xf…
阅读更多...
js 动画库、2048核心逻辑、面试题add[1][2][3]+4

js 动画库、2048核心逻辑、面试题add[1][2][3]+4

1、js 动画库 web animation api &#xff08;1&#xff09;初始化代码 hmtl、css 部分 初始化全局背景黑色初始化黄色小球 js 部分 监听全局点击事件创建并添加元素 class"pointer" 的 div 标签 设置 left、top 位置监听动画结束事件&#xff0c;移除该元素 定位小…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023