三维地图,智慧城市,商业智能BI,数据可视化大屏(Cesiumjs/UE)

 绘图工具

三维地图:Cesiumjs

建模方式:激光点云建模、航拍倾斜摄影建模、GIS建模、BIM建模、手工建模

建模工具:C4D Blender GeoBuilding ArcGIS

 Cesiumjs

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../Build/Cesium/Cesium.js"></script><link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet"/><style>html,body{margin: 0;padding: 0;}</style>
</head>
<body>
<div id="Cesium"></div>
<script>// 在 Cesium官网上 注册用户获取 tokenCesium.Ion.defaultAccessToken = '***';// 基础图层,在线方式,从 Cesium 官方下载 瓦片let baseLayer = Cesium.ImageryLayer.fromProviderAsync(Cesium.IonImageryProvider.fromAssetId(3813)   // 需要在 Cesium官网 Asset Depot 添加 对应图层的 权限);// 离线方式,自行维护一个可访问的瓦片目录let baseLayer = Cesium.ImageryLayer.fromProviderAsync(Cesium.TileMapServiceImageryProvider.fromUrl(// 用模块的方式引入 Cesium 时,会有 /cesium/Assets/Textures 这个目录Cesium.buildModuleUrl('/cesium/Assets/Textures/3813')// 获取瓦片:用Chrome扩展程序 Save All Resources 保存用在线方式访问到的瓦片));baseLayer.gamma = 0;  // 伽玛校正(对比度、亮度)baseLayer.hue = Cesium.Math.toRadians(0); // 色调【色相】,取值范围在 0-PI,参考色调环baseLayer.saturation = 1; // 饱和度,饱和度数值越低越(亮度高时)泛白(亮度低时)范黑baseLayer.alpha = 1;  // 透明度baseLayer.brightness = 1; // 亮度// 3D地图查看器const viewer =  new Cesium.Viewer('Cesium', {baseLayerPicker: false, // 底图[卫星、地形、矢量]切换按钮animation: false, // 左下角 时间播放控件timeline: false, // 下方 时间轴homeButton: false, // 右上角 主页按钮navigationHelpButton: false, // 右上角 问号按钮geocoder: false, // 右边上角 搜索框fullscreenButton: false, // 右下角 全屏按钮infoBox: false, // 点击实体时右侧出现的信息框selectionIndicator: false,  // 点击地球时鼠标处出现的指示框contextOptions: {webgl: {alpha: true,   // 允许透明背景}},baseLayer,});viewer.scene.globe.show = true;  // 显示地球viewer.scene.skyBox.show = false;  // 不显示星空viewer.scene.sun.show = false;     // 不显示太阳viewer.scene.moon.show = false;    // 不显示月球viewer.scene.skyAtmosphere.show = false;  // 不显示大气viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT; // 透明背景,需设置viewer.contextOptions.webgl.alphaCesium.GeoJsonDataSource.load("./world.json", {   // 载入 GeoJson 矢量数据fill: Cesium.Color.TRANSPARENT,   // 透明填充})let headingPitchRange = new Cesium.HeadingPitchRange(Cesium.Math.toRadians(50), Cesium.Math.toRadians(-90), 2000);// viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(116.39, 39.91), headingPitchRange);  // 设置相机观察目标,同时设定了相机控制器的环绕点viewer.scene.camera.setView({    // 切换相机视口destination: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 500000),   // 相机经纬度和高度orientation: {                                                     // 相机姿态heading: Cesium.Math.toRadians(0), // 偏航角,在(相机与地心连线的法面)上的旋转,0为正北pitch: Cesium.Math.toRadians(-100), // 俯仰角,在(相机与地心连线所在的经线平面)上选择,-90朝向地心roll: 0 // 翻滚角}});let position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400);viewer.entities.add({      // 添加实体polyline: {    // 线条实体show: true,positions: Cesium.Cartesian3.fromDegreesArray([116.39, 39.91, 116.40, 39.91]),width: 5,material: new Cesium.Color(0,0,1,1)}});viewer.entities.add({      // 添加实体id: 'point',position,  // 实体位置point: {                              // 圆点实体pixelSize: 100,                   // 圆点尺寸,为屏幕的像素尺寸,不随地图缩放和旋转color: new Cesium.Color(0,1,0,1)  // 圆点颜色},description: '<div>html</div>'        // 被点击时右侧弹窗的内容});viewer.entities.add({      // 添加实体position: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 50),  // 实体位置plane: {                              // 矩形平面实体plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0),   // 朝向dimensions: new Cesium.Cartesian2(400, 300),material: Cesium.Color.RED.withAlpha(0.5),   // 可以为图片outline: true,outlineColor: Cesium.Color.BLACK}});let polygon = viewer.entities.add({      // 添加实体id: 'polygon',polygon: {                              // 多边形实体hierarchy: Cesium.Cartesian3.fromDegreesArray([116.39, 39.91, 116.40, 39.91, 116.40, 39.90]),material: Cesium.Color.YELLOW,   // 可以为图片extrudedHeight: 200   // 拉伸为三维物体}});viewer.entities.getById("polygon");  // 获取实体viewer.entities.remove(polygon);   // 删除viewer.entities.add({      // 添加实体position: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 150),  // 实体位置label: {                              // 标签实体text: '标签',font: '50px Helvetica',fillColor: Cesium.Color.SKYBLUE}});viewer.entities.add({    // 添加实体position,  // 实体位置orientation: Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(-90, 0, 0)),  // 实体姿态model: {                // 3D模型实体uri: './***.glb',   // 载入模型minimumPixelSize: 128,          // 模型缩放时最小像素尺寸maximumScale: 1000,             // 模型缩放最大比率show: true,                     // 是否显示}});viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position,20),new Cesium.HeadingPitchRange(0,0,0));  // 设置相机控制器360度环绕点// viewer.trackedEntity = entity;   // 相机控制器的环绕点/* Cesium 坐标系 */// WGS84弧度坐标系 new Cesium.Cartographic(经弧度, 维弧度, 高度);Cesium.Cartographic.fromDegrees(经度,维度,高度)// 笛卡尔空间直角坐标系,原点为地心 new Cesium.Cartesian3(x,y,z);Cesium.Cartesian3.fromDegrees(经度,维度,高度)// 屏幕坐标系 new Cesium.Cartesian2(x,y)/* 坐标转换 */// 弧度与角度互转:Cesium.Math.toRadians(),Cesium.Math.toDegrees()// WGS84坐标系与笛卡尔坐标系互转: Cesium.Ellipsoid.WGS84.cartographicToCartesian(wgs84);Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian3);Cesium.Cartographic.fromCartesian(cartesian3)// 笛卡尔坐标系与屏幕坐标系互转:viewer.scene.pickPosition(cartesian2);viewer.scene.globe.pick(viewer.camera.getPickRay(cartesian2),viewer.scene);viewer.scene.camera.pickEllipsoid(cartesian2)//                            Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,cartesian3);scene.cartesianToCanvasCoordinates(cartesian3)// 鼠标拾取let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction(function (action) {let pick = viewer.scene.pick(action.position);if(Cesium.defined(pick)){console.log(pick.id.id)}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
</script>
</body>
</html>

三维建筑物

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../Build/Cesium/Cesium.js"></script><link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet"/><style>html,body{margin: 0;padding: 0;}</style>
</head>
<body>
<div id="Cesium"></div>
<script>// 在 Cesium官网上 注册用户获取 tokenCesium.Ion.defaultAccessToken = '****';// 加载ArcGIS卫星地图栅格数据,比 Cesium 自带地图更加精细const viewer =  new Cesium.Viewer('Cesium', {baseLayerPicker: false,imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}),// 地形,需要在 Cesium官网 Asset Depot 添加 Cesium World Terrain 权限;Ctrl+鼠标滑动改变相机视角可以进入地形terrainProvider: new Cesium.CesiumTerrainProvider({url: Cesium.IonResource.fromAssetId(1),requestVertexNormals: true,requestWaterMask: true,      // 水面效果}),});// 添加建筑物模型,需要在 Cesium官网 Asset Depot 添加 Cesium OSM Buildings 权限const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: Cesium.IonResource.fromAssetId(96188),}));// 建筑物模型样式tileset.style = new Cesium.Cesium3DTileStyle({color: "color('blue', 0.5)",show: true});/* 加载夜晚地图,需要在 Cesium官网 Asset Depot 添加 Earth at Night 权限 */// const viewer =  new Cesium.Viewer('Cesium', {//     baseLayerPicker: false// });// 从 My Assets 里拷贝// const layer = viewer.imageryLayers.addImageryProvider(//     new Cesium.IonImageryProvider({ assetId: 3812 })// );
</script>
</body>
</html>

自转

      rotate(116.39);  // 北京经度function rotate(longitude) {viewer.scene.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(longitude, 20, 30000000), // 相机经纬度和高度duration: 20, // 飞行时间flyOverLongitude: longitude > 0 ? 180 : 0,   // 转动时要经过的经度,从而确定转动的方向easingFunction: Cesium.EasingFunction.LINEAR_NONE,  // 均匀转动complete() {rotate(longitude > 0 ? longitude - 180 : 180 + longitude);  // 转到背面},});}

点位呼吸效果

      viewer.entities.add({id: "NewYork",position: Cesium.Cartesian3.fromDegrees(-74.00, 40.43, 50),billboard: {image: './position.png',}});viewer.entities.add({id: 'NewYorkLabel',position: Cesium.Cartesian3.fromDegrees(-74.00, 40.43, 50),label: {                         // 标签text: '纽约分公司',font: '200 12px sans-serif',  // font-weight font-size font-familyfillColor: Cesium.Color.fromCssColorString('#3D3D3D'),  // 字体颜色showBackground: true,backgroundColor: Cesium.Color.fromCssColorString('#F0DBAF'), // 背景色,没法渐变backgroundPadding: new Cesium.Cartesian2(10, 6),pixelOffset: new Cesium.Cartesian2(0, -30) // 在position基础上的屏幕偏移}});let NewYork = viewer.entities.getById("NewYork");NewYork.billboard.scale = 1;let progress = 0;  // 呼吸渐变进度let up = true; // 呼吸渐变方向breath();function breath() {requestAnimationFrame(function () {NewYork.billboard.scale = 1 + 0.1 * progress;if(up){if(progress >= 5){up = false;progress = progress - 1;}else {progress =  progress + 1;}}else {if(progress <= 0){up = true;progress = progress + 1;}else {progress =  progress - 1;}}setTimeout(breath, 150);});}

地点连线(OD线 Origin-Destination Line

<img id="gif" src="" style="position: absolute" />
        var gif = {name: "curve.gif", // 箭头从左侧中间点到右侧中间点width: 1920,height: 392,};
// 终点位置let toDegree = [108.947, 34.259];let toCartesian3 = Cesium.Cartesian3.fromDegrees(toDegree[0], toDegree[1]);let toCartesian2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,toCartesian3);
// 起点位置let fromDegree = [121.506377, 31.245105];let fromCartesian3 = Cesium.Cartesian3.fromDegrees(fromDegree[0], fromDegree[1]);if (!isVisible(fromCartesian3)) {fromCartesian3 = findVisibleEdge(fromDegree);}let fromCartesian2 =Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,fromCartesian3);
// 屏幕距离let distance = Cesium.Cartesian2.distance(toCartesian2,fromCartesian2);
/* 计算连线角度,试用 Cesium.Cartesian2.angleBetween 计算角度发现不对 */let angle = 0;let deltaY = toCartesian2.y - fromCartesian2.y;if (toCartesian2.x > fromCartesian2.x) {if (deltaY > 0) {angle = Math.asin(deltaY / distance);} else {angle = -Math.asin(Math.abs(deltaY) / distance);}} else {if (deltaY > 0) {angle = Math.PI - Math.asin(deltaY / distance);} else {angle = Math.asin(Math.abs(deltaY) / distance) - Math.PI;}}let width = distance; // 图片显示宽度let height = (width / gif.width) * gif.height; // 图片显示高度$("#gif").attr("src", gif.name).css("width", width + "px").css("left",(fromCartesian2.x + toCartesian2.x) / 2 - width / 2 + "px").css("top",(fromCartesian2.y + toCartesian2.y) / 2- height / 2 + "px").css("transform", `rotate(${angle}rad)`);// 判断一个点是否可见,即是否在地球背面function isVisible(cartesian3) {return new Cesium.EllipsoidalOccluder(Cesium.Ellipsoid.WGS84, viewer.camera.position).isPointVisible(cartesian3);}// 给一个不可见的点找一个同维度的、可见的、离原点最近的点,此点在可见范围边缘上function findVisibleEdge(fromDegree) {let cartesian3From;let fromLongitude = fromDegree[0];let toLongitude = toDegree[0];let fromEast = fromLongitude - toLongitude > 0;let moveEast;if (fromEast) {moveEast = fromLongitude - toLongitude > 180;} else {moveEast = toLongitude - fromLongitude < 180;}do {if (moveEast) {fromLongitude = fromLongitude + 0.1;fromLongitude = fromLongitude < 180 ? fromLongitude : fromLongitude - 360;} else {fromLongitude = fromLongitude - 0.1;fromLongitude = fromLongitude > -180 ? fromLongitude : 360 + fromLongitude;}cartesian3From = Cesium.Cartesian3.fromDegrees(fromLongitude, fromDegree[1]);} while (!isVisible(cartesian3From));return cartesian3From;},

判断一个点是否在GeoJSON内

import chinaJson from './100000.json';  // 中国区域handler.setInputAction((action) => {            let inChina = false;// 屏幕坐标,如果用了 autofit.js,要进行处理position = this.autoFitPosition(action.endPosition);// 笛卡尔坐标let cartesian3 = viewer.scene.camera.pickEllipsoid(position);if (cartesian3) {// 经纬弧度坐标let cartographic = Ellipsoid.WGS84.cartesianToCartographic(cartesian3);chinaJson.features.forEach((feature) => {feature.geometry.coordinates[0].forEach((polygon) => {// 是否在区域内if (this.isInPolygon([CesiumMath.toDegrees(cartographic.longitude), CesiumMath.toDegrees(cartographic.latitude)], polygon)) {inChina = true;}});});}
}, ScreenSpaceEventType.MOUSE_MOVE);isInPolygon(checkPoint, polygonPoints) {let counter = 0;let pointCount = polygonPoints.length;let p1 = polygonPoints[0];let i, xinters, p2;for (i = 1; i <= pointCount; i++) {p2 = polygonPoints[i % pointCount];if (checkPoint[0] > Math.min(p1[0], p2[0]) && checkPoint[0] <= Math.max(p1[0], p2[0])) {if (checkPoint[1] <= Math.max(p1[1], p2[1])) {if (p1[0] !== p2[0]) {xinters = ((checkPoint[0] - p1[0]) * (p2[1] - p1[1])) / (p2[0] - p1[0]) + p1[1];if (p1[1] === p2[1] || checkPoint[1] <= xinters) {counter++;}}}}p1 = p2;}return counter % 2 > 0;
},autoFitPosition(position) {let scale = 1;let transform = document.querySelector('body').style.transform;if (transform) {scale = transform.split('(')[1].split(')')[0];scale = parseFloat(scale);}return new Cartesian2(position.x / scale, position.y / scale);
},

 UE 像素流

PixelStreamingInfrastructure

package.json

  "dependencies": {"@epicgames-ps/lib-pixelstreamingfrontend-ue5.3": "^1.0.6",   // 版本与UE保持一致"@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.3": "^1.0.5",},

vue

<template><div class="ue-container" ref="ueContainer"></div>
</template><script>
import { Config, PixelStreaming, Flags } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.3'
import {Application,PixelStreamingApplicationStyle,UIElementCreationMode
} from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.3'
import io from 'socket.io-client'let ueApplication, streamexport default {mounted() {this.createUE()},methods: {createUE() {const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle()PixelStreamingApplicationStyles.applyStyleSheet()const config = new Config({ useUrlParams: true })config.getTextSettings().at(0).value = 'ws://信令服务器地址'  // 设置 SignallingServerUrlconfig.setFlagEnabled(Flags.AutoConnect, true)  // 自动连接config.setFlagEnabled(Flags.AutoPlayVideo, true)  // 自动播放config.setFlagEnabled(Flags.StartVideoMuted, true) // 播放时静音,上面的自动播放才能生效// config.setFlagEnabled(Flags.MouseInput, false)  // 禁止鼠标操作// config.setFlagEnabled(Flags.KeyboardInput, false) // 禁止键盘操作config.setFlagEnabled(Flags.HoveringMouseMode, true)  // 进入操作状态时依然显示光标stream = new PixelStreaming(config)ueApplication = new Application({stream,onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode),fullScreenControlsConfig: {isEnabled: false  // 隐藏全屏按钮},settingsPanelConfig: {visibilityButtonConfig: { creationMode: UIElementCreationMode.Disable } // 隐藏设置按钮},statsPanelConfig: {visibilityButtonConfig: { creationMode: UIElementCreationMode.Disable } // 隐藏信息按钮},videoQpIndicatorConfig: {disableIndicator: { disableIndicator: true }  // 隐藏信号强度图标}})this.$refs.ueContainer.appendChild(ueApplication.rootElement)stream.addResponseEventListener('handle_responses', this.handleUeResponse) // 监听UE推送的消息stream.addEventListener('videoInitialized', this.initScene) // UE初始化完成事件},sendMessage(data) {stream.emitUIInteraction(data)},handleUeResponse(msg) {console.log(msg)},async initScene() {this.sendMessage('')},forbidMouse() {// 某种情况下禁止鼠标操作,如果用 ueApplication.stream.setFlagEnabled(Flags.MouseInput, false) 会导致不能解禁document.getElementById('videoElementParent').style.pointerEvents = 'none'document.getElementById('streamingVideo').style.pointerEvents = 'none'},}
}
</script><style lang="less">
body {width: 100vw;height: 100vh;min-height: -webkit-fill-available;margin: 0;#playerUI {position: absolute;z-index: 0;video {object-fit: fill;}}
}.ue-container {position: absolute;width: 100vw;height: 100vh;overflow: hidden;
}
</style>

peer-stream

vue

<script>
import '@/utils/peer-stream.js'let ueVideo
export default {mounted() {ueVideo = document.createElement('video', { is: 'peer-stream' })ueVideo.id = 'ws://信令地址'this.$refs.container.appendChild(ueVideo)ueVideo.addEventListener('playing', this.initScene) // UE场景开始渲染ueVideo.addEventListener('message', this.handleUeResponse) // 监听UE推送的消息},methods: {sendUeMessage(data) {// 发送消息ueVideo.emitMessage(data)},}
}
</script>
<style lang="less">
body {height: 100vh;min-height: -webkit-fill-available;margin: 0;min-width: 1920px;position: relative;.video-container {video {position: absolute;z-index: 0;width: 100%;height: 100%;background-color: #0A1B2F;}}
}
</style>

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

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

相关文章

【k8s 深入学习之 event 聚合】event count累记聚合(采用 Patch),Message 聚合形成聚合 event(采用Create)

参考 15.深入k8s:Event事件处理及其源码分析 - luozhiyun - 博客园event 模块总览 EventRecorder:是事件生成者,k8s组件通过调用它的方法来生成事件;EventBroadcaster:事件广播器,负责消费EventRecorder产生的事件,然后分发给broadcasterWatcher;broadcasterWatcher:用…

40分钟学 Go 语言高并发:分布式锁实现

分布式锁实现 一、概述 分布式锁是分布式系统中的一个重要组件&#xff0c;用于协调分布式环境下的资源访问和并发控制。我们将从锁设计、死锁预防、性能优化和容错处理四个维度深入学习。 学习目标 维度重点内容掌握程度锁设计基于Redis/etcd的锁实现原理必须掌握死锁预防…

今日分享开源酷炫大数据可视化大屏html模板

前言 虽然目前已有很多开源在线制作可视化大屏项目 但有时候为了项目赶工期上线&#xff0c;直接利用现成的可视化大屏html模板&#xff0c;配合开源低代码平台Microi吾码的接口引擎&#xff0c;半小时以内就能做一个成品 先上图 代码也非常简单&#xff0c;利用Microi吾码接口…

白鲸开源即将在Doris Summit Asia 2024展示新议题!

一年一度的 Apache Doris 峰会再次启航&#xff0c;Doris Summit Asia 2024 现已开启报名&#xff0c;将于 2024 年 12 月 14 日在深圳正式举办。此次峰会&#xff0c;将对实时极速、存算分离、湖仓一体、半结构化数据分析、向量索引、异步物化视图等诸多特性进行全方位解读&am…

vscode插件 live-server配置https

背景&#xff1a;前端有时候需要在本地搭建https环境测试某些内容&#xff08;如https下访问http资源&#xff0c;下载&#xff09; 步骤&#xff1a; 1.vscode集成开发软件(应该所有前端开发同学都安装了&#xff0c;我用webstorm&#xff0c;vscode备用) 2.vscode安装live…

Mac环境下brew安装LNMP

安装不同版本PHP 在Mac环境下同时运行多个版本的PHP&#xff0c;同Linux环境一样&#xff0c;都是将后台运行的php-fpm设置为不同的端口号&#xff0c;下面将已php7.2 和 php7.4为例 添加 tap 目的&#xff1a;homebrew仅保留最近的php版本&#xff0c;可能没有你需要的版本…

代发考试战报:12月近几日通过,题库已经更新至12月5号

代发考试战报&#xff1a;12月近几日通过&#xff0c;题库已经更新至12月5号&#xff0c;考试大约会遇到几个新题&#xff0c;就算遇到的新题全错&#xff0c;也不影响考试通过&#xff0c;HCIA-PM 12月2号上海通过&#xff0c;售前L3 H19-435 HCSP-Storage 存储 上海通过&…

autogen 源码 (UserProxyAgent 类)

目录 1. 原始代码2. 代码测试3. 代码的运行逻辑4. UserProxyAgent 类的核心功能5. UserProxyAgent 类的使用6. 运行时流程7. 总结 1. 原始代码 import asyncio from inspect import iscoroutinefunction from typing import Awaitable, Callable, List, Optional, Sequence, U…

沪合共融 “汽”势如虹 | 昂辉科技参加合肥上海新能源汽车产业融合对接会

为积极响应制造业重点产业链高质量发展行动号召&#xff0c;促进合肥、上海两地新能源汽车产业链上下游企业融合对接、协同发展&#xff0c;共同打造长三角世界级新能源汽车产业集群&#xff0c;11月28日&#xff0c;合肥市工信局组织部分县区工信部门及全市30余户新能源汽车产…

taro小程序马甲包插件

插件名 maloulab/taro-plugins-socksuppet-ci maloulab/taro-plugins-socksuppet-ci安装 yarn add maloulab/taro-plugins-socksuppet-ci or npm i maloulab/taro-plugins-socksuppet-ci插件描述 taro官方是提供了小程序集成插件的tarojs/plugin-mini-ci &#xff0c;且支持…

SpringBoot 基于 MVC 高校办公室行政事务管理系统:设计构思与实现范例展示

摘 要 身处网络时代&#xff0c;随着网络系统体系发展的不断成熟和完善&#xff0c;人们的生活也随之发生了很大的变化&#xff0c;人们在追求较高物质生活的同时&#xff0c;也在想着如何使自身的精神内涵得到提升&#xff0c;而读书就是人们获得精神享受非常重要的途径。为了…

vue 通过 image-conversion 实现图片压缩

简介 vue项目中&#xff0c;上传图片时如果图片很大&#xff0c;通过 image-conversion 压缩到指定大小 1. 安装依赖 npm i image-conversion --save2. 引用 import * as imageConversion from image-conversion3. 使用 const newFile new Promise((resolve) > {// 压…

vite5+vue3+Ts5 开源图片预览器上线

images-viewer-vue3&#xff1a;一款Vue3的轻量级图像查看器&#xff0c;它基于Flip动画技术&#xff0c;支持PC和h5移动网页预览照片&#xff0c;如果它是Vue3开发的产品。 npm开源地址:https://www.npmjs.com/package/images-viewer-vue3?activeTabreadme Flip 动画 < …

人工智能驱动的骗局会模仿熟悉的声音

由于人工智能技术的进步&#xff0c;各种现代骗局变得越来越复杂。 这些骗局现在包括人工智能驱动的网络钓鱼技术&#xff0c;即使用人工智能模仿家人或朋友的声音和视频。 诈骗者使用来自社交媒体的内容来制作深度伪造内容&#xff0c;要求提供金钱或个人信息。个人应该通过…

qt QGraphicsScale详解

1、概述 QGraphicsScale是Qt框架中提供的一个类&#xff0c;它提供了一种简单而灵活的方式在QGraphicsView框架中实现缩放变换。通过设置水平和垂直缩放因子、缩放中心点&#xff0c;可以创建各种缩放效果&#xff0c;提升用户界面的交互性和视觉吸引力。结合QPropertyAnimati…

【基础编程】面向对象编程(OOP)详细解析

面向对象编程&#xff08;OOP&#xff09;详细解析 一、核心概念解析 1. 类&#xff08;Class&#xff09; 类是构建对象的蓝图&#xff0c;定义了对象的属性和方法。通过类的实例化&#xff0c;生成实际的对象。 关键特点&#xff1a; 属性&#xff08;字段&#xff09;&…

车载VR可视化解决方案

车载VR可视化解决方案是通过融合跟踪用户头部运动的特殊预测算法与惯性测量数据而开发的。该系统将大范围虚拟现实跟踪技术与IMU传感器相结合&#xff0c;为VR和AR应用打造了一套全面的运动跟踪与渲染流程&#xff0c;极大地方便了虚拟现实头显制造商定制可视化流程。 该车载VR…

Cesium 给大量建筑贴上PBR纹理

Cesium 给大量建筑贴上PBR纹理 —— 使用 TilesBuilder 从 SHP 文件转换 在Cesium中使用PBR&#xff08;物理基础渲染&#xff09;纹理给大量建筑物贴图时&#xff0c;TilesBuilder 是一个常用的图形化工具&#xff0c;它可以将原始数据转换成Cesium支持的 3D Tiles 格式。如果…

MySQL 性能优化详解

MySQL 性能优化详解 硬件升级系统配置优化调整buffer_pool数据预热降低日志的磁盘落盘 表结构设计优化SQL语句及索引优化SQL优化实战案例 MySQL性能优化我们可以从以下四个维度考虑&#xff1a;硬件升级、系统配置、表结构设计、SQL语句和索引。 从成本上来说&#xff1a;硬件升…

CSS 快速上手

目录 一. CSS概念 二. CSS语法 1. 基本语法规范 2. CSS的三种引入方式 (1) 行内样式 (2) 内部样式表 (3) 外部样式表 3. CSS选择器 (1) 标签选择器 (2) 类选择器 (3) id选择器 (4) 通配符选择器 (5) 复合选择器 <1> 空格 <2> 没有空格 <3> &q…