OpenLayers基础教程——WebGLPoints图层样式的设置方法

news2024/9/23 11:18:08

1、前言

前一篇博客介绍了如何在OpenLayers中使用WebGLPoints加载海量数据点的方法，这篇博客就来介绍一下WebGLPoints图层的样式设置问题。

2、样式运算符

在VectorLayer图层中，我们只需要创建一个ol.style.Style对象即可，WebGLPoints则不同，它并不是基于Canvas进行绘制，因此其样式渲染不能直接使用ol.style.Style，取而代之的是使用样式表达式进行渲染。

2.1、读取运算符

1、['get', 'attributeName']
2、['var', 'varName']
3、['time']
4、['zoom']
5、['resolution']

2.2、数学运算符

1、['*', value1, value2]
2、['/', value1, value2]
3、['+', value1, value2]
4、['-', value1, value2]
5、['clamp', value, low, high]
6、['%', value1, value2]
7、['^', value1, value2]

2.3、变换运算符

1、['case', condition1, output1, ...conditionN, outputN, fallback]
2、['match', input, match1, output1, ...matchN, outputN, fallback]
3、['interpolate', interpolation, input, stop1, output1, ...stopN, outputN]

2.4、逻辑运算符

1、['<', value1, value2]
2、['<=', value1, value2]
3、['>', value1, value2]
4、['>=', value1, value2]
5、['==', value1, value2]
6、['!=', value1, value2]
7、['!', value1]
8、['between', value1, value2, value3]

2.5、转换运算符

1、['array', value1, ...valueN]
2、['color', red, green, blue, alpha]

3、简单渲染

简单颜色渲染很简单，只需要使用['color', red, green, blue, alpha]即可，第一个参数为固定值‘color’，后面的参数依次为红、绿、蓝、透明度。下面的代码会将要素渲染为红色点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL</title>
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="ol/ol.css" />
    <script src="ol/ol.js"></script>
</head>
<body>
    <div id="map"></div>
    <script>
        // 创建图层
        var layer = new ol.layer.WebGLPoints({
            source: new ol.source.Vector({
                features: [
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.0, 30.0]),
                        "type": "学校",
                        "dbm": 1
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.0, 30.1]),
                        "type": "学校",
                        "dbm": 2
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.1, 30.0]),
                        "type": "超市",
                        "dbm": 3
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.1, 30.1]),
                        "type": "超市",
                        "dbm": 4
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.2, 30.0]),
                        "type": "医院",
                        "dbm": 5
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.2, 30.1]),
                        "type": "医院",
                        "dbm": 6
                    }),
                ]
            }),
            style: {
                symbol: {
                    symbolType: 'circle',
                    size: 40,
                    color: ['color', 255, 0, 0, 1]
                }
            }
        });

        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            })
        });
    </script>
</body>
</html>

运行结果如下图所示：

在这里插入图片描述

4、分类渲染

测试数据中的type字段将要素分成了3类，即：学校、超市、医院。现在要求将学校渲染为红色、超市渲染为绿色、医院渲染为蓝色。此时需要使用match表达式，其形式如下所示：

['match', type的值, '学校', 红色, '超市', 绿色, '医院', 蓝色, 默认颜色]

那么type的值又该如何获取？其实很简单，使用['get', 'attributeName']表达式即可，所以最后的样式表达式如下所示：

['match', ['get', 'type'], '学校', 红色, '超市', 绿色, '医院', 蓝色, 默认颜色]

代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL</title>
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="ol/ol.css" />
    <script src="ol/ol.js"></script>
</head>
<body>
    <div id="map"></div>
    <script>
        // 创建图层
        var layer = new ol.layer.WebGLPoints({
            source: new ol.source.Vector({
                features: [
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.0, 30.0]),
                        "type": "学校",
                        "dbm": 1
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.0, 30.1]),
                        "type": "学校",
                        "dbm": 2
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.1, 30.0]),
                        "type": "超市",
                        "dbm": 3
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.1, 30.1]),
                        "type": "超市",
                        "dbm": 4
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.2, 30.0]),
                        "type": "医院",
                        "dbm": 5
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.2, 30.1]),
                        "type": "医院",
                        "dbm": 6
                    }),
                ]
            }),
            style: {
                symbol: {
                    symbolType: 'circle',
                    size: 40,
                    color: [
                        'match',
                        ['get', 'type'], 
                        '学校', ['color', 255, 0, 0, 1],
                        '超市', ['color', 0, 255, 0, 1],
                        '医院', ['color', 0, 0, 255, 1],
                        ['color', 255, 0, 0, 1]
                    ]
                }
            }
        });

        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            })
        });
    </script>
</body>
</html>

运行结果如下图所示：

在这里插入图片描述

5、分级渲染

测试数据中包含一个dbm字段，现在根据dbm的范围进行分级渲染，规定如下：
1、dbm∈[1, 2]，渲染为红色
2、dbm == 3，渲染为绿色
3、dbm == 4，渲染为蓝色
4、dbm∈[5, 6]，渲染为黄色

此时需要使用case表达式，其形式如下所示：

['case', 'dbm∈[1,2]', 红色, 'dbm==3', 绿色, 'dbm==4', 蓝色, 'dbm∈[5,6]', 红色， 默认颜色]

在判断dbm的值的范围时，需要使用逻辑表达式：

['==', dbm, 3]
['==', dbm, 4]
['between', dbm, 1, 2]
['between', dbm, 5, 6]

最后，使用['get', 'attributeName']表达式获取字段值：

['get', 'dbm']

代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL</title>
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="ol/ol.css" />
    <script src="ol/ol.js"></script>
</head>
<body>
    <div id="map"></div>
    <script>
        // 创建图层
        var layer = new ol.layer.WebGLPoints({
            source: new ol.source.Vector({
                features: [
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.0, 30.0]),
                        "type": "学校",
                        "dbm": 1
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.0, 30.1]),
                        "type": "学校",
                        "dbm": 2
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.1, 30.0]),
                        "type": "超市",
                        "dbm": 3
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.1, 30.1]),
                        "type": "超市",
                        "dbm": 4
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.2, 30.0]),
                        "type": "医院",
                        "dbm": 5
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.2, 30.1]),
                        "type": "医院",
                        "dbm": 6
                    }),
                ]
            }),
            style: {
                symbol: {
                    symbolType: 'circle',
                    size: 40,
                    color: [
                        'case',
                        ['between', ['get', 'dbm'], 1, 2], ['color', 255, 0, 0, 1],
                        ['==', ['get', 'dbm'], 3], ['color', 0, 255, 0, 1],
                        ['==', ['get', 'dbm'], 4], ['color', 0, 0, 255, 1],
                        ['between', ['get', 'dbm'], 5, 6], ['color', 255, 255, 0, 1],
                        ['color', 255, 0, 0, 1]
                    ]
                }
            }
        });

        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            })
        });
    </script>
</body>
</html>

运行结果如下图所示：

在这里插入图片描述

6、根据地图缩放等级渲染

现做如下规定：
1、地图缩放等级zoom∈（0, 10]，渲染为红色
2、地图缩放等级zoom∈（10, 12]，渲染为绿色
3、地图缩放等级zoom∈（12, 14]，渲染为蓝色
4、其余缩放等级，渲染为黄色

看了上面的例子之后，相信同志们应该想到了：利用['zoom']获取地图缩放等级，然后利用case表达式进行情况分类，最后每种情况利用逻辑表达式判断即可。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL</title>
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="ol/ol.css" />
    <script src="ol/ol.js"></script>
</head>
<body>
    <div id="map"></div>
    <script>
        // 创建图层
        var layer = new ol.layer.WebGLPoints({
            source: new ol.source.Vector({
                features: [
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.0, 30.0]),
                        "type": "学校",
                        "dbm": 1
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.0, 30.1]),
                        "type": "学校",
                        "dbm": 2
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.1, 30.0]),
                        "type": "超市",
                        "dbm": 3
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.1, 30.1]),
                        "type": "超市",
                        "dbm": 4
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.2, 30.0]),
                        "type": "医院",
                        "dbm": 5
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.2, 30.1]),
                        "type": "医院",
                        "dbm": 6
                    }),
                ]
            }),
            style: {
                symbol: {
                    symbolType: 'circle',
                    size: 40,
                    color: [
                        'case',
                        ['<=', ['zoom'], 10], ['color', 255, 0, 0, 1],
                        ['<=', ['zoom'], 12], ['color', 0, 255, 0, 1],
                        ['<=', ['zoom'], 14], ['color', 0, 0, 255, 1],
                        ['color', 255, 255, 0, 1]
                    ]
                }
            }
        });

        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            })
        });
    </script>
</body>
</html>

运行结果如下图所示：

在这里插入图片描述

7、根据地图分辨率渲染

根据地图分辨率渲染也很简单，只需要把上面的['zoom']替换成['resolution']即可。不过考虑到resolution值是一个小数，因此这里将resolution乘以10000之后再进行判断，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL</title>
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="ol/ol.css" />
    <script src="ol/ol.js"></script>
</head>
<body>
    <div id="map"></div>
    <script>
        // 创建图层
        var layer = new ol.layer.WebGLPoints({
            source: new ol.source.Vector({
                features: [
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.0, 30.0]),
                        "type": "学校",
                        "dbm": 1
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.0, 30.1]),
                        "type": "学校",
                        "dbm": 2
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.1, 30.0]),
                        "type": "超市",
                        "dbm": 3
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.1, 30.1]),
                        "type": "超市",
                        "dbm": 4
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.2, 30.0]),
                        "type": "医院",
                        "dbm": 5
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.2, 30.1]),
                        "type": "医院",
                        "dbm": 6
                    }),
                ]
            }),
            style: {
                symbol: {
                    symbolType: 'circle',
                    size: 40,
                    color: [
                        'case',
                        ['<=', ['*', ['resolution'], 10000], 2], ['color', 255, 0, 0, 1],
                        ['<=', ['*', ['resolution'], 10000], 3], ['color', 0, 255, 0, 1],
                        ['<=', ['*', ['resolution'], 10000], 4], ['color', 0, 0, 255, 1],
                        ['<=', ['*', ['resolution'], 10000], 5], ['color', 255, 255, 0, 1],
                        ['<=', ['*', ['resolution'], 10000], 6], ['color', 255, 0, 255, 1],
                        ['<=', ['*', ['resolution'], 10000], 7], ['color', 0, 255, 255, 1],
                        ['color', 300, 200, 100, 1]
                    ]
                }
            }
        });

        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            })
        });
    </script>
</body>
</html>

运行结果如下图所示：

在这里插入图片描述

8、设置要素的形状和透明度

在symbol对象中，symbolType参数用于定义要素的形状，它可以设置为circle、triangle、square、image。例如将symbolType设置为triangle：

symbol: {
    symbolType: 'circle',
    size: 40,
    color: ['color', 255, 0, 0, 1]
}

此时要素会被渲染为三角形，如下图所示：

在这里插入图片描述
将symbolType设置为square：

symbol: {
    symbolType: 'square',
    size: 40,
    color: ['color', 255, 0, 0, 1]
}

此时要素会被渲染为正方形，如下图所示：

在这里插入图片描述
如果希望设置透明度，只需要添加opacity属性即可，例如将透明度设置为0.3：

symbol: {
    symbolType: 'circle',
    size: 40,
    color: ['color', 255, 0, 0, 1],
    opacity: 0.3
}

如下图所示：

在这里插入图片描述

9、设置要素的尺寸

上面的代码主要针对color属性进行设置，其实不仅仅是color，size属性同样可以使用样式表达式。现在根据dbm值生成不同大小的要素，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL</title>
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="ol/ol.css" />
    <script src="ol/ol.js"></script>
</head>
<body>
    <div id="map"></div>
    <script>
        // 创建图层
        var layer = new ol.layer.WebGLPoints({
            source: new ol.source.Vector({
                features: [
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.0, 30.0]),
                        "type": "学校",
                        "dbm": 1
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.0, 30.1]),
                        "type": "学校",
                        "dbm": 2
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.1, 30.0]),
                        "type": "超市",
                        "dbm": 3
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.1, 30.1]),
                        "type": "超市",
                        "dbm": 4
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.2, 30.0]),
                        "type": "医院",
                        "dbm": 5
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Point([120.2, 30.1]),
                        "type": "医院",
                        "dbm": 6
                    }),
                ]
            }),
            style: {
                symbol: {
                    symbolType: 'circle',
                    size: [
                        'case',
                        ['==', ['get', 'dbm'], 1], 10,
                        ['==', ['get', 'dbm'], 2], 20,
                        ['==', ['get', 'dbm'], 3], 30,
                        ['==', ['get', 'dbm'], 4], 40,
                        ['==', ['get', 'dbm'], 5], 50,
                        ['==', ['get', 'dbm'], 6], 60,
                        20
                    ],
                    color: ['color', 255, 0, 0, 1],
                }
            }
        });

        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            })
        });
    </script>
</body>
</html>

运行结果如下图所示：

在这里插入图片描述

10、结语

本文主要介绍了OpenLayers中WebGLPoints图层的样式设置方法。其实刚接触样式表达式的时候觉得这种方法很反人类，但是习惯之后发现它的灵活度很高，本文也只列举了一些常见的用法，有兴趣的同志可以去官网查看更详细的文档。

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

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

相关文章

研华工控机610L学习笔记2：visualstudio与第一个C#程序

研华工控机610L学习笔记2：visualstudio与第一个C#程序

今日继续学习工控机 C# 编程相关知识&#xff1a; 这篇结束后我将先进行一段时间的C#的学习研究&#xff0c;并写一些C#的笔记 后续再更新工控机编程设计相关 目录 1、安装visualstudio&#xff1a; 2、创建第一个C#程序&#xff1a; 3、寻找C#解决方案源文件&#xff1a; …
阅读更多...
《深入浅出LLM 》（二）：大模型基础知识

《深入浅出LLM 》（二）：大模型基础知识

&#x1f389;AI学习星球推荐&#xff1a; GoAI的学习社区 知识星球是一个致力于提供《机器学习 | 深度学习 | CV | NLP | 大模型 | 多模态 | AIGC 》各个最新AI方向综述、论文等成体系的学习资料&#xff0c;配有全面而有深度的专栏内容&#xff0c;包括不限于 前沿论文解读、…
阅读更多...
DM-达梦数据库实时主备搭建

DM-达梦数据库实时主备搭建

dm实时主备说明 将主库产生的 Redo日志传输到备库&#xff0c;备库接收并重演Redo日志&#xff0c;从而实现备库与主库的数据同步。 一、环境准备 1.1、配置环境准备 首先搭建实时主备&#xff0c;要规划好机器的&#xff0c;我准备两台机器服务器 主服务器 mast…
阅读更多...
小目标检测篇 | YOLOv8改进之增加小目标检测层（针对Neck网络为AFPN）

小目标检测篇 | YOLOv8改进之增加小目标检测层（针对Neck网络为AFPN）

前言：Hello大家好，我是小哥谈。小目标检测是计算机视觉领域中的一个研究方向，旨在从图像或视频中准确地检测和定位尺寸较小的目标物体。相比于常规目标检测任务，小目标检测更具挑战性，因为小目标通常具有低分辨率、低对比度和模糊等特点，容易被背景干扰或遮挡。本篇文章就…
阅读更多...
【C语言】tcp_sendmsg_locked

【C语言】tcp_sendmsg_locked

一、讲解 tcp_sendmsg_locked 函数是 Linux 内核中实现 TCP 数据发送的一个核心函数。这个函数被调用来将用户空间的数据通过 TCP 发送出去。以下是该函数的基本工作流程的中文解释&#xff1a; 1. 函数初始化和检查&#xff1a; - 它首先检查是否使用了 TCP 零拷贝发送&am…
阅读更多...
【webpack】----错误解决【Cannot read properties of undefined (reading ‘tap‘)】

【webpack】----错误解决【Cannot read properties of undefined (reading ‘tap‘)】

1. 报错场景 安装 webpack-obfuscator 后&#xff0c;进行 js 代码混淆编译的时候报错。 2. 报错截图 3. 错误原因 通常是由于版本不兼容或配置错误引起的。 4. 查询本地 webpack 版本 4.1 查询命令 npm 查询 npm view webpack versionyarn 查询 yarn info webpack ver…
阅读更多...
Java学习笔记 | Java基础语法 | 03 | 流程控制语句

Java学习笔记 | Java基础语法 | 03 | 流程控制语句

文章目录 0 前言1.流程控制语句1.1 流程控制语句分类1.2 顺序结构 2.判断语句2.1 if语句1. if语句格式1练习1&#xff1a;老丈人选女婿练习2&#xff1a;考试奖励 2. if语句格式2练习1&#xff1a;吃饭练习2&#xff1a;影院选座 3. if语句格式3练习1&#xff1a;考试奖励 2.2 …
阅读更多...
C语言字节对齐关键字__attribute__((aligned(n)))的使用

C语言字节对齐关键字__attribute__((aligned(n)))的使用

0 前言 在进行嵌入式开发的过程中&#xff0c;我们经常会见到对齐操作。这些对齐操作有些是为了便于实现指针操作&#xff0c;有些是为了加速对内存的访问。因此&#xff0c;学习如何使用对齐关键字是对于嵌入式开发是很有必要的。 1 对齐规则 1.0 什么叫做对齐 众所周知&a…
阅读更多...
实现登录拦截功能

实现登录拦截功能

1.4、实现登录拦截功能 温馨小贴士&#xff1a;tomcat的运行原理 当用户发起请求时&#xff0c;会访问我们像tomcat注册的端口&#xff0c;任何程序想要运行&#xff0c;都需要有一个线程对当前端口号进行监听&#xff0c;tomcat也不例外&#xff0c;当监听线程知道用户想要和…
阅读更多...
发展规划--IM系统

发展规划--IM系统

1、时代背景 5G应用&#xff0c;多终端应用&#xff0c;物联网应用&#xff0c;小程序&#xff0c;工业互联&#xff0c;大数据应用等等大前端时代的到来&#xff0c;程序员不能只关注crud&#xff0c;因为以后的服务并发量只会越来越多。 高并发架构师、大数据架构师或者说j…
阅读更多...
Redis入门到实战-第六弹

Redis入门到实战-第六弹

Redis实战热身Lists篇 完整命令参考官网 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://redis.io/Redis概述 Redis是一个开源的&#xff08;采用BSD许可证&#xff09;&#xff0c;用作数据库、缓存、消息代理和流…
阅读更多...
【基于HTML5的网页设计及应用】——随机验证码

【基于HTML5的网页设计及应用】——随机验证码

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…
阅读更多...
WPF---1.入门学习

WPF---1.入门学习

学习来源 布局 wpf布局原则 一个窗口中只能包含一个元素 不应显示设置元素尺寸 不应使用坐标设置元素的位置 可以嵌套布局容器 StackPanel-->表单条件查找布局 DataGrid wpf布局容器 StackPanel: 水平或垂直排列元素&#xff0c;Orientation属性分别: Horizontal / Vertic…
阅读更多...
查询正在运行的Top SQL的脚本（建议收藏）

查询正在运行的Top SQL的脚本（建议收藏）

这篇文章提供了一些现成的SQL脚本&#xff0c;通过查询V$SQLSTATS视图找到正在运行的TOP SQL&#xff0c;用于后续的优化。建议大家收藏&#xff0c;需要查询TOP SQL时直接复制和粘贴即可。 之前的一篇文章解释了为什么要使用V$SQLSTATS视图。 当数据库表现出各种不同的性能问…
阅读更多...
Linux/WifineticTwo

Linux/WifineticTwo

WifineticTwo Enumeration nmap 经过使用 nmap 对常见的 1000 个端口进行扫描&#xff0c;并加入禁止 ping 的参数&#xff0c;长时间的扫描结果显示&#xff0c;仅有 22 和 8080 两个端口处于开放状态 ┌──(kali㉿kali)-[~/vegetable/HTB/WifineticTwo] └─$ nmap 10.10…
阅读更多...
渗压计测量：VW-102A与WM-103型读数仪的应用与优势

渗压计测量：VW-102A与WM-103型读数仪的应用与优势

在当代工程测量领域&#xff0c;准确监测地下水压力变化对于确保建筑结构的安全和稳定至关重要。渗压计作为一种专业的测量工具&#xff0c;能够精确地监测和记录地下水的压力变化&#xff0c;是水利工程、地下建筑、坝体安全监测等领域不可或缺的仪器。今天主要给大家介绍下读…
阅读更多...
make menuconfig

make menuconfig

本文不是分析Linux的make menuconfig&#xff0c;而是如何将Linux这套机制适配到自己的项目里。 Linux内核配置工具会使用到menuconfig。menuconfig会用到mconf、conf两个命令。这两个命令是编译内核自动生成的。网上有开源的实现&#xff0c;我们下载下来自己编译&#xff1a…
阅读更多...
SQLiteC/C++接口详细介绍sqlite3_stmt类（七）

SQLiteC/C++接口详细介绍sqlite3_stmt类（七）

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍sqlite3_stmt类&#xff08;六&#xff09; 下一篇&#xff1a; 无 22、sqlite3_column_database_name 用于返回结果集中指定列的数据库名称。如果结果集是由多个Join操作产生的&#xff0c;…
阅读更多...
公域流量和私域流量该如何选择？

公域流量和私域流量该如何选择？

很多客户在做品牌推广的时候&#xff0c;都会犹豫应该把精力投放到公域流量还是做自己的私域流量。特别是现在流量为王的时代&#xff0c;大部分客户都在布局做公域流量&#xff0c;砸钱推广&#xff0c;直播带货各种形式进行曝光。 在无论是线上还是线下的公共领域&#xff0…
阅读更多...
Microsoft Remote Desktop：无缝连接，高效远程工作的首选工具

Microsoft Remote Desktop：无缝连接，高效远程工作的首选工具

随着科技的发展&#xff0c;远程工作已经成为了越来越多人的选择。在这样的背景下&#xff0c;一款高效、稳定且安全的远程桌面工具显得尤为重要。Microsoft Remote Desktop正是这样一款能够满足用户需求的远程桌面软件。 Microsoft Remote Desktop是微软开发的一款专为远程连…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023