- 博客(66)
- 收藏
- 关注
RSS订阅原创 通过recorder-core库实现音频可视化，实现语音实时录入
上篇文章通过前端原生API MediaRecorder 实现了一个简单的语音录入功能；本篇文章是基于recorder-core库实现语音实时录入，实现音频频可视化功能。ecorder-core代码地址https://github.com/xiangyuecn/Recorderrecorder-core演示地址https://xiangyuecn.github.io/Recorder/由于浏览器的机制，获取麦克风权限，必须要localhost或者https。部署到服务器上建议还是得申请证书地址换为https。
2025-11-01 11:00:00
300
原创 Vite打包时忽略掉某一个目录，不将其打包到代码中
目前的目录结构是/src/views/heat和/src/views/gas对应的是两个行业项目，但是/src/views/system以及/src/views下其他文件都是系统公共部分，打包时会把代码都打包再一起，所以现在需要在打包时候进行剥离，例如打包gas项目时/src/views/heat不参与打包，打包heat时/src/views/gas不参与打包。这篇文章记录一下解决方案。实现方法：通过external排除掉符合要求的模块。
2025-10-29 16:48:14
178
原创 前端使用MediaRecorder实现声音录入，并且实现声音可视化
项目上有一个要实现一个语音录入的功能，我打算使用Web Audio API的MediaRecorder和AudioContext来实现音频录制。实现效果如下具体思路可以将功能拆分一下，实现声音录入并且可视化首先是要如何获取声音数据，拿到声音数据如何分析将其可视化出来。
2025-09-12 10:44:03
321
原创 Three.js中实现流动的管线效果
最近在跟第三方对接工业流程的模型，发现建模的管线还挺好看的，给材质加上一个偏移，就会出现一直流动的效果，于是在想可不可以使用Three.js画出同等效果的管线。效果如下，管线画出来了，但是拐角又不是很好看。解决办法就是把拐角的点设置多一些，就看起来比较圆滑了。整体的实现思路是先绘制管线模型，然后在模型上添加一个动态的着色器材质，实现管线流动效果。其实没有达到我的预期，我想的是如下箭头效果，但这个曲线它自动偏移圆滑了一些。因为我加载了一个模型地板比较大，所以我把管线相关的参数设置的也比较大。
2025-08-01 11:03:54
863
1
原创 解决vue中使用vite-plugin-cesium插件打包后运行项目报错
最后发现打包的路径有问题，因为我的vite.config文件中的base填写了路径，导致打包会把cesium打包到/dp目录下。降vite-plugin-cesium的版本，我当前的版本是1.2.23，可以降版本降到1.2.22版本也可以。打包后的目录结构，可以发现打包后的cesium外面会套一层base目录，这是导致路径报错的根本原因。1.2.22版本打包后，cesium会在打包后的根目录下，不会出现路径错误的问题。我对项目打包后运行查看打印台报错。
2025-07-18 11:42:13
403
原创 在vue中使用Three.js渲染FBX模型
Three.js 是一个轻量级的开源 JavaScript 3D 库，基于 WebGL 技术实现浏览器端的 3D 渲染。跨平台：支持桌面/移动端浏览器功能丰富：提供几何体、材质、光源、相机等完整 3D 元素易用性：简化 WebGL 复杂 API，降低 3D 开发门槛活跃生态：拥有粒子系统、物理引擎、后期处理等扩展插件典型应用场景：数据可视化、游戏开发、产品展示、AR/VR 等。
2025-07-11 16:31:47
787
原创 前端对WebSocket进行封装，并建立心跳监测
WebSocket 是一种在客户端和服务器之间进行全双工、双向通信的协议。它是基于 HTTP 协议，但通过升级（HTTP 升级请求）将连接转换为 WebSocket 协议，从而提供更高效的实时数据交换。
2025-06-06 18:15:45
733
原创 shp转3d tiles在cesium渲染楼宇白膜
shp文件一般做gis的人都知道它是干嘛的，它是一种地理信息系统矢量数据格式，主要用于存储地理空间数据。也可以将其文件放在服务器下，通过服务器地址访问，例如可以通过nginx发布该文件，通过地址访问3d tiles文件，减少前端包体积。选择造型参数，然后选择建筑高度，如果你的shp文件有高度字段，那么就选中高度字段，选择对应的字段名，点击确认。然后选择输出路径，选择输出的文件地址，点击提交处理，等待转换完成即可。点击通用模型切片-点击输入文件中的shp按钮，添加shp文件。将对应的属性全部勾选。
2025-06-01 11:15:00
902
1
原创 在Cesium中通过geojson和3d tiles分别加载楼宇白膜
但是在cesium中不推荐这种方式，这种加载少量的白膜可以实现效果，但是数据量大起来后，会导致卡顿，性能上会出大问题，所以不推荐这种加载方式，在cesium中推荐Cesium3DTileset来加载3d tiles文件来渲染白膜，也就是方法二。如果你没有3dtiles文件来加载白膜，只有geojson加载白膜可以通过GeoJsonDataSource来加载白膜，json格式如下。Cesium3DTileset渲染的大规模白膜，页面也不是很卡顿，性能要比方法一好很多。3dtiles文件目录结构如下。
2025-05-31 11:00:00
678
原创 在Vue3+Vite中引入Cesium
最近在研究Cesium，尝试把Cesium引入到vite+vue框架中。vue+vite初始化项目这里不多做概述，需要搭建步骤的可以看我往期的文章。搭建完vue项目后，我们需要先去cesium管网去注册一个token，用于访问cesium地图资源。根据步骤注册token即可。前期准备完成后正式开始引入Cesium。
2025-05-01 12:00:00
1323
1
原创 利用高德API实现仅在地图可视区域内展示数据(性能优化)
最近项目上的地图遇到了一些性能上的问题，由于业务需求，在地图上展示了一个城市的大量的点位信息和区面信息，并且区面上还展示了对应的名字，发现了大量的区面数据是导致地图卡顿的关键因素；于是考虑是否可以重构数据，只展示可视区域的数据，这样每次加载的数据就不是全部数据，这样就可以解决地图卡顿问题。整体思路：计算出可视区域的经纬度范围，然后遍历地图上的每一个点位和区面数据，判断数据中的经纬度是否在可视区域的经纬度范围内，如果存在，就塞到新的数组中，遍历结束后更新对应的图层数据。
2025-04-22 11:13:09
486
原创 前端利用Turf.js实现对地图上的点聚合算法
调用如下，我用的是高德地图，getResolution获取当前地图分辨率，大概算出合适的半径，传入即可，然后就是监听地图的moveend事件，不断传入新的newData就可以算出当前聚合的数据，然后再地图上再渲染聚合的数据就好了。目前思路是想写一个方法，传入点位，再传入一个半径，算出n多个聚合集合，只取每个聚合集合中的一个集合，成立成一个新数组，渲染再地图上，这样就可以实现一个简单的聚合效果。由于项目上地图上的点位数据比较敏感，暂时不做效果展示，按照上面的方法，可以实现一个简单的聚合效果。
2025-03-19 11:48:36
539
原创 vue组件打包，自动将对应的静态文件复制到打包后的文件中
需求：我在项目中写了一套业务组件库，然后写了一个README.md文档，解释组件的用法，以及相关组件抛出的方法如何使用的介绍；然后我需要对这套业务组件进行打包，希望打包后自动将README.md文件复制到打包后的文件中。vite-plugin-static-copy 插件。我的vite配置源代码。
2025-02-17 17:30:58
1058
原创 使用vue3、vite打包项目中组件库中的某一个组件，并将其推送至npm上
最近公司人手不够，老板将一个项目交给外包团队进行协助开发，老板又不希望外包团队可以看某些业务上的组件代码，让我解决这个问题；查找了一下解决方案，可以将组件类似于项目打包一样，将其打包成一个依赖组件，可以npminstall去下载，并且组件打包后，.vue文件会被打包成js文件，想要阅读起来也非常困难。大致的组件目录如下。
2025-01-13 17:32:32
1819
原创 大屏性能优化-数据存储IndexedDB(localForage)
最近遇到大屏上的性能问题，发现页面占用内存动不动就是1.8G，页面放置一会浏览器就会自动刷新，原因应该是浏览器的内存占用太大了，浏览器主动释放掉导致的重新刷新。随后为了解决这个问题，发现了占用内存比较的大的代码在地图上；由于地图上要加载非常多的图层，并且图层中的数据量非常大，有整个城市的楼宇覆盖面，小区覆盖面等等，这些数据量还是比较大的，这些存在前端比较占内存，于是寻找到了一种解决办法，利用IndexedDB这种技术将数据存下来，不再利用创建内存变量将数据存下来。
2024-12-25 10:00:00
1316
原创 解决uniapp中使用axios在真机和模拟器下请求报错问题
才发现uniapp并不兼容axios。为了解决这个问题，找到了一款axios适配uniapp的插件，使用方法也非常简单。在你的axios封装方法中，import导入插件，在axios.create里配置适配器adapter即可解决uniapp兼容axios问题。
2024-12-21 15:54:31
1334
原创 uniapp引入echarts报错解决，并解决图例事件和tooltip失效问题
最近新搭建的uniapp项目需要引入echarts图表，没想到坑这么多，在此做一个记录。我的uniapp是使用vite搭建的项目，所以我npm install echarts下载后，按照pc端那样import * as echarts from 'echarts'引入报错。
2024-11-29 13:52:40
1454
2
原创 通过多个经纬度计算出该经纬度范围的中心点
业务上有一个需求，在地图上画出小区的面积范围，在范围的中心点画上名字。因此封装了一个方法，传入多组经纬度，根据多组经纬度算出多组经纬度组成的面积中心点。该方法传入一个二维数组，数组的子项都是有经纬度组成的一个数组；
2024-11-22 13:51:35
619
原创 使用nvm对node的版本进行管理，实现自由切换node版本
最近要对公司的一些老项目进行维护，发现我现有的node版本下载依赖包报错，导致项目无法启动，然后需要用nvm对node的版本进行切换，npm install才可以成功下载依赖包。然后就可以nvm install 'node的版本号' 例如nvm install 12.0.0 执行就会下载node12版本。将下面代码添加到setting.txt文件中即可，然后就可以成功下载其他node版本了。nvm install node版本号，下载对应的node版本。nvm use node版本号，切换node版本。
2024-11-22 11:30:00
522
原创 AI对开发者的影响，以及传统软件开发 与 AI参与的软件开发区别
AI 大模型，尤其是像 GPT-4、BERT 这样的语言模型，正以深远的影响改变着软件开发流程。传统的软件开发流程通常依赖开发人员进行代码编写、测试、调试等工作，但随着 AI 技术的进步，AI 可以承担越来越多的任务，自动化和优化开发流程，提升生产力。以下是与之间的对比，以及 AI 大模型如何重塑开发流程的分析。
2024-11-21 14:58:26
1939
原创 实现可视化大屏的适配，并且解决缩放导致的事件偏移问题
项目上有一个大屏是根据UI的设计稿，已经将宽高固定了，现在要求做适配，这里推荐两款用过的适配插件。
2024-11-21 09:28:47
1451
1
原创 测试使用vite搭建的uni-app打包app区分开发环境和生产环境
用脚手架搭建的uniapp项目，打包H5和小程序可以和web端一样，能够通过env.dev和env.prod区分开发环境和生产环境，但是不知道打包成app时如何区分开发环境和生产环境，在此做一个测试记录。在手机上安装打包好apk程序后进入app界面就可以看到页面上显示的title是“生产地址”了，所以按照这样的流程可以做到打包app时，可以通过不同的执行脚本切换api地址。整体思路是我的prod文件里有一个生产地址，然后我在页面里尝试打印出来，然后最后打包成app看页面的打印结果是否切换成了生产地址。
2024-11-20 13:50:05
1434
2
原创 通过vite+vue3+pinia从0到1搭建一个uniapp应用
最近项目上要做一个app，选择了用uniapp作为开发框架；我大概看了一下uniapp的文档，根据文档从0到1搭了一个uniapp应用供大家参考。因为本人习惯使用了WebStorm编译器，但是uniapp官方推荐使用HBuilder搭建，如果和我一样习惯WebStorm或者是vscode其他的编译器进行开发，可以选择官方提供的第二种方式，利用脚手架命令进行搭建，接下来我会以脚手架的方式进行搭建。
2024-11-19 10:18:01
2363
原创 通过js实现地理信息坐标WGS84、GCJ-02、BD-09坐标互转
了解了这三种坐标系，自然就能够理解它们之间的坐标区别，所以如果用一个经纬度要在各自的地图上标点就会出现坐标精度有偏差，那么就需要将该坐标转换成对应坐标系的经纬度坐标，这样绘制在地图上才不会有偏差。BD-09坐标系是百度定制的一套加密规则，BD-09在GCJ-02的基础上进行加密处理，进一步提高了地图数据的安全性，应用于百度地图。WGS84坐标系是国际上定义的统一的经纬度坐标规范，目前常见的地图应用有谷歌地图、天地图，这些地图都是用的WGS84坐标系。
2024-11-14 18:09:17
1003
原创 vue中实现列表无缝动态滚动
要想实现列表的动态无缝滚动，这里推荐两款组件，vue-seamless-scroll和vue3-seamless-scroll，组件的用法也非常简单，以下是使用方式。
2024-11-06 16:26:56
3999
6
原创 利用QGIS工具手动绘制线轨迹并生成地理信息geojson文件
前端想要获得一个完整的shp文件或者geojson的地理信息文件，可以利用QGIS工具手动绘制你想要的数据点位，然后导出图层生成对应的文件即可。
2024-10-30 14:44:26
1869
原创 vue里实现一个炫酷的动态border边框
实现思路通过伪类元素after和border充当盒子边框，以及自定义属性实现，利用创建一个渐变背景，通过动画修改自定义属性--angle的值，改变其旋转角度，即可实现一个动态的border。
2024-10-24 10:00:00
1382
原创 利用QGIS将.shp文件转换成json文件，并引入天地图
QGIS是一个桌面版的GIS软件，它可以处理地理数据、编辑转换等功能，并且免费下载。
2024-09-30 10:55:05
2588
原创 通过ZRender库实现了一个炫酷的大屏loading组件
上一篇文章用ZRender库画了一个大屏的顶部标题，本片文章是通过ZRender实现了一个大屏中炫酷的Loading。我这个大屏是使用vue框架搭建的，vue是单页面应用，首次访问项目会导致有一定的白屏时间，这个白屏时间会给用户造成一种界面卡住的感觉，所以需要加一个loading界面，给用户提醒页面正在加载。
2024-09-03 16:48:02
769
原创 通过ZRender画一个大屏的顶部样式标题
介绍：通过ZRender画一个大屏项目的顶部样式，在其中放入大屏的标题。是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是的渲染器。
2024-08-07 14:07:08
624
原创 记录解决mapVGL画的图层无法在地图上调整离地面高度的问题
激动激动太激动了，项目上有一个问题困扰我很久了，在地图上使用mapVGL画出来的图层是紧贴在地图上的，无法调整离地面的高度，就会导致部分图层会对有些图层有遮盖，去调整zIndex层级也不起左右，我这里是画出来的3D楼宇对一些图标有遮挡，因为3D楼宇有高度，就会对平面的图层会有遮挡效果。可以看到文档上除了经纬度，第三个参数是海拔高度，于是我迅速去修改了我的代码，我在处理mapVGL需要的数据格式时，给加上了100的海拔高度。于是，神奇的一幕来了，我的问题解决了。
2024-07-24 11:16:28
423
原创 解决element-plus的Date Picker日期选择器组件禁用时间的坑
但是，这里有一个小问题，可以看到我选择的是2024-7-9日到2024-7-19日以及2024-7-24日到2024-8-1日，但是可以看到2024-7-9和2024-7-24却没有被禁用。目前需求是有一个表单，其中有多个日期组件需要选择时间范围，并且选择的范围不可以有交集重复，所以这里需要用到Date Picker中的disabled-date属性，来判断该日期是否被禁用。可以看到禁用方法里的判断条件写的也没有问题，于是我打印了一下currentDate，start，end。
2024-07-19 17:18:36
1445
原创 在vue3中通过vue-i18n实现国际化多语言切换
之前有在react中介绍过如何使用i18n去实现国际化，那么，在vue里想要实现国际化一般也需要用到i18n这个库，接下来介绍如何使用这个库。
2024-07-15 15:32:03
3514
原创 通过Umijs从0到1搭建一个React项目
有一阵时间没写react了，今天通过umi搭建一个demo项目复习一下react；umi是一个可扩展的企业级前端应用框架，在react市场中还是比较火的一个框架。
2024-07-10 18:07:09
3437
原创 vue3里对Echarts进行封装形成公共组件
在我们使用图表echarts组件时，其实需要对echarts进行封装，形成一个全局公共组件，如果不选择封装成组件，那么按照echarts官方文档来写则每次需要获取实例，然后echarts.init(ref)去初始化图表，这样其实会很麻烦，如果页面里的图表比较多则就会导致页面非常冗余，所以需要对其进行封装。
2024-06-28 17:38:03
1009
原创 通过div的contenteditable属性实现富文本自定义公式生成器
最近遇到一个需求，需要实现一个自定义公式生成器，找网上找了好久都没合适的，有找到类似的但是存在一些光标上的bug，让人非常头疼，最后参考了一些部分代码实现了自己的公式生成器，效果如下。
2024-06-26 11:31:48
1039
4
原创 前端引入不同的字体风格
为了实现页面更加美观，产品可能希望有不同的字体风格，那么就需要前端去实现不同的字体风格，实现不同的字体风格也非常简单，步骤如下。
2024-06-19 18:00:56
1097
原创 解决vite打包vue项目导致JavaScript 堆内存耗尽，打包失败
你可以尝试增加 Node.js 的堆内存限制，以便程序有更多的内存可用。打开package.json文件，编辑build脚本：4096算下来是4GB，就临时给nood分配了4GB的内存。: 如果可能的话，尝试使用流式处理来逐行或者逐块地处理数据，而不是一次性加载所有数据。: 如果你的计算机硬件条件允许，考虑升级到内存更大的计算机，以便有更多的内存可用。: 如果你正在处理大量数据，尝试分批处理数据，而不是一次性加载所有数据到内存中。看了一下最后还是给Node.js增加内存最为暴力，效果也最为明显。
2024-06-03 11:34:59
2245
空空如也
vite单独打包组件，会把其他组件也打包进来。
2025-01-20
项目中如何设置私密文件，其他人无法编辑
2024-12-30
vue3项目，页面放置一会就会自动刷新，如何解决
2024-12-10
TA创建的收藏夹 TA关注的收藏夹
TA关注的人