百度地图3d区域掩膜,最常见通用的大屏地图展现形式
需求及效果
原本项目使用的是百度地图3.0,也就是2d版本的那个地图,客户不满意觉得不够好看,让把地图改成3d的,但是我们因为另外的系统用的都是百度地图,为了保持统一只能用百度地图做
经过3天的努力,最后我终于把这个效果实现了,效果如下:
如何引用GL版本
为了实现这个功能,首先要将百度地图升级为GL版本。
- GL版本引用的百度地图API需将之前引入的替换为:
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
初始化地图
地图初始化还是和之前一样,只不过要使用BMapGL
const map = new BMapGL.Map("monitorMap"); // 创建地图实例var point = new BMapGL.Point( 128.2015353412464,49.76416045410938); // 创建点坐标map.centerAndZoom(point, 7); // 设置地图中心点map.enableScrollWheelZoom(true); // 允许鼠标滚动缩放地图级别
将底图改为卫星地图
GL版本的百度地图有三种地图类型:
- 地球模式(BMAP_EARTH_MAP),不过这个模式能支持的交互操作有限
- 标准地图(BMAP_NORMAL_MAP)
- 卫星地图(BMAP_SATELLITE_MAP)
因此,我们给地图加上配置:
const map = new BMapGL.Map("monitorMap",{mapType:BMAP_SATELLITE_MAP,
});
禁用地图旋转,禁止技改变倾角
这个地图我们不能让用户自己去改变旋转角和倾角,因此需要禁用
const map = new BMapGL.Map("monitorMap",{mapType:BMAP_SATELLITE_MAP,// 禁用用户旋转enableRotate: false,// 禁用用户修改倾斜角度enableTilt: false,
});
代码修改地图倾角
做了这么多发现地图依然不是三维的
不要慌,我们手动来改一下地图倾角
map.setTilt(50); //设置地图的倾斜角度
现在地图终于倾斜了
掩膜以及掩膜经常失败怎么解决
由于我们的效果只需要留下黑龙江省的地图,所以需要区域掩膜
我们需要获取黑龙江的边界,在百度地图中有对应API:
var bdary = new BMapGL.Boundary();
bdary.get('黑龙江', function (rs) {// 绘制行政区for (var i = 0; i < rs.boundaries.length; i++) {var path = [];var xyArr = rs.boundaries[i].split(';');var ptArr = [];for (var j = 0; j < xyArr.length; j++) {var tmp = xyArr[j].split(',');var pt = new BMapGL.Point(tmp[0], tmp[1]);ptArr.push(pt);}// 添加掩膜var mapmask = new BMapGL.MapMask(ptArr, {isBuildingMask: true,isPoiMask: true,isMapMask: true,showRegion: 'inside',});map.addOverlay(mapmask);// 给掩膜描边var border = new BMapGL.Polyline(ptArr, {strokeColor: '#15a6db',strokeWeight: 3,strokeOpacity: 1});map.addOverlay(border);}
})
现在终于把黑龙江单独拎出来了,但为什么背景是白色的?这个先不急,我们先来解决另一个问题
区域掩膜失败怎么解决
多刷新几次页面,你会发现有时候区域掩膜会失败,为什么呢?
我们分析一下,为什么有时失败有时不失败,这是不是非常像接口请求有时成功有时失败的样子,实际上百度地图也是这样做的,是因为黑龙江的边界请求有时候会失败
解决思路:
黑龙江的边界不会变的,我们把请求成功的黑龙江边界存起来就行了
// heilongjiang.js
export default {"boundaries": ["121.50682596458674, 53.341380780914506;121.51059812908427, 53.34188131383469;121.51345447111437, 53.34197641979837;121.51517077362173, 53.34203018226125;.....]
}
然后将代码修改一下:
import heilongjiang from "./heilongjiang.js";for (var i = 0; i < heilongjiang.boundaries.length; i++) {var path = [];var xyArr = heilongjiang.boundaries[i].split(';');var ptArr = [];for (var j = 0; j < xyArr.length; j++) {var tmp = xyArr[j].split(',');var pt = new BMapGL.Point(tmp[0], tmp[1]);ptArr.push(pt);}var mapmask = new BMapGL.MapMask(ptArr, {isBuildingMask: true,isPoiMask: true,isMapMask: true,showRegion: 'inside',});map.addOverlay(mapmask);// 给地图描边,不需要描边可以去掉var border = new BMapGL.Polyline(ptArr, {strokeColor: '#15a6db',strokeWeight: 3,strokeOpacity: 1});map.addOverlay(border);}
怎么让背景变透明
我们在初始化地图的时候加上配置:
const map = new BMapGL.Map("monitorMap", {enableRotate: false,enableTilt: false,mapType:BMAP_SATELLITE_MAP,backgroundColor: [0, 0, 0, 0],});
然后设置css样式:
#monitorMap {background: none!important;
}
现在背景变透明了,我在地图下方加上了自己的背景图
顶上的天空渐变怎么去掉
细心的同学会发现地图顶上有白色的天空渐变,我们并不想要它,加一个配置去掉它:
map.setDisplayOptions({skyColors: ['rgba(186, 0, 255, 0)','rgba(186, 0, 255, 0)']
})
将天空渐变色的透明度都改为0就可以去掉了
怎么给地图增加厚度
不想要有厚度的地图到这一步就可以结束了,后面该干嘛干嘛,但是呢,我喜欢折腾,试过很多种方法都不行,最终我使用了百度的三维模型图层,这一步需要有一点threejs的基础,不过没有也没关系,跟着我往下走就是了
引入依赖
在百度api后面追加几个script:
<script type="text/javascript"src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
<!--引入样式-->
<script type="text/javascript" src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<script type="text/javascript" src="https://mapopen-pub-jsapigl.bj.bcebos.com/newThree/three.min.js"></script><script type="text/javascript" src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.151/dist/mapvgl.min.js"></script>
<script type="text/javascript" src="https://code.bdstatic.com/npm//mapvgl@1.0.0-beta.151/dist/mapvgl.threelayers.min.js"></script>
修改地图初始化配置
const map = new BMapGL.Map("monitorMap", {forceRenderType: 'webgl',coordsType: 5, // coordsType指定输入输出的坐标类型,3为gcj02坐标,5为bd0ll坐标,默认为5。enableRotate: false,enableTilt: false,mapType:BMAP_SATELLITE_MAP,backgroundColor: [192, 214, 213, 0],});
初始化三维图层
var view = new mapvgl.View({map: map
});threeLayer = new mapvgl.ThreeLayer({ notUpdateSize: false });
view.addLayer(threeLayer);
这里的threeLayer就相当于threejs中的scene了,后面的代码和在threejs里写差不多
添加灯光
var lights = [];
// 创建点光源
lights[0] = new THREE.PointLight(0xffffff, 1, 0);
// 给点光源设置位置
lights[0].position.set(0, -1000, 1000);
// 将光源添加到场景中
threeLayer.scene.add(lights[0]);
使用threejs的挤出几何体 ExtrudeGeometry 实现黑龙江省的厚度
根据黑龙江省的边界创建挤出几何体mesh,该几何体的高度为46000,因此将该几何体下移46001让该几何体位于地图的下方。
const shape = new THREE.Shape()for (var i = 0; i < heilongjiang.boundaries.length; i++) {var xyArr = heilongjiang.boundaries[i].split(';');for (var j = 0; j < xyArr.length; j++) {var tmp = xyArr[j].split(',');// 将经纬度坐标转换为平面坐标var pt = map.lnglatToMercator(tmp[0], tmp[1]);if(j == 0) {shape.moveTo( pt[0], pt[1] );}else{shape.lineTo( pt[0], pt[1] );}}}const extrudeSettings = {steps: 2,depth: 46000};// 创建挤出几何体的geometryconst geometry1 = new THREE.ExtrudeGeometry( shape, extrudeSettings );// 创建挤出几何体的材质const material1 = new THREE.MeshLambertMaterial( { color: 0x15a6db, transparent:true,opacity:0.5 } );// 创建地图厚度meshconst mesh = new THREE.Mesh( geometry1, material1 ) ;// 修改mesh的位置mesh.position.z = -46001// 将mesh添加到threeLayer中去threeLayer.add( mesh );
创建三维图层的动画循环
写过threejs的同学都知道,threejs绘制物体是需要有动画循环的,动画循环中更新画面
function animate() {requestAnimationFrame(animate);threeLayer.update();
}
requestAnimationFrame(animate);
现在我们的地图有厚度了,如果想要更厚,可以多挤出一点距离
其实这里是有些问题的,你会发现卫星地图也变蓝一些了,这是因为三维模型图层在地图图层的上方,我还没有找到解决这个的办法,因此将模型的透明度调整为了0.5,结果还挺好看的,就算了吧
地图缩小总是自动修改倾角怎么解决
现在用鼠标滚轮缩放一下地图,哎!哎???百度地图怎么自动给我修改了倾斜角!!!
然后我翻遍了api文档和demo都没有找到怎么调整这个参数
过程就不说了,我看了百度地图api的代码找了很久最终才实现,现在来说一下解决方案:
-
用浏览器打开 https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥 秘钥要填自己的哦,打开是下面的样子
-
然后用浏览器打开红框圈中的地址,将这个js文件下载到本地,引入到项目中
-
打开刚刚的js文件,全局搜索 _enableTiltZoom ,找到这一行
将其修改为
this._enableTiltZoom = 1;
然后限制一下地图最小的缩放尺寸
const map = new BMapGL.Map("monitorMap", {forceRenderType: 'webgl',coordsType: 5, // coordsType指定输入输出的坐标类型,3为gcj02坐标,5为bd0ll坐标,默认为5。enableRotate: false,enableTilt: false,mapType:BMAP_SATELLITE_MAP,backgroundColor: [192, 214, 213, 0],minZoom: 5});
好了,现在无论怎么缩放都不会修改倾斜角了
如何在地图上布三维点
如何在地图上布点呢,一般的点百度地图都有demo,这里我就不说了
大家都知道百度地图的marker在超过两百个以后会巨卡,之前我也写过2d版本的百度地图海量点方案,这里我写一下3d版本的
我这里会准备一个变量存储点的坐标数组,然后遍历数组往threeLayer中添加 Cone 当做点位:
const pointList = [] // 存储三维点对象,后面射线拾取的时候要用
let pointWidth = 10000 // 三维点的基础宽度
let pointHeight = 50000 // 三维点的基础高度
let pointZ = 25000 // 三维点的z轴位置// 颜色数组,根据不同的status状态画不同颜色的点
const colorList = [0xEAEAEA, 0x1CE945, 0xEDE11C, 0xE9860D, 0xF0323F]
// 测试数据
const bridgeListData = [{bridgeName: '测试1',latitude:47.07133734521393,longitude:129.09809887846538},{bridgeName: '测试2',latitude:45.7550708,longitude:126.4918776}
]for(let i = 0;i<bridgeListData.length;i++) {const {longitude, latitude, bridgeName, status} = bridgeListData[i]let color = colorList[status + 1]const geometry = new THREE.ConeGeometry( pointWidth, pointHeight, 3 );const material = new THREE.MeshLambertMaterial( {color: color} );const cone = new THREE.Mesh( geometry, material );// 将经纬度转换为平面坐标const point = map.lnglatToMercator(longitude,latitude)// 设置点的空间位置cone.position.x = point[0];cone.position.y = point[1];cone.position.z = pointZ;// 将点旋转270度,让锥形的尖头朝下cone.rotateX(270 / 180 * Math.PI);// 将数据存储到点对象上cone.data = bridgeListData[i]pointList.push(cone)threeLayer.add(cone);}
这样点是加上去了,但是缩放地图之后,点会变得巨大
三维点如何保持匀称的大小
如何保持点的大小在视觉上不变呢?
其实我也没有做到完全不变,让大小完全不变的那个公式我暂时还没有摸索出来
原理其实就是在地图缩放的时候,将点的尺寸根据地图当前的zoom属性做一下修改就好了
const pointList = []
let pointWidth = 10000
let pointHeight = 50000
let pointZ = 25000const colorList = [0xEAEAEA, 0x1CE945, 0xEDE11C, 0xE9860D, 0xF0323F]
const bridgeListData = [{bridgeName: '测试1',latitude:47.07133734521393,longitude:129.09809887846538},{bridgeName: '测试2',latitude:45.7550708,longitude:126.4918776}
]// 根据地图的层级,返回不同的scale值
function getScale(level) {if(level > 1 && level <= 10) {return (15 - level)/level}else if(level > 10 && level <= 12){return (13 - level)/level}else if(level > 12 && level <= 14) {return 1/(level * (level - 11))}else if(level > 14 && level <= 16) {return 1/(level * (level - 11) * 2)}else if(level > 16 && level <= 18) {return 1/(level * (level - 11) * 3)}else if(level > 18) {return 1/(level * (level - 11) * 4)}return 1/level
}const level = map.getZoom()
const scale = getScale(level)// 绘制点
for(let i = 0;i<bridgeListData.value.length;i++) {const {longitude, latitude, bridgeName, status, bridgeUniqueCode} = bridgeListData.value[i]let color = colorList[status + 1]const geometry = new THREE.ConeGeometry( pointWidth, pointHeight, 3 );const material = new THREE.MeshLambertMaterial( {color: color} );const cone = new THREE.Mesh( geometry, material );// 缩放点的大小cone.scale.x = scalecone.scale.y = scalecone.scale.z = scaleconst point = map.lnglatToMercator(longitude,latitude)cone.position.x = point[0];cone.position.y = point[1];// 点的z坐标也要缩放cone.position.z = pointZ * scale;cone.rotateX(270 / 180 * Math.PI);cone.data = bridgeListData.value[i]pointList.push(cone)threeLayer.add(cone);
}// 地图缩放层级的时候更改点的大小
map.addEventListener('zoomend', function(e) {const level = map.getZoom()const scale = getScale(level)pointList.forEach(cone => {cone.scale.x = scalecone.scale.y = scalecone.scale.z = scalecone.position.z = pointZ*scale})});
三维点的点击事件
然后就可以给三维点添加点击事件了,这里我在map的click事件中,使用raycaster射线法进行拾取
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();// 获取地图的宽高
const size = map.getSize()
const canvasWidth = size.width
const canvasHeight = size.heightmap.addEventListener('mousedown', function (e) {var fs = [...pointList]// 归一化鼠标位置,范围-1 1,原点在中心mouse.x = (e.offsetX / canvasWidth) * 2 - 1;mouse.y = -(e.offsetY / canvasHeight) * 2 + 1;raycaster.setFromCamera(mouse, threeLayer.camera);if (fs.length>0) {// 射线检测的对象为三维点var intersects = raycaster.intersectObjects(fs);console.log(intersects)}
});
这里注意,归一化的时候,一定要用地图本身的宽高,而不是整个屏幕的宽高,不然射线拾取会有问题的!
好啦,到这里效果就和我开头的一样啦,只是少了弹窗的部分,弹窗我是用html写的,和这次的主题关系不大~
相关文章:
![](https://img-blog.csdnimg.cn/img_convert/108a80e44e9c9235929d8160221014cb.png)
百度地图3d区域掩膜,最常见通用的大屏地图展现形式
需求及效果 原本项目使用的是百度地图3.0,也就是2d版本的那个地图,客户不满意觉得不够好看,让把地图改成3d的,但是我们因为另外的系统用的都是百度地图,为了保持统一只能用百度地图做 经过3天的努力,最后我终于把这个…...
![](https://img-blog.csdnimg.cn/direct/704bb53d475345e5898273ade14b7fba.png)
小区物业管理收费系统源码小程序
便捷、透明、智能化的新体验 一款基于FastAdminUniApp开发的一款物业收费管理小程序。包含房产管理、收费标准、家属管理、抄表管理、在线缴费、业主公告、统计报表、业主投票、可视化大屏等功能。为物业量身打造的小区收费管理系统,贴合物业工作场景,轻…...
![](https://img-blog.csdnimg.cn/direct/f024ea5e422e4b27baec1cba90698b13.png)
C++实现一个简单的Qt信号槽机制
昨天写这个文章《深入探讨C的高级反射机制(2):写个能用的反射库》的时候就在想,是不是也能在这套反射逻辑的基础上,实现一个类似Qt的信号槽机制? Qt信号槽机制简介 所谓的Qt的信号槽(Signals …...
![](https://www.ngui.cc/images/no-images.jpg)
微信小程序常用的传值
1.通过 URL 传参 在页面跳转时,可以在 URL 中携带参数进行传递,然后在目标页面的 onLoad 生命周期中获取参数。 // 在页面 A 中跳转到页面 B 并传递参数 wx.navigateTo({url: /pages/detail/index?id123 });// 在页面 B 的 onLoad 生命周期中获取参数…...
![](https://www.ngui.cc/images/no-images.jpg)
SQL面试真题解答 数据统计分析,求“同比、环比”等(SQL窗口函数使用)
SQL面试真题解答 数据统计分析,求“同比、环比”等(SQL窗口函数使用) 环比、环比增长率、同比、同比增长率,根据百度百科上的 说明: 环比增长率 环比增长率,一般是指和上期相比较的增长率。 环比增长率&a…...
![](https://img-blog.csdnimg.cn/direct/f14731c6ade14f9c93012d0c26345d99.png)
【递归、搜索与回溯】floodfill算法二
floodfill算法二 1.被围绕的区域2.太平洋大西洋水流问题3.扫雷游戏4.衣橱整理 点赞👍👍收藏🌟🌟关注💖💖 你的支持是对我最大的鼓励,我们一起努力吧!😃😃 1.被围绕的区域…...
![](https://img-blog.csdnimg.cn/img_convert/9d39c1a96b4d8d22e99f08b4d6ea8d60.png)
Dataease安装,配置Jenkins自动部署
Dataease安装,配置Jenkins自动部署 一.安装Dataease 安装前准备:1.Ubuntu20.04 LTS国内源安装指定版本Docker 2.docker-compose安装 下载离线安装的安装包,下载地址:https://community.fit2cloud.com/#/download/dataease/v1-…...
![](https://img-blog.csdnimg.cn/direct/72d02e1aaa9444dc8949637046ccbb87.png)
关于IDEA启动报错 【JAVA_HOME does not point to a valid JM installation】
希望文章能给到你启发和灵感~ 感谢支持和关注~ 阅读指南 一、基础环境说明1.1 硬件环境1.2 软件环境 二、起因 一、基础环境说明 考虑环境因素不同,大家适当的对比自己的软硬件环境情况分析~ 1.1 硬件环境 MacOS Monterey 版本 1…...
![](https://img-blog.csdnimg.cn/direct/4c465fc5818d456ead1a19d37ff9b5e0.png#pic_center)
设置小蓝熊的CPU亲和性、CPU优先级再设置法环的CPU亲和性
# 适用于Windows系统 # 时间 : 2024-06-28 # 作者 : 三巧(https://blog.csdn.net/qq_39124701) # 文件名 : 设置小蓝熊的CPU亲和性、CPU优先级再设置法环的CPU亲和性.ps1 # 使用方法: 打开记事本,将所有代码复制到记事本中,保存文件时候修改文件后…...
![](https://www.ngui.cc/images/no-images.jpg)
Oracle中的序列(Sequence)是一种数据库对象
Oracle中的序列(Sequence)是一种数据库对象,用于生成数字序列,通常用于为主键列生成唯一、连续的数值。以下是一些使用序列的案例: 1. **为主键生成唯一值**: 在Oracle中,序列最常用的场景是…...
![](https://img-blog.csdnimg.cn/img_convert/dcf9cb6779b7122f78ddd2c469cf9239.webp?x-oss-process=image/format,png)
热点观察 | 《姜饼人王国》新作来袭、《Monopoly GO!》荣登5月全球畅销榜榜首
本周出海热点: 1. 中国品牌借欧洲杯打响知名度 2. 米哈游玩家切割二次元 3. 6月27日,Steam游戏《六月衷曲》上线TapTap 4. 《Monopoly GO!》荣登5月全球畅销榜榜首 5. 《地下城与勇士》拿下本周亚洲T1市场畅销榜冠军 6. 《姜饼人王国》新作强势登顶…...
![](https://img-blog.csdnimg.cn/direct/86b3252659d14bf5a5593ba281ad4e3c.png)
智能网络构建:探索大模型在网络领域的应用
网络领域以其高度复杂性和快速迭代为特点,完成从网络设计、配置、诊断到安全的网络任务需要广泛的专业知识。这些任务的固有复杂性,加上网络技术和协议不断变化的格局,为传统基于机器学习的方法带来了显著的障碍。这些方法在泛化和自动化网络…...
![](https://www.ngui.cc/images/no-images.jpg)
C++编程逻辑讲解step by step:定义一个Person类,它的每个对象表示一个人。
题目 定义一个Person类,它的每个对象表示一个人。数据成员必须包含姓名、出生年份、死亡年份,一个构造函数,一析构函数,读取数据的成员函数,一个print()成员函数显示所有数据。 #include <iostream> using namespace std;…...
![](https://img-blog.csdnimg.cn/img_convert/c96206d33c97720cf0cf2e13f048280e.jpeg)
DBdoctor产品介绍
基本信息 DBdoctor是一款企业级数据库监控、巡检、性能诊断、SQL审核与优化平台,致力于解决一切数据库性能问题。采用eBPF技术可对数据库做细粒度的扫描,帮助您一分钟内找到数据库性能问题,实现性能诊断百倍提效。针对数据库性能诊断门槛高、…...
![](https://img-blog.csdnimg.cn/direct/fc10cf34f41d4504a45c250f389cc6a1.png)
一加Ace3 刷机救砖简化说明
注意:工具使用英文目录,支持救砖和降级。PJE110国行版,CPH2609国际版。目前国行版不能完美转换国际版,每次升级都需要刷oplusstanvbk,不建议使用。跨国转换或ROOT一定先解锁Bootloader,可以使用“一加全能工…...
![](https://img-blog.csdnimg.cn/direct/65c8856f29ef480c9df12bae63c72221.png)
【服务器05】之【登录/注册账号成功转至游戏场景】
Unity登录注册数据库 打开【服务器01】的文章项目 导入新UI系统 点击2D 双击输入栏位置 修改输入框尺寸及位置 放大字体 修改默认输入文字 发现中文字变成了口口口口 原因是新UI系统不支持中文,解决这个问题需要更换字体 并且修改输入时字体大小 我们取电脑中找Fon…...
![](https://img-blog.csdnimg.cn/img_convert/f53c0fd2ebd46b34da97920dc1bca8c4.png)
平价蓝牙耳机推荐性价比高,性价比高的蓝牙耳机学生党推荐
市场上的蓝牙耳机价格从几十元到几百甚至上千不等,性能与价格也呈现多样化,对于学生党来说,一个理想的选择是那些性价比高的平价蓝牙耳机,它们在不牺牲必要功能的同时,提供了可接受的音质和足够的便利性,接…...
![](https://img-blog.csdnimg.cn/img_convert/c50a636333d5533ec80d57ba1425755f.jpeg)
【华为战报】5月、6月HCIP考试战报!
华为认证:HCIA-HCIP-HCIE 点击查看: 【华为战报】4月 HCIP考试战报! 【华为战报】2月、3月HCIP考试战报! 【华为战报】11月份HCIP考试战报! 【HCIE喜报】HCIE备考2个月丝滑通关,考试心得分享ÿ…...
![](https://www.ngui.cc/images/no-images.jpg)
OBD诊断
文章目录 OBD 参考标准OBD 服务OBD服务中的DTCOBD服务中0x03和0x07的区别参考 OBD 参考标准 OBD的标准: ISO 15031 Road Vehicles-Communication between vehicle and external equipment for emission-related diagnostics OBD 服务 序号ID服务说明服务详解10x0…...
![](https://img-blog.csdnimg.cn/direct/e678d5c05144448f9c9233bf292616a1.gif)
Elasticsearch 聚合查询
Hi~!这里是奋斗的小羊,很荣幸您能阅读我的文章,诚请评论指点,欢迎欢迎 ~~ 💥💥个人主页:奋斗的小羊 💥💥所属专栏:C语言 🚀本系列文章为个人学习…...
![](https://www.ngui.cc/images/no-images.jpg)
adb remount fails - mount: ‘system‘ not in /proc/mounts 解决办法
mount -o rw,remount /挂载根 mount -o ro,remount /将状态重置为“ro” 以下是我个人的一些话 我热衷于在网络上分享我遇到的问题和解决方案。如果你有任何问题或需要帮助,欢迎留言交流,在共同学习的道路上一起进步。我很高兴结识那些在学习上积极进取…...
![](https://img-blog.csdnimg.cn/img_convert/68eae5855b973f04b2ca97846c92eb45.png)
百元蓝牙耳机推荐2024哪个好?蓝牙耳机性价比之王推荐
现在的百元价位的蓝牙耳机成为了许多消费者入门级的选择,它不仅需要满足基础的通话需求,更要在音质、舒适度、续航能力等多方面达到一定的标准,随着技术的发展和市场的竞争激烈,各大品牌在这一价格区间推出了极具竞争力的产品&…...
![](https://img-blog.csdnimg.cn/img_convert/4d5f13ef5ed83071c983dfd83319ce9b.png)
Spring项目报错解读与全部报错详解
你好,我是Qiuner. 为帮助别人少走弯路和记录自己编程学习过程而写博客 这是我的 github https://github.com/Qiuner ⭐️ gitee https://gitee.com/Qiuner 🌹 如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 😄 (^ ~ ^) 想看更多 那就点个关注吧 我…...
![](https://www.ngui.cc/images/no-images.jpg)
10秒教会你mysql的连接
连接MySQL数据库通常可以通过多种方法实现,以下是几种常见的方法,我将按照您的要求以清晰、分点的方式归纳说明: 1. 使用MySQL命令行客户端 打开终端或命令提示符:首先,打开您的计算机上的终端或命令提示符窗口。输入…...
![](https://i-blog.csdnimg.cn/direct/157fd93c267a42c699c78b4450b2f638.png)
万物皆可爬——亮数据代理IP+Python爬虫批量下载百度图片助力AI训练
💂 个人网站:【 摸鱼游戏】【神级代码资源网站】【导航大全】🤟 一站式轻松构建小程序、Web网站、移动应用:👉注册地址🤟 基于Web端打造的:👉轻量化工具创作平台💅 想寻找共同学习交…...
![](https://img-blog.csdnimg.cn/direct/49dd8243b06e49b5a23ea6f24a1d493a.png)
OpenCv形态学(一)
目录 形态学转换 结构元素 腐蚀 膨胀 开运算 闭运算 形态学梯度 顶帽 黑帽 图像轮廓 查找轮廓 绘制轮廓 形态学转换 形态变换是一些基于图像形状的简单操作。通常在二值图像上执行。它需要两个输入,一个是我们的原始图像,第二个是决定操作性…...
![](https://www.ngui.cc/images/no-images.jpg)
CSS基础汇总
CSS 1. 选择器 标签选择器 通过标签名找标签(把指定的样式应用到某一个、组、类标签上) id选择器 通过id属性值找标签,关键符号#id值{样式} 复合选择器 1、并列选择器:关键符号,用法:选择器1,…...
![](https://www.ngui.cc/images/no-images.jpg)
cocos creator让所有button点击时播放音效
原理: 利用prototype属性,通过重写 cc.Button.prototype._onTouchEnded 方法,以便在按钮被点击时播放音频。通过重写其 _onTouchEnded 方法,可以添加自定义行为,如播放音频。 概念解释: prototype&#…...
![](https://i-blog.csdnimg.cn/direct/f65385a03b184c2897165f166b42ccec.png)
mybatisplus自带的雪花算法(IdType.ASSIGN_ID)无法自动生成弊端缺点,以及改进方法
前言 今日在使用mybatisplus的雪花算法自动给id赋值时发现怎么都是null的情况,这尼玛测了半天,终于发现巨坑,废话不多说,直接上干货 IService.save 只有调用IService中的save方法才能正常生成id,像IService.saveBatc…...
![](https://img-blog.csdnimg.cn/direct/afa1f0185e324d7c91fd553cedbb95d2.png)
单位转换:将kb转换为 MB ,GB等形式
写法一: function formatSizeUnits(kb) {let units [KB, MB, GB, TB, PB,EB,ZB,YB];let unitIndex 0;while (kb > 1024 && unitIndex < units.length - 1) {kb / 1024;unitIndex;}return ${kb.toFixed(2)} ${units[unitIndex]}; } console.log(for…...
![](https://img-blog.csdnimg.cn/img_convert/fb143cbadac49abc5ab38d6632ce02a3.webp?x-oss-process=image/format,png)
优思学院|「按计划推动型」与「需求拉动型」的生产模式
针对生产架构做对比分类的用语,主要有按计划推进型与需求拉动型。 「按计划推动型」与「需求拉动型」两者乃是生产架构上常使用、成对比的两个用语。不过,有时不只用来指单纯的生产现场架构,也有人把它应用在更广泛的生产架构设计上。 按计划…...
![](https://img-blog.csdnimg.cn/direct/8ad94351467644b3a3d2d67977b873fc.png)
解释什么是lambda函数?它有什么好处?
💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…...
![](https://i-blog.csdnimg.cn/direct/6f85ffe41c2d48b180bf4cd8b3ef9564.png)
码农:如何快速融入团队
问题: 码农如何快速融入团队? 记住一个标准:能干事、能抗事。 总结一个字: 靠谱。 适用范围:新手码农、老司机码农、测试、DBA、运维、产品经理、项目经理、架构师、技术专家、。。。。适用于任何行业的打工者。 下面要…...
![](https://i-blog.csdnimg.cn/direct/838dec6a99aa42fe9f474a3db323f460.png)
Android 通知组
一. 通知组简介 从 Android 7.0(API 级别 24)开始,您可以在一个组中显示相关通知。如下所示: 图 1. 收起(顶部)和展开(底部)的通知组。 注意 :如果应用发出 4 条或更多条通知且未…...
![](https://img-blog.csdnimg.cn/direct/feb9a66998344833972ea678e5538ded.png)
【机器学习】ChatTTS:开源文本转语音(text-to-speech)大模型天花板
目录 一、引言 二、TTS(text-to-speech)模型原理 2.1 VITS 模型架构 2.2 VITS 模型训练 2.3 VITS 模型推理 三、ChatTTS 模型实战 3.1 ChatTTS 简介 3.2 ChatTTS 亮点 3.3 ChatTTS 数据集 3.4 ChatTTS 部署 3.4.1 创建conda环境 3.4.2 拉取源…...
![](https://img-blog.csdnimg.cn/direct/4ff69535f9974d8297293337f490d16d.png)
宏集物联网工控屏通过 S7 ETH 协议采集西门子 1200 PLC 数据
前言 为了实现和西门子PLC的数据交互,宏集物联网HMI集成了S7 PPI、S7 MPI、S7 Optimized、S7 ETH等多个驱动来适配西门子200、300、400、1200、1500、LOGO等系列PLC。 本文主要介绍宏集物联网HMI如何通过S7 ETH协议采集西门子1200 PLC的数据,文中详细介…...
![](https://img-blog.csdnimg.cn/direct/b8dc3aaaa6e04bf3bb815d57c302a749.png)
C语言学习记录(十一)——指针基本知识及运算
文章目录 前言1. 指针的概念2.指针变量的说明3. 指针的含义4. 指针运算①指针加减:②指针的关系运算符 前言 一个学习嵌入式的小白~ 有问题评论区或私信指出~ 提示:以下是本篇文章正文内容,下面案例可供参考 1. 指针的概念 在C语言中&…...
![](https://www.ngui.cc/images/no-images.jpg)
Oracle中 ROW_NUMBER()的语法及在对应不同需求下应如何使用
Oracle数据库中的ROW_NUMBER()函数是一个窗口函数,它为查询结果集中的每一行分配一个唯一的序号。这个函数在数据分析、分页查询、数据去重和排名问题等方面非常有用。ROW_NUMBER()函数的语法如下: ROW_NUMBER() OVER ( [ PARTITION BY column ] ORDER …...
![](https://img-blog.csdnimg.cn/img_convert/da772d4410332f7c484d4aeb50c0f3ec.png)
德邦快递大件可以寄2米长物品吗?大件跨省行李用哪个快递便宜?
搬家或寄送特殊尺寸物品时,快递的选择尤为关键。特别是2米长的大件物品,是否能够承运?哪家快递在跨省大件行李方面更经济?今天,就为你解答这些疑问。 1、祺祺寄快递小程序: “祺祺寄快递”小程序ÿ…...
![](https://img-blog.csdnimg.cn/direct/bc19ba5b23394ab6bd7b62e8fb7718ba.png)
C# 在WPF .net8.0框架中使用FontAwesome 6和IconFont图标字体
文章目录 一、在WPF中使用FontAwesome 6图标字体1.1 下载FontAwesome1.2 在WPF中配置引用1.2.1 引用FontAwesome字体文件1.2.2 将字体文件已资源的形式生成 1.3 在项目中应用1.3.1 使用方式一:局部引用1.3.2 使用方式二:单个文件中全局引用1.3.3 使用方式…...
![](https://img-blog.csdnimg.cn/direct/b6c3b10439e841f89e228a323fc010cc.png)
万能自定义预约小程序源码系统 适合任何行业在线预约报名 前后端分离 带完整的安装代码包以及搭建教程
系统概述 在当今数字化时代,线上预约已成为各行各业不可或缺的一部分。为满足广大企业和个人对在线预约系统的需求,我们特别推出了这款“万能自定义预约小程序源码系统”。该系统以其高度的灵活性和可扩展性,为各行各业提供了完美的在线预约…...
![](https://www.ngui.cc/images/no-images.jpg)
【MySQL备份】mysqldump篇
目录 1.简介 2.基本用途 3.命令格式 3.1常用选项 3.2常用命令 4.备份脚本 5.定时执行备份脚本 1.简介 mysqldump 是 MySQL 数据库管理系统的命令行实用程序,用于创建数据库的逻辑备份。它能够导出数据库的结构(如表结构、视图、触发器等…...
![](https://img-blog.csdnimg.cn/direct/2849e965b40f4f959502af5cfb9934cb.png)
控制台扫雷(C语言实现)
目录 博文目的实现思路项目创建文件解释 具体实现判断玩家进行游戏还是退出扫雷棋盘的确定地图初始化埋雷玩家扫雷的实现雷判断函数 源码game.cgame.h扫雷.c 博文目的 相信不少人都学习了c语言的函数,循环,分支那我们就可以写一个控制台的扫雷小游戏来检…...
![](https://img-blog.csdnimg.cn/img_convert/5da347a73a7a3a0e96e960fe03f691c0.jpeg)
操作系统期末复习 | 批处理程序 | PV实现同步互斥 | 调度算法 | 页面置换算法 | 磁盘调度算法
操作系统引论 批处理程序 单道批处理:引入脱机输入/输出技术,并由监督程序负责控制作业的输入、输出。主要优点是缓解了一定程度的人机速度矛盾,资源利用率有所提升。主要缺点是内存中仅能有一道程序运行,只有该程序运行结束之后…...
![](https://www.ngui.cc/images/no-images.jpg)
字符串的六种遍历方式
在 Java 中,有多种遍历字符串的方法。以下是几种常见的遍历字符串的方法,并附有示例代码 1. 使用 for 循环 这是最常见和基础的遍历方法,通过索引访问每个字符。 public class StringTraversal {public static void main(String[] args) {S…...
![](https://www.ngui.cc/images/no-images.jpg)
在码云(Gitee)上建立分支(Branch)的步骤如下:
步骤一:登录码云 首先,打开码云的官方网站(gitee.com),输入用户名和密码登录你的账号。 步骤二:创建仓库 登录后,在页面右上方的搜索框中输入仓库名称,并点击“创建”按钮创建新的仓…...
![](https://img-blog.csdnimg.cn/direct/08078f1925134ab6a2d6687f23a9fdd8.png)
JVM专题四:JVM的类加载机制
Java中类的加载阶段 类加载 Java中的类加载机制是Java运行时环境的一部分,确保Java类可以被JVM(Java虚拟机)正确地加载和执行。类加载机制主要分为以下几个阶段: 加载(Loading):这个阶段&#x…...
![](https://img-blog.csdnimg.cn/img_convert/3ccac42fe95745c17bae3d2495e909ab.png)
Python爬取中国天气网天气数据.
一、主题式网络爬虫设计方案 1.主题式网络爬虫名称 名称:Python爬取中国天气网天气数据 2.主题式网络爬虫爬取的内容与数据特征分析 本次爬虫主要爬取中国天气网天气数据 3.主题式网络爬虫设计方案概述(包括实现思路与技术难点) reques…...
![](https://img-blog.csdnimg.cn/direct/be84a458b020459290e65ac3dabbeadd.png#pic_center)
EXCEL快速填充空白内容
** EXCEL快速填充空白内容 ** 1.全选所有需要填充的内容,按住电脑的F5或者CTRLG点击定位 2.可以看到空白处被自动选定,之后按电脑和⬆,最后CTRLenter 可以看到空白处已经被填充。...
![](https://img-blog.csdnimg.cn/direct/bf3dab09267e42d596249b04b65d9677.png)
CBSD创建和管理bhyve容器Ubuntu@FreeBSD
bhyve介绍:bhyve:FreeBSD下的原生虚拟机管理器_freebsd 虚拟化平台bhyve-CSDN博客 两个bhyve的管理软件:使用bvm管理bhyve虚拟机管理系统FreeBSD-CSDN博客 vm-bhyve:bhyve虚拟机的管理系统FreeBSD-CSDN博客 现在,我…...