【小沐学GIS】基于WebGL绘制三维数字地球Earth（OpenGL）

🍺三维数字地球系列相关文章如下🍺：
1【小沐学GIS】基于C++绘制三维数字地球Earth（OpenGL、glfw、glut）第一期
2【小沐学GIS】基于C++绘制三维数字地球Earth（OpenGL、glfw、glut）第二期
3【小沐学GIS】基于C++绘制太阳系SolarSystem（OpenGL、glfw、glut）
4【小沐学GIS】基于OpenSceneGraph(OSG)绘制三维数字地球Earth
5【小沐学GIS】基于C#绘制三维数字地球Earth（OpenGL）
6【小沐学GIS】基于Python绘制三维数字地球Earth（OpenGL）
7【小沐学GIS】基于Android绘制三维数字地球Earth（OpenGL）
8【小沐学GIS】基于WebGL绘制三维数字地球Earth（OpenGL）

文章目录

  • 1、简介
    • 1.1 WebGL简介
    • 1.2 WebGL入门示例
      • 1.2.1 初始场景
      • 1.2.2 绘制点
      • 1.2.3 绘制单色三角形
      • 1.2.4 绘制彩色三角形
  • 2、开源代码
    • 2.1 cambecc/earth（3d全球气象地球）
    • 2.2 mapbox/webgl-wind（2d风场地球）
    • 2.3 github（3dgithub地球）
    • 2.4 cesium.js
  • 13、测试代码
    • 13.1 WebGL
    • 13.2 WebGL / three.js
    • 13.3 WebGL / Babylon.js
    • 13.4 WebGL / SpriteJS.js
  • 结语

1、简介

1.1 WebGL简介

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和 数据视觉化 。
在这里插入图片描述
OpenGL ES则是从OpenGL中移除了许多陈旧无用的特性之后的一个轻量级的OpenGL框架，在保持轻量级的同时，OpenGL ES仍然具有足够的能力来渲染出精美的三维图形。
在这里插入图片描述
相对于传统网页，支持WebGL的浏览器底层接入了OpenGL/OpenGL ES标准，WebGL通过实现标准支持着色器语言编程语言GLSL ES，在我们实际开发过程中，GLSL ES通常是以字符串的形式存在JavaScript中，我们可以通过JavaScript修改GLSL ES字符串来改变着色器程序。

1.2 WebGL入门示例

  • WebGL绘图流程如下
    第 1 步 - 准备画布并获取 WebGL 渲染上下文，我们获取当前的 HTML canvas 对象并获取其 WebGL 渲染上下文。
    第 2 步 - 定义几何并将其存储在缓冲区对象中，我们定义几何的属性，如顶点、索引、颜色等，并将它们存储在 JavaScript 数组中。然后，我们创建一个或多个缓冲区对象并将包含数据的数组传递给相应的缓冲区对象。在示例中，我们将三角形的顶点存储在 JavaScript 数组中，并将该数组传递给顶点缓冲区对象。
    第 3 步 - 创建和编译着色器程序，我们编写顶点着色器和片段着色器程序，编译它们，并通过链接这两个程序来创建组合程序。
    第 4 步 - 将着色器程序与缓冲区对象相关联，我们关联缓冲区对象和组合着色器程序。
    第 5 步 - 绘制所需对象（三角形），此步骤包括清除颜色、清除缓冲区位、启用深度测试、设置视口等操作。最后，您需要使用方法之一绘制所需的图元 - drawArrays()或drawElements()。

在这里插入图片描述

  • WebGL着色器执行过程
    在这里插入图片描述

1.2.1 初始场景

<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    const gl=canvas.getContext('webgl');
    gl.clearColor(0.5,0.5,0.5,1);
    gl.clear(gl.COLOR_BUFFER_BIT);
</script>
  • 测试如下：
    在这里插入图片描述

1.2.2 绘制点

<canvas id="canvas"></canvas>
<!-- 顶点着色器 -->
<script id="vertexShader" type="x-shader/x-vertex">
    void main() {
        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
        gl_PointSize = 100.0;
    }
</script>
<!-- 片元着色器 -->
<script id="fragmentShader" type="x-shader/x-fragment">
    void main() {
        gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
    }
</script>
<script>
    // canvas 画布
    const canvas = document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    // webgl画笔
    const gl = canvas.getContext('webgl');
    // 顶点着色器
    const vsSource = document.getElementById('vertexShader').innerText;
    // 片元着色器
    const fsSource = document.getElementById('fragmentShader').innerText;
    // 初始化着色器
    initShaders(gl, vsSource, fsSource);
    // 指定将要用来清理绘图区的颜色
    gl.clearColor(0., 0.0, 0.0, 1.0);
    // 清理绘图区
    gl.clear(gl.COLOR_BUFFER_BIT);
    // 绘制顶点
    gl.drawArrays(gl.POINTS, 0, 1);

    function initShaders(gl,vsSource,fsSource){
        //创建程序对象
        const program = gl.createProgram();
        //建立着色对象
        const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
        const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
        //把顶点着色对象装进程序对象中
        gl.attachShader(program, vertexShader);
        //把片元着色对象装进程序对象中
        gl.attachShader(program, fragmentShader);
        //连接webgl上下文对象和程序对象
        gl.linkProgram(program);
        //启动程序对象
        gl.useProgram(program);
        //将程序对象挂到上下文对象上
        gl.program = program;
        return true;
    }

    function loadShader(gl, type, source) {
        //根据着色类型，建立着色器对象
        const shader = gl.createShader(type);
        //将着色器源文件传入着色器对象中
        gl.shaderSource(shader, source);
        //编译着色器对象
        gl.compileShader(shader);
        //返回着色器对象
        return shader;
    }
</script>
  • 测试如下：
    在这里插入图片描述

1.2.3 绘制单色三角形

<!doctype html>
<html>
   <body>
      <canvas width = "300" height = "300" id = "my_Canvas"></canvas>
          
      <script>
         /* Step1: Prepare the canvas and get WebGL context */
         var canvas = document.getElementById('my_Canvas');
         var gl = canvas.getContext('experimental-webgl');
         /* Step2: Define the geometry and store it in buffer objects */
         var vertices = [-0.5, 0.5, -0.5, -0.5, 0.0, -0.5,];
         // Create a new buffer object
         var vertex_buffer = gl.createBuffer();
         // Bind an empty array buffer to it
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
         
         // Pass the vertices data to the buffer
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
         // Unbind the buffer
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
         /* Step3: Create and compile Shader programs */
         // Vertex shader source code
         var vertCode =
            'attribute vec2 coordinates;' + 
            'void main(void) {' + ' gl_Position = vec4(coordinates,0.0, 1.0);' + '}';
         //Create a vertex shader object
         var vertShader = gl.createShader(gl.VERTEX_SHADER);
         //Attach vertex shader source code
         gl.shaderSource(vertShader, vertCode);
         //Compile the vertex shader
         gl.compileShader(vertShader);
         //Fragment shader source code
         var fragCode = 'void main(void) {' + 'gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' + '}';
         // Create fragment shader object
         var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
         // Attach fragment shader source code
         gl.shaderSource(fragShader, fragCode);
         // Compile the fragment shader
         gl.compileShader(fragShader);
         // Create a shader program object to store combined shader program
         var shaderProgram = gl.createProgram();
         // Attach a vertex shader
         gl.attachShader(shaderProgram, vertShader); 
         
         // Attach a fragment shader
         gl.attachShader(shaderProgram, fragShader);
         // Link both programs
         gl.linkProgram(shaderProgram);
         // Use the combined shader program object
         gl.useProgram(shaderProgram);
         /* Step 4: Associate the shader programs to buffer objects */
         //Bind vertex buffer object
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
         //Get the attribute location
         var coord = gl.getAttribLocation(shaderProgram, "coordinates");
         //point an attribute to the currently bound VBO
         gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);
         //Enable the attribute
         gl.enableVertexAttribArray(coord);
         /* Step5: Drawing the required object (triangle) */
         // Clear the canvas
         gl.clearColor(0.5, 0.5, 0.5, 0.9);
         // Enable the depth test
         gl.enable(gl.DEPTH_TEST); 
         
         // Clear the color buffer bit
         gl.clear(gl.COLOR_BUFFER_BIT);
         // Set the view port
         gl.viewport(0,0,canvas.width,canvas.height);
         // Draw the triangle
         gl.drawArrays(gl.TRIANGLES, 0, 3);
      </script>
   </body>
</html>
  • 测试如下：
    在这里插入图片描述

1.2.4 绘制彩色三角形

<canvas id="canvas"></canvas>
<!-- 顶点着色器 -->
<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_position;
	attribute vec4 a_color;
    varying vec4 vColor;
    void main(){
		gl_Position = a_position;
		vColor = a_color;
    }
</script>
<!-- 片元着色器 -->
<script id="fragmentShader" type="x-shader/x-fragment">
	precision mediump float;
	varying vec4 vColor;
    void main() {
        gl_FragColor = vColor;
    }
</script>
<script>
    // canvas 画布
    const canvas = document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    // webgl画笔
    const gl = canvas.getContext('webgl');
    // 顶点着色器
    const vsSource = document.getElementById('vertexShader').innerText;
    // 片元着色器
    const fsSource = document.getElementById('fragmentShader').innerText;
    // 初始化着色器
    initShaders(gl, vsSource, fsSource);
   
	// 初始化场景
	// gl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);
	gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);//区别在这里，用上面那行代码三角形无法显示
	gl.clearColor(0, 0, 0, 1);
	gl.clear(gl.COLOR_BUFFER_BIT);
	
	//获取的是着色器里的position变量
	var attLocation = gl.getAttribLocation(gl.program,'a_position');
	//获取顶点着色器中的color变量
	var attLocationColor = gl.getAttribLocation(gl.program,'a_color');
	var vertex_data = [
		0, 0,
		0, 0.5,
		0.7, 0
	]
	var vertex_color = [
		1.0, 0.0, 0.0, 1.0,
		0.0, 1.0, 0.0, 1.0,
		0.0, 0.0, 1.0, 1.0
	];
	
	var vertex_vbo = create_vbo(vertex_data);
	gl.bindBuffer(gl.ARRAY_BUFFER, vertex_vbo);
	gl.enableVertexAttribArray(attLocation);
	gl.vertexAttribPointer(attLocation, 2, gl.FLOAT,false,0,0);
	
	var color_vbo = create_vbo(vertex_color);
	gl.bindBuffer(gl.ARRAY_BUFFER,color_vbo);
	gl.enableVertexAttribArray(attLocationColor);
	gl.vertexAttribPointer(attLocationColor, 4, gl.FLOAT,false,0,0);
		
	gl.drawArrays(gl.TRIANGLES, 0, 3)
  
    function initShaders(gl,vsSource,fsSource){
        //创建程序对象
        const program = gl.createProgram();
        //建立着色对象
        const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
        const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
        //把顶点着色对象装进程序对象中
        gl.attachShader(program, vertexShader);
        //把片元着色对象装进程序对象中
        gl.attachShader(program, fragmentShader);
        //连接webgl上下文对象和程序对象
        gl.linkProgram(program);
        //启动程序对象
        gl.useProgram(program);
        //将程序对象挂到上下文对象上
        gl.program = program;
        return true;
    }

    function loadShader(gl, type, source) {
        //根据着色类型，建立着色器对象
        const shader = gl.createShader(type);
        //将着色器源文件传入着色器对象中
        gl.shaderSource(shader, source);
        //编译着色器对象
        gl.compileShader(shader);
        //返回着色器对象
        return shader;
    }
	
	function create_vbo(data){
		// 生成缓存对象
		var vbo = gl.createBuffer();

		// 绑定缓存
		gl.bindBuffer(gl.ARRAY_BUFFER, vbo);

		// 向缓存中写入数据；gl.STATIC_DRAW这个常量，定义了这个缓存中内容的更新频率
		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);

		// 将绑定的缓存设为无效；这是为了防止WebGL中的缓存一致保留，而出现和预想不一致的情况
		gl.bindBuffer(gl.ARRAY_BUFFER, null);

		// 返回生成的VBO
		return vbo;
	}
</script>
  • 测试如下：
    在这里插入图片描述

2、开源代码

2.1 cambecc/earth（3d全球气象地球）

https://github.com/cambecc/earth
一个全球天气状况可视化项目。

  • 依赖安装，需提前安装 Node.js 和 npm。
  • 使用git下载项目并安装npm依赖包。
git clone https://github.com/cambecc/earth
cd earth
npm install

在这里插入图片描述
在这里插入图片描述

  • 启动服务器
node dev-server.js 8080

在这里插入图片描述

  • 浏览器服务器访问地址
http://127.0.0.1:8080

在这里插入图片描述

2.2 mapbox/webgl-wind（2d风场地球）

https://github.com/mapbox/webgl-wind
WebGL 驱动的风力发电可视化。 能够以 60fps 的速度渲染多达 100 万个风粒子。

  • 执行如下脚本：
npm install
npm run build
npm start
# open http://127.0.0.1:1337/demo/

在这里插入图片描述

  • 浏览器访问如下：
http://127.0.0.1:1337/demo/

在这里插入图片描述

2.3 github（3dgithub地球）

在这里插入图片描述

2.4 cesium.js

【小沐学GIS】基于Cesium实现三维数字地球Earth（CesiumJS入门安装）

13、测试代码

13.1 WebGL

基于WebGL基础代码实现地球绘制效果。

  • 地球测试代码的运行效果如下：
    在这里插入图片描述

13.2 WebGL / three.js

https://threejs.org/
three.js是在Web端创建3D程序的图形引擎，WebGL是一个只能画点、线、三角形的底层图形系统，直接使用WebGL开发应用往往需要写大量的代码，three.js对其进行了封装大大简化了Web 3D应用的开发。
在这里插入图片描述

  • 地球测试代码的运行效果如下：
    在这里插入图片描述

13.3 WebGL / Babylon.js

https://www.babylonjs.com/
Babylonjs是一个开源的Web3D渲染引擎，支持高性能3D、WebXR、glTF等多种格式和技术。
在这里插入图片描述

  • 地球测试代码的运行效果如下：
    在这里插入图片描述
    在这里插入图片描述

13.4 WebGL / SpriteJS.js

https://github.com/spritejs/spritejs/
https://spritejs.com/#/
SpriteJS 是跨平台的高性能图形系统，它能够支持web、node、桌面应用和小程序的图形绘制和实现各种动画效果。

SpriteJS Next 是SpriteJS的新版本，在浏览器端支持 webgl2 渲染，并可向后兼容降级为 webgl 和 canvas2d。
在这里插入图片描述

  • 地球测试代码的运行效果如下：
    在这里插入图片描述

结语

如果您觉得该方法或代码有一点点用处，可以给作者点个赞，或打赏杯咖啡；╮(￣▽￣)╭
如果您感觉方法或代码不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果您需要相关功能的代码定制化开发，可以留言私信作者；(✿◡‿◡)
感谢各位童鞋们的支持！( ´ ▽´ )ﾉ ( ´ ▽´)っ！！！

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

最短路径算法

最短路径算法

1. Dijkstra算法 在正数权重的有向图中求解某个源点到其余各个顶点的最短路径一般可以采用迪杰斯特拉算法&#xff08;Dijkstra算法&#xff09;。 1.1 适用场景 单源最短路径权重都为正 1.2 伪代码 1.3 示例 问题描述&#xff1a; 计算节点0到节点4的最短路径&#xff0c…
阅读更多...
arduino uno R3驱动直流减速电机（蓝牙控制）

arduino uno R3驱动直流减速电机（蓝牙控制）

此篇博客用于记录使用arduino驱动直流减速电机的过程&#xff0c;仅实现简单的功能&#xff1a;PID调速、蓝牙控制 1、直流减速电机简介2、DRV8833电机驱动模块简介3、HC-05蓝牙模块简介电机转动测试4、PID控制5、蓝牙控制电机 1、直流减速电机简介 我在淘宝购买的电机&#x…
阅读更多...
C语言整型数据类型..

C语言整型数据类型..

1.整型数据类型 在C语言中 根据数据范围从小到大依次为char、short、int、long、long long 但是对于整型来说 为什么有这么多类型呢 我们得先说字节的本质&#xff1a; 计算机是通过晶体管的开关状态来记录数据 晶体管通常8个为一组 称为一个字节 而晶体管由两种状态 分别是开…
阅读更多...
交叉熵损失函数（Cross-Entropy Loss）的基本概念与程序代码

交叉熵损失函数（Cross-Entropy Loss）的基本概念与程序代码

交叉熵损失函数&#xff08;Cross-Entropy Loss&#xff09;是机器学习和深度学习中常用的损失函数之一&#xff0c;用于分类问题。其基本概念如下&#xff1a; 1. 基本解释&#xff1a; 交叉熵损失函数衡量了模型预测的概率分布与真实概率分布之间的差异。在分类问题中&…
阅读更多...
春节假期：思考新一年的发展思路

春节假期：思考新一年的发展思路

春节假期是人们放松身心、享受家庭团聚的时刻&#xff0c;但除了走亲戚、玩、吃之外&#xff0c;我们确实也需要思考新的一年的发展思路。以下是一些建议&#xff0c;帮助您在春节假期中为新的一年做好准备&#xff1a; 回顾过去&#xff0c;总结经验&#xff1a;在春节期间&a…
阅读更多...
大华智慧园区综合管理平台/emap/devicePoint RCE漏洞

大华智慧园区综合管理平台/emap/devicePoint RCE漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…
阅读更多...
【十六】【C++】stack的常见用法和练习

【十六】【C++】stack的常见用法和练习

stack的常见用法 C标准库中的stack是一种容器适配器&#xff0c;它提供了后进先出&#xff08;Last In First Out, LIFO&#xff09;的数据结构。stack使用一个底层容器进行封装&#xff0c;如deque、vector或list&#xff0c;但只允许从一端&#xff08;顶部&#xff09;进行…
阅读更多...
一周学会Django5 Python Web开发-Django5操作命令

一周学会Django5 Python Web开发-Django5操作命令

锋哥原创的Python Web开发 Django5视频教程&#xff1a; 2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~共计11条视频&#xff0c;包括&#xff1a;2024版 Django5 Python we…
阅读更多...
第8讲个人中心页面搭建实现

第8讲个人中心页面搭建实现

个人中心页面搭建实现 <template><view class"user_center"><!-- 用户信息开始 --><view class"user_info_wrap"><!--获取头像--><button class"user_image"></button> <view class"user_n…
阅读更多...
14.盔甲？装甲？装饰者模式！

14.盔甲？装甲？装饰者模式！

人类的军工发展史就是一场矛与盾的追逐&#xff0c;矛利则盾坚&#xff0c;盾愈坚则矛愈利。在传统的冶金工艺下&#xff0c;更坚固的盾牌和盔甲往往意味着更迟缓笨重的运动能力和更高昂的移动成本。从战国末期的魏武卒、秦锐士&#xff0c;到两宋之交的铁浮图、重步兵&#xf…
阅读更多...
Roop的安装教程

Roop的安装教程

roop插件的安装&#xff0c;并不容易 并且最好就是在电脑本地完成&#xff0c;因为涉及到C、visual studio软件&#xff0c;并且还需要在电脑本地放置一些模型&#xff0c;用autoDL其实也有镜像&#xff0c;但是需要数据扩容至少100G&#xff0c;烧钱。。。 电脑本地&#xff0…
阅读更多...
javaweb物业管理系统jsp项目

javaweb物业管理系统jsp项目

文章目录 物业管理系统一、系统演示二、项目介绍三、系统部分功能截图四、部分代码展示五、底部获取项目源码&#xff08;9.9&#xffe5;带走&#xff09; 物业管理系统 可用作javaweb项目、servlet项目、jsp项目的项目设计 一、系统演示 物业管理系统 二、项目介绍 语言&a…
阅读更多...
ChatGPT高效提问—prompt常见用法（续篇）

ChatGPT高效提问—prompt常见用法（续篇）

ChatGPT高效提问—prompt常见用法&#xff08;续篇&#xff09; ​ 对话式prompt适用于模拟各种交流情境。若我们意图探索在特殊场合下可能出现的对话情景&#xff0c;或者模拟一段对话流程&#xff0c;可以采用这种方法&#xff0c;通过精准的prompt指令&#xff0c;引导Chat…
阅读更多...
多视图特征学习 Multi-view Feature Learning既可以被看作是一种学习框架，也可以被看作是一种具体的学习算法！

多视图特征学习 Multi-view Feature Learning既可以被看作是一种学习框架，也可以被看作是一种具体的学习算法！

Multi-view Feature Learning 1.多视图特征学习Multi-view Feature Learning的基本介绍总结 1.多视图特征学习Multi-view Feature Learning的基本介绍 多视图特征学习是一种利用多视图数据集来进行联合学习的机器学习方法。多视图数据指的是对同一事物从多种不同的途径或角度进…
阅读更多...
监测Nginx访问日志502情况后并做相应动作

监测Nginx访问日志502情况后并做相应动作

今天带大家写一个比较实用的脚本哈 原理&#xff1a; 假设服务器环境为lnmp&#xff0c;近期访问经常出现502现象&#xff0c;且502错误在重启php-fpm服务后消失&#xff0c;因此需要编写监控脚本&#xff0c;一旦出现502&#xff0c;则自动重启php-fpm服务 场景&#xff1a; 1…
阅读更多...
人脸追踪案例及机器学习认识

人脸追踪案例及机器学习认识

1.人脸追踪机器人初制 用程序控制舵机运动的方法与机械臂项目完全相同。 由于摄像头的安装方式为上下倒转安装&#xff0c;我们在编写程序读取图像时需使用 flip 函数将 图像上下翻转。 现在&#xff0c;只需要使用哈尔特征检测得到人脸在图像中的位置&#xff0c;再指示舵机运…
阅读更多...
C++内联函数深入讲解

C++内联函数深入讲解

用法&#xff1a; 在函数的返回值前面加上inline&#xff0c;例如&#xff1a; 作用&#xff1a; 内联函数的存在其实是为了解决c语言中一些问题&#xff0c;比如有一个频繁调用的小函数&#xff0c;每次调用都需要建立栈帧&#xff0c;压栈出栈&#xff0c;减少了效率&#xf…
阅读更多...
【复现】litemall商场系统后台弱口令漏洞_47

【复现】litemall商场系统后台弱口令漏洞_47

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 litemall是一个简单的商场系统&#xff0c;基于现有的开源项目&#xff0c;重新实现一个完整的前后端项目&#xff0c;包含小程序…
阅读更多...
单链表基础知识点

单链表基础知识点

单链表的读取 对于单链表实现获取第i个元素的数据的操作 GetElem&#xff0c;在算法上&#xff0c;相对要麻烦一些。 获得链表第i个数据的算法思路: 声明一个结点p指向链表第一个结点&#xff0c;初始化j从1开始;当j<i时&#xff0c;就遍历链表&#xff0c;让p的指针向后移…
阅读更多...
如何通过ETL实现快速同步美团订单信息

如何通过ETL实现快速同步美团订单信息

一、美团外卖现状 美团作为中国领先的生活服务电子商务平台&#xff0c;其旗下的美团外卖每天承载着大量的订单信息。这些订单信息需要及时入库、清洗和同步&#xff0c;但由于数据量庞大且来源多样化&#xff0c;传统的手动处理方式效率低下&#xff0c;容易出错。比如&#…
阅读更多...
最新文章

Copyright @ 2022~2023