万码418H1T8P
MagicMirror
该项目是基于 JavaScript 和 Electron 框架构建的模块化智能镜平台，结合硬件可以将普通的镜子升级为功能强大的智能镜。它提供了简单的部署流程，可作为独立应用程序（无需浏览器）或 Web 页面使用，支持显示天气、日历、新闻、时间等信息。
比我长的不多
xinshi-mini
信使 Web builder 是基于 Material 的 Angular 低代码前端框架，丰富的组件库可提供优秀的数字创新体验，通过拖拽可视化配置快速构建现代化响应式 UI、多主题、多语言的 Web 页面，包含美观的后台管理主题，拥有完整的前端解决方案。体验：https://builder.design
爬虫爬呀爬
cesium 请问如何通过点击车辆模型，实现视角跟随？
let socketInfo = 'xxxxxx' let ws = new WebSocket(socketInfo) let pingInterval = ref(null) // 心跳间隔ID let viewer = null let entity = null let polylineInitialized = false; // 轨迹线是否已初始化的标志 let polylineEntity = null; // 用于存储轨迹线实体 let pointEntity = null; const positionParams = []; // 用于存储所有的位置参数数据 const bufferLimit = 50; // 缓冲区大小限制 // 加载websocket function webValue() { // 初始Websocket const onOpen = () => { const data = JSON.stringify({ command: 1, serializeAlgorithm: 1, token: window.localStorage.getItem('token') }); ws.send(data); // 发送JSON字符串 // 设置心跳间隔为5秒 pingInterval.value = window.setInterval(() => { const pingMessage = JSON.stringify({ command: 2, serializeAlgorithm: 1 }); ws.send(pingMessage); }, 5000); }; // 接收websocket数据 const onMessage = async (event) => { const data = JSON.parse(event.data); if (data.data == undefined) { console.log('未响应'); } else { processPositionParams(data.data); updateCarModelPosition(positionParams);// 实时更新车辆移动位置 if (!polylineInitialized) { initializePolyline(positionParams); // 初始化轨迹线 polylineInitialized = true; // 标记轨迹线已初始化 } else { updatePolylinePosition(positionParams); // 更新轨迹线位置 } } }; // 封装处理返回的参数 function processPositionParams(data) { const targetingTypes = { 0x10: 'RTK', 0x11: 'UWB', 0x12: '融合' }; const newPositionParam = { TargetingType: targetingTypes[data.type], UID: data.uid, Angle: data.angle, Height: data.height, longitude: data.longitude, latitude: data.latitude }; positionParams.push(newPositionParam); // 超过缓冲区大小限制时移除最旧的位置参数数据 if (positionParams.length > bufferLimit) { positionParams.shift(); } const labelText = `终端ID:${data.uid},定位类型:${targetingTypes[data.type]}\n经度:${data.longitude},纬度:${data.latitude}\n角度:${data.angle},高度:${data.height}`; point(positionParams, labelText);// 更新实体点位置信息 } const onClose = () => { window.clearInterval(pingInterval.value); // 清除心跳间隔定时器 console.log('Websocket连接关闭'); webValue(); }; const onError = (error) => { console.log('Websocket连接错误'); ws.close(); window.clearInterval(pingInterval.value); // 清除心跳间隔定时器 webValue(); }; ws.addEventListener('open', onOpen); ws.addEventListener('message', onMessage); ws.addEventListener('close', onClose); ws.addEventListener('error', onError); } ------------------------------------- // 绘制车辆模型和轨迹点、轨迹线 let checkedPoint = ref(true); let checkedLines = ref(false); // 保存checkedPoint和checkedLines的值到LocalStorage function saveCheckedValues() { localStorage.setItem('checkedPoint', JSON.stringify(checkedPoint.value)); localStorage.setItem('checkedLines', JSON.stringify(checkedLines.value)); } // 从LocalStorage中获取checkedPoint和checkedLines的值 function loadCheckedValues() { const storedCheckedPoint = localStorage.getItem('checkedPoint'); const storedCheckedLines = localStorage.getItem('checkedLines'); if (storedCheckedPoint) { checkedPoint.value = JSON.parse(storedCheckedPoint); } if (storedCheckedLines) { checkedLines.value = JSON.parse(storedCheckedLines); } } // 监听checkedPoint和checkedLines的变化，并保存到LocalStorage watch([checkedPoint, checkedLines], saveCheckedValues, { deep: true }); // 在页面加载时加载checkedPoint和checkedLines的值 window.addEventListener('load', loadCheckedValues); // 车辆模型 let carModelData = null; let shouldFollowCar = false; // 标志位 function updateCarModelPosition(positions) { if (positions.length === 0) { return; } const latestPosition = positions[positions.length - 1]; const cartesian3 = Cesium.Cartesian3.fromDegrees(latestPosition.longitude, latestPosition.latitude, 0.4); if (!carModelData) { createCarModel(cartesian3, latestPosition.Angle); } else { carModelData.position = cartesian3; const headingPitchRoll = new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(latestPosition.Angle + 90), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0) ); carModelData.orientation = Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll); } } function createCarModel(cartesian3, angle) { const headingPitchRoll = new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(angle + 90), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0) ); const scaleByDistance = new Cesium.NearFarScalar(200, 120, 1200, 0.6); const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0, 10000); carModelData = viewer.entities.add({ position: cartesian3, orientation: Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll), model: { uri: "http://127.0.0.1:5501/car/scene.gltf", scale: 75, scaleByDistance, distanceDisplayCondition, }, id: 'carModel' // 添加id属性 }); } --------------------------------------------------------------- // 轨迹点 和 轨迹线 和 标签文字 let positionsArray = []; let entityList = []; function point(positions, labelText) { const cartesian3Array = []; positionsArray = positions.flatMap(pos => [pos.longitude, pos.latitude]); // 移除之前的实体点 for (const entity of entityList) { viewer.entities.remove(entity); } entityList = []; for (const position of positions) { let entityIndex = entityList.length; const cartesian3 = Cesium.Cartesian3.fromDegrees( position.longitude, position.latitude, 0.02 ); const pointLabel = new Cesium.Entity({ position: cartesian3, point: { pixelSize: 10, color: Cesium.Color.BLUE, show: checkedPoint.value, outlineColor: Cesium.Color.WHITE, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 500), scaleByDistance: new Cesium.NearFarScalar(100, 1, 300, 0.5), outlineWidth: 1, }, // label: { // text: labelText, // font: '14pt monospace', // show: new Cesium.CallbackProperty(() => { // return entityIndex === entityList.length - 1; // }, false), // style: Cesium.LabelStyle.FILL_AND_OUTLINE, // outlineWidth: 2, // verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // pixelOffset: new Cesium.Cartesian2(0, -9), // scaleByDistance: new Cesium.NearFarScalar(300, 1, 1000, 0.4), //设置随图缩放距离和比例 // scale: 1, // fillColor: Cesium.Color.WHITE,//标签的文本填充颜色。 // outlineColor: Cesium.Color.WHITE,//标签的文本轮廓颜色。 // }, }); entityList.push(pointLabel); viewer.entities.add(pointLabel); cartesian3Array.push(cartesian3); } } -------------------------------------------------------- // 创建新的轨迹线 let polylineGeometry = null; let geometryInstance = null; function initializePolyline(positions) { const positionsArray = positions.flatMap(pos => [pos.longitude, pos.latitude]); const positionsInCartesian = Cesium.Cartesian3.fromDegreesArray(positionsArray); polylineGeometry = new Cesium.PolylineGeometry({ positions: positionsInCartesian, width: 5, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 500), scaleByDistance: new Cesium.NearFarScalar(100, 10, 500, 1), }); geometryInstance = new Cesium.GeometryInstance({ geometry: polylineGeometry, attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED) } }); const primitive = new Cesium.Primitive({ geometryInstances: geometryInstance, appearance: new Cesium.PolylineMaterialAppearance({ material: Cesium.Material.fromType(Cesium.Material.ColorType) }) }); viewer.scene.primitives.add(primitive); } // 更新轨迹线位置 function updatePolylinePosition(positions) { if (geometryInstance) { const positionsArray = positions.flatMap(pos => [pos.longitude, pos.latitude]); const positionsInCartesian = Cesium.Cartesian3.fromDegreesArray(positionsArray); polylineGeometry.positions = positionsInCartesian; geometryInstance.geometry = polylineGeometry; geometryInstance.show = checkedLines.value; } } ***
Mia好纠结
请问在对React项目做状态管理，您们都是使用什么方案呢？
请问在对React项目做状态管理，您们都是使用什么方案呢？ React有若干种状态管理的方案，官方使用的Redux/ Redux-Toolkit 是官方推荐的， 请问您们的解决方案是怎么使用的呢？ 是否还有比较方便容易使用的方案？
我买了30万的鞋子
vue axios请求后台接口code返回200，但是没有返回数据,请问为什么？
请求的接口信息： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250112/84f3cd1ac0a11ea6c8f3b396f9ca3c2d.png) 没有返回东西： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250112/c819d4f886fa55961a9bad4861c44060.png) 控制台报错： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250112/068fbd186f9f50585d7d15da43ebe707.png) 前端代码： import axios from 'axios' import { baseURL, taskURL } from './resource' // 3.ES6 Promise 封装方式 export function request(options) { return new Promise((resolve, reject) => { // 1.创建 axios 的实例对象 const instance = axios.create({ baseURL: baseURL, // method:"post", timeout: 300000, withCredentials: true // timeout: 50000 }) // alert( baseURL) // 3.过滤器(拦截器) instance.interceptors.response.use(res => { return res.data }, err => { console.log('来到了response拦截failure中'); console.log('err', err); if (err && err.response) { switch (err.response.status) { case 400: err.message = '请求错误' break case 401: err.message = '未授权的访问' break } } return err }) // 2.通过实例发送网络请求 instance(options).then(res => { resolve(res) }).catch(err => { reject(err) }) }) } 求大家帮个忙看看到底是哪里问题，要怎么修改，谢谢
万码418H1T8P
[杂念] 请教一下前端的职业发展之路
目前一直在一家公司做业务开发，能力逐年减退，薪资不高，且晋升无望。 思考过几种方案： - 跳槽继续做前端，可能最终还是面临以上困境 - 换方向，可能存在很多学习成本以及找工作难度大 - 考研转行，转到一个行业壁垒高一些的专业 - 回老家考公/编制 本人只是一个普通双非，毕业4年。对职业发展迷茫，求各位大佬解惑
云卿山手
针对一个目录，里面的忽略文件的规则功能实现是什么原理呢, 请问是否是开源的技术呢？
针对一个目录，里面的忽略文件的规则功能实现是什么原理呢, 请问是否是开源的技术呢？ 比如：.gitignore # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* lerna-debug.log* node_modules dist dist-ssr *.local
明道
Video.js 提示No compatible source was found for this media. 怎么解决？
在vue项目中使用Video.js播放m3u8视频时 播放器会先No compatible source was found for this media. 然后迅速变成正常的视频首帧 但是在生产环境下 这个速度就变得很慢 这个异常提示会持续2-3秒 这个体验非常不好 有没有大佬可以赐教一下 有搜到网上说用nextTick去延迟实例化 但是试了还是会有这个问题 "企业微信截图_16944863047132.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/6c3e97786697548d0fdb855d20469d3c.png)
博学的学渣
如何理解应用程序需要通过系统调用，来跟 Socket 层进行数据交互？
Linux 系统是通过 socket 层进行网络数据包交互的，也就是应用程序调用的 socket 提供的接口 那么对于前端开发人员，调用的接口是 node 使用的 HTTP，浏览器使用的是 Web API，没有套接字的身影，是这些第三方库底层对 socket 进行了封装么?
Mia好纠结
如何使用阿里巴巴的iconfont？
我在参考"fonticon" (https://link.segmentfault.com/?enc=JO3Mmk4q6Ig5HLHD9aJQ9w%3D%3D.z2AskqKwCmLPsyoaP%2FAHqNenQYXv7ULW2HRqJTx7hLY4TjH9jWlQkviwmudkZUOA%2BytC6Qsg8TRcexKdhtjpAg%3D%3D) 的使用步骤的时候， 得到了icons.css @font-face { font-family: "iconfont"; /* Project id 4235915 */ src: url('//at.alicdn.com/t/c/font_4235915_mga18tuafz.woff2?t=1693795326674') format('woff2'), url('//at.alicdn.com/t/c/font_4235915_mga18tuafz.woff?t=1693795326674') format('woff'), url('//at.alicdn.com/t/c/font_4235915_mga18tuafz.ttf?t=1693795326674') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-pc:before { content: "\e64a"; } 我有2个问题想要咨询一下： 1、url('//at.alicdn.com/t/c/font_4235915_mga18tuafz.ttf?t=1693795326674') 是否这个脱离了网络，就显示不了icon图了？ 2、我上面是只使用了一个icon， 如果想要使用更多的icon，我还需要重新做一遍不呢？ 还是说直接添加类似 .icon-pc:before { content: "\e64a"; } 即可？