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

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

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

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

相关文章

【c++】类和对象（三）构造函数和析构函数

【c++】类和对象（三）构造函数和析构函数

&#x1f525;个人主页&#xff1a;Quitecoder &#x1f525;专栏&#xff1a;c笔记仓 朋友们大家好&#xff0c;本篇文章我们带来类和对象重要的部分&#xff0c;构造函数和析构函数 目录 1.类的6个默认成员函数2.构造函数2.1构造函数其他特性 3.构析函数3.1特性&#xff1a;…
阅读更多...
03课程发布模块课程预览

03课程发布模块课程预览

课程预览界面 界面原型 课程在发布前需要运营方进行审核&#xff0c;作为课程制作方即教学机构发布课程前可以通过课程预览功能查看课程详情界面&#xff0c;及时修改页面中的内容排版和违规问题 课程预览就是把课程的相关信息进行整合然后在课程预览界面进行展示&#xff0…
阅读更多...
为jupyter安装和使用不同的python版本

为jupyter安装和使用不同的python版本

安装好jupyter后&#xff0c;发现为默认的python3&#xff0c;想要切换到python3.10&#xff0c; 1.创建新环境python310 conda create -n python310 python3.10 2.进入新环境python310 conda activate python310 3.下载jupyter notebook conda install jupyter notebook…
阅读更多...
802.1X网络访问控制协议

802.1X网络访问控制协议

802.1X是一种由IEEE&#xff08;电气和电子工程师协会&#xff09;制定的网络访问控制协议&#xff0c;主要用于以太网和无线局域网&#xff08;WLAN&#xff09;中基于端口的网络接入控制。802.1X协议通过认证和授权机制&#xff0c;确保只有合法的用户和设备才能够接入网络&a…
阅读更多...
Facebook如何使用增强技术提升广告效果？

Facebook如何使用增强技术提升广告效果？

AR in AD - case study 脸书2021年宣布了引入AR的新方法&#xff0c;以推动其应用套件中的产品发现和购买。但他们首先考虑是技术。据脸书称&#xff0c;技术一直是增强现实在其应用程序中更广泛使用的主要障碍。这就是为什么它现在正在做出改变&#xff0c;使企业主和广告商更…
阅读更多...
OpenHarmony 源码解析之SystemUi—Statusbar（TS）

OpenHarmony 源码解析之SystemUi—Statusbar（TS）

作者&#xff1a;董伟 简介 SystemUI应用是OpenHarmony中预置的系统应用&#xff0c;为用户提供系统相关信息展示及交互界面&#xff0c;包括系统状态、系统提示、系统提醒等&#xff0c;例如系统时间、电量信息。 本文主要分析batterycomponent、clockcomponent、wificompo…
阅读更多...
2024年3月26日 十二生肖 今日运势

2024年3月26日 十二生肖 今日运势

小运播报&#xff1a;2024年3月26日&#xff0c;星期二&#xff0c;农历二月十七 &#xff08;甲辰年丁卯月己丑日&#xff09;&#xff0c;法定工作日。 红榜生肖&#xff1a;鸡、鼠、猴 需要注意&#xff1a;马、狗、羊 喜神方位&#xff1a;东北方 财神方位&#xff1a;…
阅读更多...
[HGAME 2023 week2]Designer

[HGAME 2023 week2]Designer

[HGAME 2023 week2]Designer 考点&#xff1a;XSS跨站脚本攻击&#xff0c;模板注入 代码审计 function auth(req, res, next) {const token req.headers["authorization"]if (!token) {return res.redirect("/")}try {const decoded jwt.verify(token,…
阅读更多...
登录注册界面

登录注册界面

T1、编程设计理工超市功能菜单并完成注册和登录功能的实现。 显示完菜单后&#xff0c;提示用户输入菜单项序号。当用户输入<注册>和<登录>菜单序号时模拟完成注册和登录功能&#xff0c;最后提示注册/登录成功并显示注册信息/欢迎XXX登录。当用户输入其他菜…
阅读更多...
【随笔】Git -- 基本概念和使用方式（五）

【随笔】Git -- 基本概念和使用方式（五）

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…
阅读更多...
相机标定 手眼标定 网页版

相机标定 手眼标定 网页版

欢迎使用&#xff0c;请移步ipv6 site (jah10527.github.io)
阅读更多...
下载网页上的在线视频 网络视频 视频插件下载

下载网页上的在线视频 网络视频 视频插件下载

只需要在浏览器上安装一个插件&#xff0c;就可以下载大部分的视频文件&#xff0c;几秒到一两个小时的视频&#xff0c;基本都不是问题。详细解决如下&#xff1a; 0、因为工作需要&#xff0c;需要获取某网站上的宣传视频&#xff0c;我像往常一样&#xff0c;查看视频的url…
阅读更多...
C语言回顾笔记

C语言回顾笔记

1.变量 2.运算符 3.if判断 4.接力break 5.最大公约数 6.水仙花数 #include<stdio.h> int main(){int n;scanf("%d",&n);//根据输入的位数计算&#xff0c;如最小三位数100 int first 1;int i 1;while(i<n){first *10;i; }printf("first%d\n"…
阅读更多...
数据分析POWER BI之power query

数据分析POWER BI之power query

1.导入数据 ctrla全选--数据--获取数据--其他来源--来自表格/区域 导入数据&#xff0c;进入编辑模式 2.整理与清除 清除&#xff1a;删除所选列的非打印字符 转换--格式--清除 修整&#xff1a;删除前面和后面的空格 转换---格式---修整&#xff08;修整后前面后面的空格没有了…
阅读更多...
代码随想录算法训练营第三十四天|1005. K次取反后最大化的数组和，135，分发糖果

代码随想录算法训练营第三十四天|1005. K次取反后最大化的数组和，135，分发糖果

1005. K 次取反后最大化的数组和 题目 给你一个整数数组 nums 和一个整数 k &#xff0c;按以下方法修改该数组&#xff1a; 选择某个下标 i 并将 nums[i] 替换为 -nums[i] 。 重复这个过程恰好 k 次。可以多次选择同一个下标 i 。 以这种方式修改数组后&#xff0c;返回数…
阅读更多...
选项式API和组合式API的区别

选项式API和组合式API的区别

选项式(options) API 和组合式(composition) API两种不同的风格书写&#xff0c;Vue3 的组件可以使用这两种api来编写。 选项式API和组合式API的区别 选项式API 选项式 API&#xff0c;具有相同功能的放在一起&#xff0c;可以用包含多个选项的对象来描述组件的逻辑&…
阅读更多...
500元以内的运动耳机推荐有哪些？五大倍受欢迎的机型总汇

500元以内的运动耳机推荐有哪些？五大倍受欢迎的机型总汇

作为一个运动爱好者&#xff0c;我始终认为一款优秀的运动耳机不仅能够带来音乐的享受&#xff0c;更能为运动增添动力&#xff0c;但市面上的运动耳机种类繁多&#xff0c;价格不一&#xff0c;如何选择一款性价比高、功能实用的运动耳机成为了许多消费者的难题&#xff0c;今…
阅读更多...
发布文章积分自动增加

发布文章积分自动增加

controller ApiOperation(value "添加文章")PostMapping("/addwengzhang")public String addwengzhang(RequestBody WengDto wengDto) {if (wengDto.getContent() null || wengDto.getTitle() null) {return "参数不可为空";}User user user…
阅读更多...
汽车ABS的bangbang控制和模糊PID控制

汽车ABS的bangbang控制和模糊PID控制

1、内容简介 略 82-可以交流、咨询、答疑 2、内容说明 摘要&#xff1a;本文旨在设计一种利用模糊控制理论优化的pid控制器&#xff0c;控制abs系统&#xff0c;达到对滑移率最佳控制范围的要求 &#xff0c;所提出的方案采用级联控制架构&#xff1a;设计用于外环中的车轮打…
阅读更多...
[Java、Android面试]_12_java访问修饰符、抽象类和接口

[Java、Android面试]_12_java访问修饰符、抽象类和接口

文章目录 1. java访问修饰符2. 抽象类和接口2.1 抽象类2.2 接口2.3 抽象类和接口的区别 本人今年参加了很多面试&#xff0c;也有幸拿到了一些大厂的offer&#xff0c;整理了众多面试资料&#xff0c;后续还会分享众多面试资料。 整理成了面试系列&#xff0c;由于时间有限&…
阅读更多...
最新文章

Copyright @ 2022~2023