3dtiles平移旋转工具制作

3dtiles平移旋转缩放原理及可视化工具实现

背景

平时工作中，通过cesium平台来搭建一个演示场景是很常见的事情。一般来说，演示场景不需要多完善的功能，但是需要一批三维模型搭建，如厂房、电力设备、园区等。在实际搭建过程中，就会面临一个尴尬的问题，那就是模型定位，常规操作中，我们一般用三维模型的中心点对应一个经纬度坐标，以此转换成3dtiles格式，但是给定的经纬度坐标一般是模糊的大致位置，甚至有的场景不需要准确的坐标，只需要你找个合适的场景把各个模型搭建起来，这就不得不对模型进行微调位置，以适应场景。

  • cesium中有对模型进行调整的代码，事实上，如果模型定位的位置不是我们想要的位置，可以通过修改该3dtiles的矩阵，来改变它，如平移：

    /**基于本地的ENU坐标系的偏移，也就是垂直于地表向上为Z，东为X，北为Y* @param tileset Cesium3DTileset* @param dx x轴偏移量。单位：米* @param dy y轴偏移量。单位：米* @param dz z轴偏移量。单位：米*/
function translate(tileset: Cesium3DTileset, dx: number, dy: number, dz: number) {if (dx === 0 && dy === 0 && dz === 0) return// 对于3DTileset，我们需要的结果是一个模型矩阵，那么平移就是计算一个世界坐标下的平移矩阵。// 获取中心点const origin = tileset.boundingSphere.center// 以该点建立ENU坐标系const toWorldMatrix = Transforms.eastNorthUpToFixedFrame(origin)// 该坐标系下平移后的位置const translatePosition = new Cartesian3(dx, dy, dz)// 获取平移后位置的世界坐标const worldPosition = Matrix4.multiplyByPoint(toWorldMatrix, translatePosition, new Cartesian3())// 计算世界坐标下的各个平移量const offset = Cartesian3.subtract(worldPosition, origin, new Cartesian3())// 从世界坐标下的平移量计算世界坐标的平移矩阵const translateMatrix = Matrix4.fromTranslation(offset)// 应用平移矩阵。这里应该与原本的模型矩阵点乘，而不是直接赋值tileset.modelMatrix = Matrix4.multiply(translateMatrix, tileset.modelMatrix, new Matrix4())
}

    • 但是实际开发中，我们把一个模型准确的放在我们想要的位置上，或者调整其与底图对齐，需要多次进行一点一点的矫正，也就是说需要多次调用该函数，调整xyz平移参数，这样做十分麻烦，因此最好能做一个可视化控件，能够直接通过拖住的形式来调整模型，最后得出模型调整后的位置矩阵，然后在新一轮代码中，直接将模型的位置改为该位置矩阵，即可完成模型的调整。

      在这里插入图片描述

功能开发

可视化控件

可视化控件，即我们看到的拖拽箭头，当平移时，是一个带箭头的三维坐标系的坐标轴，当是旋转时，是三个互相垂直的圆环；而这个可视化的开发，依靠cesium完全可以实现，因为cesium本身支持绘制图形，并且可以监听到鼠标是否划过和点击图形。

平移控件的显示

  • 首先控件的显示需要思考的问题是，控件需要多大，控件的位置在哪里，显然，控件的大小需要根据模型的大小来制定，而控件的位置肯定就是模型的位置，因此，很自然我们需要创建一个函数，来在创建控件前获取模型的位置和根据模型范围制定控件大小。

     /*** 初始化参数和清理工具*/private initParam(): TransformOption {this.removeAllTools();const b3dm = this._b3dm;const viewer = this._viewer;const length = b3dm.boundingSphere.radius / 3;const originalMatrix = this._b3dm.root.transform.clone()const ps = new Cesium.Cartesian3();Cesium.Matrix4.getTranslation(originalMatrix,ps)let pos = CoordTransform.transformCartesianToWGS84(viewer,ps)this._params = {...this._params,tx: pos.lng,ty: pos.lat,tz: pos.alt ,};return {originDegree:pos,length,};}

    _params记录了6个参数，分别是tx,ty,tz和rx,ry,rz，它们可以用来记录当前模型的位置和姿态变化

    • 有了初始的位置参数和范围之后，我们就可以构建坐标系，首先是坐标轴，在构建坐标轴的时候，需要考虑到，坐标轴是三个正交的方向，但是每一个方向指向哪里？比如X轴指向哪里？

      • 事实上，X轴指向任意一个方向，我们都能轻易的构建出一个三个方向正交的坐标系，但是显然，不符合我们的操作习惯。

      • 首先，先做一个假设，如果是根据Cesium的世界坐标系的方向来建立坐标轴，是否可行？显然是不行的，假设一个模型处于地球表面，我们的习惯，依然是想按照朝东为X轴，朝北为Y轴，朝上为Z轴来移动物体，这种习惯和我们的经纬度的习惯是符合的，东西走向为经度走向，南北走向为维度走向，那么我们让物体按X轴移动，就是沿着经度走，按Y轴移动，就是沿着维度走

        在这里插入图片描述

      • 而我们的Cesium的世界坐标系显然不是这种情况，如图所示，绿色坐标就是我们刚才说的坐标系，而蓝色坐标系，而是Cesium的世界坐标系，显然如果我们按照世界坐标系的方向建立坐标轴，当我们移动某个方向的时候，都会偏离出地球。

      在这里插入图片描述

  • 清楚了这一点，我们就可以按照图上绿色坐标系的形式建立坐标系，我们姑且称为局部坐标系，我们已经知道这个坐标系的原点的坐标了，也知道坐标系的范围了（可以理解为每个轴的长度），那么只需要求出每个轴的终点坐标就可以了，基于此，我们再创建一个getTransPosition函数，用来求终点坐标。

    	const { originDegree, length } = this.initParam();const translateCartesian = new Cesium.Cartesian3(length, length, length);const ps = CoordTransform.transformWGS84ToCartesian(this._viewer,originDegree)const targetDegree = this.getTransPosition(ps, translateCartesian);

    我们不需要求出每个轴的终点坐标，事实上只需要求出 translateCartesian这个向量的坐标就行了，然后每个轴的终点坐标，相当于向量坐标的分量，基于此，我们完善 getTransPosition函数

    /*** 根据平移距离获取目标点* @param originPosition - 原始位置（笛卡尔坐标）* @param translateCartesian - 平移向量（笛卡尔坐标）* @return 平移后的位置（经纬度坐标）*/private getTransPosition(originPosition: Cesium.Cartesian3,translateCartesian: Cesium.Cartesian3): { lng: number; lat: number; alt: number } {// 东-北-上参考系构造出4*4的矩阵const transform = Cesium.Transforms.eastNorthUpToFixedFrame(originPosition);//构造平移矩阵const m = new Cesium.Matrix4();Cesium.Matrix4.setTranslation(Cesium.Matrix4.IDENTITY,translateCartesian,m);//将当前位置矩阵乘以平移矩阵得到平移后的位置矩阵const modelMatrix = Cesium.Matrix4.multiply(transform, m, new Cesium.Matrix4());const finalPosition = new Cesium.Cartesian3();//从位置矩阵中获取坐标信息Cesium.Matrix4.getTranslation(modelMatrix, finalPosition);//转换为地理坐标系return CoordTransform.transformCartesianToWGS84(this._viewer,finalPosition);}

    这个思路很简单，首先根据原始位置创建一个局部坐标系，然后求出在局部坐标系下从（0，0，0）点平移到向量终点的平移矩阵，而局部坐标系下原点转到世界坐标系下也是一个矩阵，两个矩阵相乘即可求出向量终点在世界坐标系下的位置，也就是一个笛卡尔坐标，有了笛卡尔坐标，也就最终能算出向量终点的经纬度坐标

  • 我们可以分析一下向量终点的经纬度坐标，这里简称终点坐标，假设为(lng1,lat1,alt1),而我们原点的坐标是(lng0,lat0,alt0)，那么很显然，我们能够得出，X轴的长度范围为 (lng0,lng1 ),其他轴也是如此。

  • 因此，我们获取到了坐标系的起点，终点，长度等信息，自然而然，下一步可以建立坐标系了 this.initLineArrow(originDegree, targetDegree, length);

     /*** 绘制坐标轴* @param originDegree -原始坐标(经纬度)* @param targetDegree -目标坐标(经纬度)* @param length - 坐标轴长度*/private initLineArrow(originDegree: { lng: number; lat: number; alt: number },targetDegree: { lng: number; lat: number; alt: number },length: number): void {const arrows = new Cesium.PolylineCollection();//x轴（红色）const xPos = [originDegree.lng,originDegree.lat,originDegree.alt,targetDegree.lng,originDegree.lat,originDegree.alt,];this.drawArrow(arrows, "model_edit_xArrow", xPos, Cesium.Color.RED);//y轴（绿色）const yPos = [originDegree.lng,originDegree.lat,originDegree.alt,originDegree.lng,targetDegree.lat,originDegree.alt,];this.drawArrow(arrows, "model_edit_yArrow", yPos, Cesium.Color.GREEN);//z轴（蓝色）const zPos = [originDegree.lng,originDegree.lat,originDegree.alt,originDegree.lng,originDegree.lat,targetDegree.alt,];this.drawArrow(arrows, "model_edit_zArrow", zPos, Cesium.Color.BLUE);this._coordArrows = this._viewer.scene.primitives.add(arrows);if(this._coordArrows){this._coordArrows._name = "CoordAxis";}}

  • 这里创建的x,y,z轴坐标明显就是两个点的连线，X轴是横跨经线的直线，Y轴是横跨纬线的直线，Z轴则是垂直地面的直线，且三个轴长度相等。然后，我们将每个轴坐标传入 drawArrow 函数，这里是最终实现坐标轴的代码，我们这里可以做一个思考，如果给每个坐标轴的终点，加上箭头，我们需要做两个操作，首先把坐标轴画出来，其次在该轴末尾画一个箭头，这样操作显然比较麻烦，尤其是画箭头，cesium有一个api已经实现了这个操作，只需要给出坐标，就能实现一条直线并且末尾带箭头，让我们完善这个代码

    /*** 绘制箭头* @param arrows - PolylineCollection集合* @param name - 箭头名称* @param positions - 箭头位置数组* @param color - 箭头颜色*/private drawArrow(arrows: Cesium.PolylineCollection,name: string,positions: number[],color: Cesium.Color): void {const arrow = arrows.add({positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),width: this._defaultWidth,material: Cesium.Material.fromType(Cesium.Material.PolylineArrowType, {color: color,}),}) as EditablePolyline;arrow._name = name;}

    在这里插入图片描述

至此，我们成功创建了坐标系轴，并且每个坐标系轴都赋予一个name属性，整个坐标系有一个整体name属性

在这里插入图片描述

旋转控件的实现

旋转控件的实现就比较简单，大致思路就是首先确定圆环的圆心（原点），其次插值求出一个圆环点，其次根据圆环点借助cesium中的api创建一个圆环，最后通过旋转把其它两个圆环创建出来，我们一步步剖析这个操作

  • 根据最开始求得的模型的位置坐标和范围创建圆环坐标点，这里以原始坐标为圆心，以范围为半径，进行插值求点

     public editRotation(): void {const { originDegree, length } = this.initParam();this.createCircle(originDegree.lng,originDegree.lat,originDegree.alt,length);}

    /*** 创建旋转圆环*/private createCircle(lon: number,lat: number,height: number,radius: number): void {const positions: Cesium.Cartesian3[] = [];//生成圆形点位for (let i = 0; i <= 360; i += 3) {const sin = Math.sin(Cesium.Math.toRadians(i));const cos = Math.cos(Cesium.Math.toRadians(i));positions.push(new Cesium.Cartesian3(radius * cos, radius * sin, 0));}const matrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(lon, lat, height));//创建三个方向的旋转圆环this.createAxisCircles(positions, matrix);}

    这里同样以模型坐标为原点建立局部坐标系，然后插值计算了局部坐标系为圆心的圆的各个插值点坐标，接下来就是创建圆环

  • 由于插值点是在XY平面的点，所以它构建的圆环可以刚好垂直Z轴，作为Z轴的旋转圆环，假设我们同时创建三个这样的圆环，只需要让其中一个圆环向Y轴方向旋转90度，即可得出Y轴旋转圆环，向X轴方向旋转90度，即可得出X轴旋转圆环，这里的旋转不能简单的只是旋转90度，要知道这个圆环是在局部坐标系下，要想变换成局部坐标系下的旋转90度，需要变换到世界坐标系下，再乘以旋转矩阵

    /*** 创建三个方向的旋转圆环*/private createAxisCircles(positions: Cesium.Cartesian3[],matrix: Cesium.Matrix4): void {//Z轴圆环const zCircle = this.createAxisSphere("model_edit_zCircle",positions,matrix,Cesium.Color.BLUE);this._viewer.scene.primitives.add(zCircle);//X轴圆环const yCircle = this.createAxisSphere("model_edit_yCircle",positions,matrix,Cesium.Color.RED);this._viewer.scene.primitives.add(yCircle);const yRotation = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(90)));Cesium.Matrix4.multiply((yCircle.geometryInstances as Cesium.GeometryInstance).modelMatrix,yRotation,(yCircle.geometryInstances as Cesium.GeometryInstance).modelMatrix);//Y轴圆环const xCircle = this.createAxisSphere("model_edit_xCircle",positions,matrix,Cesium.Color.GREEN);this._viewer.scene.primitives.add(xCircle);const xRotation = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(90)));Cesium.Matrix4.multiply((xCircle.geometryInstances as Cesium.GeometryInstance).modelMatrix,xRotation,(xCircle.geometryInstances as Cesium.GeometryInstance).modelMatrix);}

  • 而创建球体也很简单，当有了插值点后，直接借助cesium中的api进行画线即可，插值点越密，圆形越光滑

     /*** 创建坐标轴球体*/private createAxisSphere(name: string,positions: Cesium.Cartesian3[],matrix: Cesium.Matrix4,color: Cesium.Color): Cesium.Primitive {const primitive = new Cesium.Primitive({geometryInstances: new Cesium.GeometryInstance({id: name,geometry: new Cesium.PolylineGeometry({positions,width: 5,}),attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(color),},}),releaseGeometryInstances: false,appearance: new Cesium.PolylineColorAppearance({translucent: false,}),modelMatrix: matrix,}) as EditablePrimitive;primitive._name = name;this._coordCircle.push(primitive);return primitive;}

    在这里插入图片描述

控件的销毁

我们实现了控件的创建，很显然让切换控件时，需要销毁当前控件，我们之前已经记录了每个控件，因此当销毁时，只需要拿到该控件，在primitives集合中去除即可

 /*** 移除所有工具*/private removeAllTools(): void {this.removeCoordArrows();this.removeCoordCircle();}/*** 移除坐标箭头*/private removeCoordArrows(): void {if (this._coordArrows) {this._viewer.scene.primitives.remove(this._coordArrows);this._coordArrows = undefined;}}/*** 移除坐标圆环*/private removeCoordCircle(): void {this._coordCircle.forEach((element) => {this._viewer.scene.primitives.remove(element);});this._coordCircle = [];}
}

实现控件拖动

不管是移动模型还是旋转模型，我们操作的逻辑都是需要鼠标左键按下，然后检测鼠标是否在控件上，如果是，则检测是否是否滑动，计算滑动的距离应用到模型变换上，然后检测鼠标左键抬起，整个过程结束。我们逐步分解一下

  • 首先需要监听鼠标按下命令，如果按下后，再检测是否悬停在控件上，如果是，那就要锁定相机，避免鼠标移动地图拖动，然后让悬停的控件变粗，检测悬停位置的鼠标经纬度，如果在地球范围内，在继续进行后续操作

    /*** 初始化鼠标事件(移动，按下，抬起)*/private initEvent(): void {const viewer = this._viewer;this._handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);this._handler.setInputAction((event:Cesium.ScreenSpaceEventHandler.PositionedEvent) => {const pick = viewer.scene.pick(event.position);if (pick?.primitive?._name &&pick.primitive._name.indexOf("model_edit") !== -1) {//锁定相机viewer.scene.screenSpaceCameraController.enableRotate = false;this._currentPick = pick.primitive as EditablePrimitive;this._currentPick.width = 25;const downPos = viewer.scene.camera.pickEllipsoid(event.position,viewer.scene.globe.ellipsoid);let _tx = 0,_ty = 0,_tz = 0;let _rx = 0,_ry = 0,_rz = 0;//防止点击到地球之外报错if (downPos && Cesium.defined(downPos)) {const downDegree = CoordTransform.transformCartesianToWGS84(viewer,downPos);//鼠标移动事件//  剩余操作}, Cesium.ScreenSpaceEventType.LEFT_DOWN);}

    然后在剩余操作里完善鼠标移动事件，其实不管是平移操作还是旋转操作，本质上都是鼠标移动，当是移动操作的时候，我们可以轻易的计算X轴移动距离和Y轴移动距离，只需要鼠标移动的末尾的经纬度减去最初鼠标点击的经纬度，即可算出差来，作为X轴移动的距离和Y轴移动的距离，但是移动Z轴的时候，我们发现鼠标依然是向上拖动的，也就是鼠标在竖向操作，类似于Y轴的移动逻辑，此时只需要求出鼠标滑动的距离。乘以一个系数，就可以得出Z轴移动的距离了。

      //鼠标移动事件this._handler.setInputAction((movement: Cesium.ScreenSpaceEventHandler.MotionEvent) => {if (!this._currentPick) return;  // 增加空值检查const endPos = viewer.scene.camera.pickEllipsoid(movement.endPosition,viewer.scene.globe.ellipsoid);if (endPos && Cesium.defined(endPos)) {const endDegree = CoordTransform.transformCartesianToWGS84(viewer,endPos);const _yPix = movement.endPosition.y - event.position.y;const _xPix = movement.endPosition.x - event.position.x;//根据当前选中控制器更新相应变量switch (this._currentPick._name) {case "model_edit_xArrow":_tx = endDegree.lng - downDegree.lng;break;case "model_edit_yArrow":_ty = endDegree.lat - downDegree.lat;break;case "model_edit_zArrow":_tz = -this._dStep * _yPix;break;case "model_edit_xCircle":_rx = this._rStep * _yPix;break;case "model_edit_yCircle":_ry = this._rStep * _xPix;break;case "model_edit_zCircle":_rz = this._rStep * _xPix;break;}this.updateModel(this._params, _tx, _ty, _tz, _rx, _ry, _rz);}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    这里的movement.endPosition是屏幕坐标系，他是个二维坐标，用来判断鼠标横向滑动的距离和竖向滑动的距离，然后我们再来分析旋转的逻辑，也就是 _rx，_ry，_rz，让旋转X轴时，其实是鼠标竖向滑动，Y和Z轴则是横向滑动，我们分别计算一个滑动系数，最后更新模型

    /*** 更新模型位置*/private updateModel(params: EditParams,tx: number,ty: number,tz: number,rx: number,ry: number,rz: number): void {//创建旋转矩阵const rotationX = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx + rx)));const rotationY = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry + ry)));const rotationZ = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz + rz)));let position = Cesium.Cartesian3.fromDegrees(params.tx + tx,params.ty + ty,params.tz + tz )let matrix = Cesium.Transforms.eastNorthUpToFixedFrame(position)//旋转、平移矩阵相乘Cesium.Matrix4.multiply(matrix,rotationX,matrix)Cesium.Matrix4.multiply(matrix,rotationY,matrix)Cesium.Matrix4.multiply(matrix,rotationZ,matrix)//更新模型变换this._b3dm.root.transform = matrix;// //更新平移指示器if (this._coordArrows) {this.updateLineArrow(this._b3dm);}}

更新模型的操作很简单，分别求出旋转矩阵和平移矩阵，最后替换掉原有的矩阵，模型就发生变换了，这里需要注意的是，当模型发生平移后，可视化控件也需要跟着发生变换，此时需要更新可视化控件的位置，原理也很简单，重新求一下模型的位置，然后创建可视化控件即可

/*** 更新箭头指示器* @param b3dm - 3DTiles模型*/private updateLineArrow(b3dm: Cesium.Cesium3DTileset): void {//移除当前的箭头指示器this.removeCoordArrows();const viewer = this._viewer;//计算长度（使用包围球半径的1/3作为指示器长度）const length = b3dm.boundingSphere.radius / 3;const originalMatrix = this._b3dm.root.transform.clone()const ps = new Cesium.Cartesian3();Cesium.Matrix4.getTranslation(originalMatrix,ps)let originDegree = CoordTransform.transformCartesianToWGS84(viewer,ps)//创建平移向量（三个方向等长）const translateCartesian = new Cesium.Cartesian3(length, length, length);//深拷贝中心点位置const originPos = JSON.parse(JSON.stringify(ps));//计算目标点位置const targetDegree = this.getTransPosition(originPos, translateCartesian);//重新初始化箭头指示器this.initLineArrow(originDegree, targetDegree, length);}
  • 最后是当鼠标滑动结束后，伴随而来的是鼠标抬起事件，在这个事件中需要记录模型变换后的姿态，重新解锁相机，移除掉鼠标移动的监听
//鼠标抬起事件this._handler.setInputAction(() => {if (!this._currentPick) return;  // 增加空值检查viewer.scene.screenSpaceCameraController.enableRotate = true;this._currentPick.width = this._defaultWidth;this._currentPick = undefined;//更新最新参数this._params.tx += _tx;this._params.ty += _ty;this._params.tz += _tz;this._params.rx += _rx;this._params.ry += _ry;this._params.rz += _rz;//移除事件监听this._handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);this._handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP);}, Cesium.ScreenSpaceEventType.LEFT_UP);}

以上就是所有流程的原理，主要是需要弄明白cesium世界坐标系和局部坐标系之间的变换以及鼠标移动对应的是哪个轴的操作。

最新参数
this._params.tx += _tx;
this._params.ty += _ty;
this._params.tz += _tz;
this._params.rx += _rx;
this._params.ry += _ry;
this._params.rz += _rz;

        //移除事件监听this._handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);this._handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP);}, Cesium.ScreenSpaceEventType.LEFT_UP);}


> 以上就是所有流程的原理，主要是需要弄明白cesium世界坐标系和局部坐标系之间的变换以及鼠标移动对应的是哪个轴的操作。

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

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

相关文章

Readability.js 与 Newspaper提取网页内容和元数据

Readability.js 与 Newspaper提取网页内容和元数据

在当今信息爆炸的时代&#xff0c;网页内容的提取和处理变得尤为重要。无论是从新闻网站、博客还是教程网站中提取内容&#xff0c;都需要一个高效、准确的工具来帮助我们去除无关信息&#xff0c;提取出有价值的正文内容。这不仅能够提高我们的工作效率&#xff0c;还能让我们…
阅读更多...
Vue框架学习

Vue框架学习

一、Vue3 基础 创建vue3工程 安装Node.js在你所要存放目录位置 cmd 终端运行 npm create vuelatest输入工程名字需要ts JSX 选No 是否配置路由 NO&#xff08;初步学习&#xff09; 是否配置管理 No 是否配置测试 No Testing Solution NO 是否选择ESLint语法检查先不选 选NO…
阅读更多...
部署若依微服务遇到的坑

部署若依微服务遇到的坑

一、用Windows部署nacos 1、启动失败&#xff0c;因为nacos默认开启为器群模式。单体需要加上图下代码 2、nacos配置内置MySQL时需要执行config文件夹下的SQL文件 3、springboot启动报错 java.nio.charset.MalformedInputException: Input length 1或Input length 2-CSDN博…
阅读更多...
RabbitMQ系列（三）基本概念之Consumer

RabbitMQ系列（三）基本概念之Consumer

在 RabbitMQ 中&#xff0c;Consumer&#xff08;消费者&#xff09; 是负责从队列&#xff08;Queue&#xff09;中获取并处理消息的客户端角色&#xff0c;其核心机制与功能如下&#xff1a; 一、Consumer 的定义与核心作用 消息处理终端 Consumer 通过订阅或拉取队列中的消…
阅读更多...
Trae根据原型设计稿生成微信小程序密码输入框的踩坑记录

Trae根据原型设计稿生成微信小程序密码输入框的踩坑记录

一、需求描述 最近经常使用Trae生成一些小组件和功能代码&#xff08;对Trae赶兴趣的可以看之前的文章《TraeAi上手体验》&#xff09;&#xff0c;刚好在用uniapp开发微信小程序时需要开发一个输入密码的弹框组件&#xff0c;于是想用Trae来实现。原型设计稿如下&#xff1a;…
阅读更多...
SuperMap iClient3D for WebGL 影像数据可视范围控制

SuperMap iClient3D for WebGL 影像数据可视范围控制

在共享同一影像底图的服务场景中&#xff0c;如何基于用户权限体系实现差异化的数据可视范围控制&#xff1f;SuperMap iClient3D for WebGL提供了自定义区域影像裁剪的方法。让我们一起看看吧&#xff01; 一、数据制作 对于上述视频中的地图制作&#xff0c;此处不做讲述&am…
阅读更多...
STM32中使用PWM对舵机控制

STM32中使用PWM对舵机控制

目录 1、硬件JIE 2、PWM口配置 3、角度转换 4、main函数中应用 5、工程下载连接 1、硬件介绍 单片机&#xff1a;STM32F1 舵机&#xff1a;MG995 2、PWM口配置 20毫秒的PWM脉冲占空比&#xff0c;对舵机控制效果较好 计算的公式&#xff1a; PSC、ARR值的选取&#xf…
阅读更多...
5、使用 pgAdmin4 图形化创建和管理 PostgreSQL 数据库

5、使用 pgAdmin4 图形化创建和管理 PostgreSQL 数据库

通过上几篇文章我们讲解了如何安装 PostgreSQL 数据库软件和 pgAdmin4 图形化管理工具。 今天我们继续学习如何通过 pgAdmin4 管理工具图形化创建和管理 PostgreSQL 数据库。 一、PostgreSQL的基本工作方式 在学习如何使用PostgreSQL创建数据库之前&#xff0c;我们需要了解一…
阅读更多...
Protobuf原理与序列化

Protobuf原理与序列化

本文目录 1. Protobuf介绍2. Protobuf的优势3. 编写Protobuf头部全局定义消息结构具体定义字段类型定义标签号Base128编码 4. TLVProtobuf的TLV编码如何通过Varint表示300&#xff1f; 5. 编译Protobuf6. 构造消息对象 前言&#xff1a;之前写项目的时候只是简单用了下Protobuf…
阅读更多...
DeepSeek：面向效率与垂直领域的下一代大语言模型技术解析

DeepSeek：面向效率与垂直领域的下一代大语言模型技术解析

本文将深入剖析DeepSeek模型的核心算法架构&#xff0c;揭示其在神经网络技术上的突破性创新&#xff0c;并与主流大模型进行全方位技术对比。文章涵盖模型设计理念、训练范式优化、应用场景差异等关键维度&#xff0c;为读者呈现大语言模型领域的最新发展图景。 一、DeepSeek…
阅读更多...
数据安全_笔记系列09_人工智能（AI）与机器学习（ML）在数据安全中的深度应用

数据安全_笔记系列09_人工智能（AI）与机器学习（ML）在数据安全中的深度应用

数据安全_笔记系列09_人工智能&#xff08;AI&#xff09;与机器学习&#xff08;ML&#xff09;在数据安全中的深度应用 人工智能与机器学习技术通过自动化、智能化的数据分析&#xff0c;显著提升了数据分类、威胁检测的精度与效率&#xff0c;尤其在处理非结构化数据、复杂…
阅读更多...
【Python 语法】Python 数据结构

【Python 语法】Python 数据结构

线性结构&#xff08;Linear Structures&#xff09;1. 顺序存储列表&#xff08;List&#xff09;元组&#xff08;Tuple&#xff09;字符串&#xff08;String&#xff09; 2. 线性存储栈&#xff08;Stack&#xff09;队列&#xff08;Queue&#xff09;双端队列&#xff08…
阅读更多...
docker本地镜像源搭建

docker本地镜像源搭建

最近Deepseek大火后&#xff0c;接到任务就是帮客户装Dify&#xff0c;每次都头大&#xff0c;因为docker源不能用&#xff0c;实在没办法&#xff0c;只好自己搭要给本地源。话不多说具体如下&#xff1a; 1、更改docker的配置文件&#xff0c;添加自己的私库地址&#xff0c…
阅读更多...
Ae 效果详解：粒子运动场

Ae 效果详解：粒子运动场

Ae菜单&#xff1a;效果/模拟/粒子运动场 Simulation/Particle Playground 粒子运动场 Particle Playground效果可以用于创建和控制粒子系统&#xff0c;模拟各种自然现象&#xff0c;如烟雾、火焰、雨水或雪等。通过调整粒子的发射点、速度、方向和其他属性&#xff0c;可以精…
阅读更多...
CSS 对齐：深入理解与技巧实践

CSS 对齐：深入理解与技巧实践

CSS 对齐：深入理解与技巧实践 引言 在网页设计中，元素的对齐是至关重要的。一个页面中元素的对齐方式直接影响到页面的美观度和用户体验。CSS 提供了丰富的对齐属性，使得开发者可以轻松实现各种对齐效果。本文将深入探讨 CSS 对齐的原理、方法和技巧，帮助开发者更好地掌握…
阅读更多...
汽车无钥匙进入一键启动操作正确步骤

汽车无钥匙进入一键启动操作正确步骤

汽车智能无钥匙进入和一键启动的技术在近年来比较成熟&#xff0c;不同车型的操作步骤可能略有不同&#xff0c;但基本的流程应该是通用的&#xff0c;不会因为时间变化而有大的改变。 移动管家汽车一键启动无钥匙进入系统通常是通过携带钥匙靠近车辆&#xff0c;然后触摸门把…
阅读更多...
Android之APP更新(通过接口更新)

Android之APP更新(通过接口更新)

文章目录 前言一、效果图二、实现步骤1.AndroidManifest权限申请2.activity实现3.有版本更新弹框UpdateappUtilDialog4.下载弹框DownloadAppUtils5.弹框背景图 总结 前言 对于做Android的朋友来说&#xff0c;APP更新功能再常见不过了&#xff0c;因为平台更新审核时间较长&am…
阅读更多...
AI触手可及 | 基于函数计算玩转AI大模型

AI触手可及 | 基于函数计算玩转AI大模型

AI触手可及 | 基于函数计算玩转AI大模型 基于函数计算部署AI大模型的优势方案架构图像生成 - Stable Diffusion WebUI部署操作 释放资源部署总结体验反馈 在生成式AI技术加速迭代的浪潮下&#xff0c;百亿级参数的行业大模型正推动产业智能化范式转移。面对数字化转型竞赛&…
阅读更多...
DDD该怎么去落地实现（4）多对多关系

DDD该怎么去落地实现（4）多对多关系

多对多关系的设计实现 如题&#xff0c;DDD该如何落地呢&#xff1f;前面我通过三期的内容&#xff0c;讲解了DDD落地的关键在于“关系”&#xff0c;也就是通过前面我们对业务的理解先形成领域模型&#xff0c;然后将领域模型的原貌&#xff0c;形成程序代码中的服务、实体、…
阅读更多...
【补阙拾遗】排序之冒泡、插入、选择排序

【补阙拾遗】排序之冒泡、插入、选择排序

炉烟爇尽寒灰重&#xff0c;剔出真金一寸明 冒泡排序1. 轻量化情境导入 &#x1f30c;2. 边界明确的目标声明 &#x1f3af;3. 模块化知识呈现 &#x1f9e9;&#x1f4ca; 双循环结构对比表★★★⚠️ 代码关键点注释 4. 嵌入式应用示范 &#x1f6e0;️5. 敏捷化巩固反馈 ✅ …
阅读更多...
最新文章

Copyright @ 2022~2023