- 博客(54)
- 收藏
- 关注
RSS订阅原创 前端利用Turf.js实现对地图上的点聚合算法
调用如下，我用的是高德地图，getResolution获取当前地图分辨率，大概算出合适的半径，传入即可，然后就是监听地图的moveend事件，不断传入新的newData就可以算出当前聚合的数据，然后再地图上再渲染聚合的数据就好了。目前思路是想写一个方法，传入点位，再传入一个半径，算出n多个聚合集合，只取每个聚合集合中的一个集合，成立成一个新数组，渲染再地图上，这样就可以实现一个简单的聚合效果。由于项目上地图上的点位数据比较敏感，暂时不做效果展示，按照上面的方法，可以实现一个简单的聚合效果。
2025-03-19 11:48:36
292
原创 vue组件打包，实现将对应的静态文件复制到打包后的文件中
需求：我在项目中写了一套业务组件库，然后写了一个README.md文档，解释组件的用法，以及相关组件抛出的方法如何使用的介绍；然后我需要对这套业务组件进行打包，希望打包后自动将README.md文件复制到打包后的文件中。vite-plugin-static-copy 插件。我的vite配置源代码。
2025-02-17 17:30:58
381
原创 使用vue3、vite打包项目中组件库中的某一个组件，并将其推送至npm上
最近公司人手不够，老板将一个项目交给外包团队进行协助开发，老板又不希望外包团队可以看某些业务上的组件代码，让我解决这个问题；查找了一下解决方案，可以将组件类似于项目打包一样，将其打包成一个依赖组件，可以npminstall去下载，并且组件打包后，.vue文件会被打包成js文件，想要阅读起来也非常困难。大致的组件目录如下。
2025-01-13 17:32:32
1127
原创 大屏性能优化-数据存储IndexedDB(localForage)
最近遇到大屏上的性能问题，发现页面占用内存动不动就是1.8G，页面放置一会浏览器就会自动刷新，原因应该是浏览器的内存占用太大了，浏览器主动释放掉导致的重新刷新。随后为了解决这个问题，发现了占用内存比较的大的代码在地图上；由于地图上要加载非常多的图层，并且图层中的数据量非常大，有整个城市的楼宇覆盖面，小区覆盖面等等，这些数据量还是比较大的，这些存在前端比较占内存，于是寻找到了一种解决办法，利用IndexedDB这种技术将数据存下来，不再利用创建内存变量将数据存下来。
2024-12-25 10:00:00
1066
原创 解决uniapp中使用axios在真机和模拟器下请求报错问题
才发现uniapp并不兼容axios。为了解决这个问题，找到了一款axios适配uniapp的插件，使用方法也非常简单。在你的axios封装方法中，import导入插件，在axios.create里配置适配器adapter即可解决uniapp兼容axios问题。
2024-12-21 15:54:31
761
原创 uniapp引入echarts报错解决，并解决图例事件和tooltip失效问题
最近新搭建的uniapp项目需要引入echarts图表，没想到坑这么多，在此做一个记录。我的uniapp是使用vite搭建的项目，所以我npm install echarts下载后，按照pc端那样import * as echarts from 'echarts'引入报错。
2024-11-29 13:52:40
1052
2
原创 通过多个经纬度计算出该经纬度范围的中心点
业务上有一个需求，在地图上画出小区的面积范围，在范围的中心点画上名字。因此封装了一个方法，传入多组经纬度，根据多组经纬度算出多组经纬度组成的面积中心点。该方法传入一个二维数组，数组的子项都是有经纬度组成的一个数组；
2024-11-22 13:51:35
327
原创 使用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
383
原创 AI对开发者的影响，以及传统软件开发 与 AI参与的软件开发区别
AI 大模型，尤其是像 GPT-4、BERT 这样的语言模型，正以深远的影响改变着软件开发流程。传统的软件开发流程通常依赖开发人员进行代码编写、测试、调试等工作，但随着 AI 技术的进步，AI 可以承担越来越多的任务，自动化和优化开发流程，提升生产力。以下是与之间的对比，以及 AI 大模型如何重塑开发流程的分析。
2024-11-21 14:58:26
1131
原创 实现可视化大屏的适配，并且解决缩放导致的事件偏移问题
项目上有一个大屏是根据UI的设计稿，已经将宽高固定了，现在要求做适配，这里推荐两款用过的适配插件。
2024-11-21 09:28:47
776
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
1005
2
原创 通过vite+vue3+pinia从0到1搭建一个uniapp应用
最近项目上要做一个app，选择了用uniapp作为开发框架；我大概看了一下uniapp的文档，根据文档从0到1搭了一个uniapp应用供大家参考。因为本人习惯使用了WebStorm编译器，但是uniapp官方推荐使用HBuilder搭建，如果和我一样习惯WebStorm或者是vscode其他的编译器进行开发，可以选择官方提供的第二种方式，利用脚手架命令进行搭建，接下来我会以脚手架的方式进行搭建。
2024-11-19 10:18:01
1925
原创 通过js实现地理信息坐标WGS84、GCJ-02、BD-09坐标互转
了解了这三种坐标系，自然就能够理解它们之间的坐标区别，所以如果用一个经纬度要在各自的地图上标点就会出现坐标精度有偏差，那么就需要将该坐标转换成对应坐标系的经纬度坐标，这样绘制在地图上才不会有偏差。BD-09坐标系是百度定制的一套加密规则，BD-09在GCJ-02的基础上进行加密处理，进一步提高了地图数据的安全性，应用于百度地图。WGS84坐标系是国际上定义的统一的经纬度坐标规范，目前常见的地图应用有谷歌地图、天地图，这些地图都是用的WGS84坐标系。
2024-11-14 18:09:17
669
原创 vue中实现列表无缝动态滚动
要想实现列表的动态无缝滚动，这里推荐两款组件，vue-seamless-scroll和vue3-seamless-scroll，组件的用法也非常简单，以下是使用方式。
2024-11-06 16:26:56
3155
6
原创 利用QGIS工具手动绘制线轨迹并生成地理信息geojson文件
前端想要获得一个完整的shp文件或者geojson的地理信息文件，可以利用QGIS工具手动绘制你想要的数据点位，然后导出图层生成对应的文件即可。
2024-10-30 14:44:26
1072
原创 vue里实现一个炫酷的动态border边框
实现思路通过伪类元素after和border充当盒子边框，以及自定义属性实现，利用创建一个渐变背景，通过动画修改自定义属性--angle的值，改变其旋转角度，即可实现一个动态的border。
2024-10-24 10:00:00
971
原创 利用QGIS将.shp文件转换成json文件，并引入天地图
QGIS是一个桌面版的GIS软件，它可以处理地理数据、编辑转换等功能，并且免费下载。
2024-09-30 10:55:05
1907
原创 通过ZRender库实现了一个炫酷的大屏loading组件
上一篇文章用ZRender库画了一个大屏的顶部标题，本片文章是通过ZRender实现了一个大屏中炫酷的Loading。我这个大屏是使用vue框架搭建的，vue是单页面应用，首次访问项目会导致有一定的白屏时间，这个白屏时间会给用户造成一种界面卡住的感觉，所以需要加一个loading界面，给用户提醒页面正在加载。
2024-09-03 16:48:02
646
原创 通过ZRender画一个大屏的顶部样式标题
介绍：通过ZRender画一个大屏项目的顶部样式，在其中放入大屏的标题。是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是的渲染器。
2024-08-07 14:07:08
528
原创 记录解决mapVGL画的图层无法在地图上调整离地面高度的问题
激动激动太激动了，项目上有一个问题困扰我很久了，在地图上使用mapVGL画出来的图层是紧贴在地图上的，无法调整离地面的高度，就会导致部分图层会对有些图层有遮盖，去调整zIndex层级也不起左右，我这里是画出来的3D楼宇对一些图标有遮挡，因为3D楼宇有高度，就会对平面的图层会有遮挡效果。可以看到文档上除了经纬度，第三个参数是海拔高度，于是我迅速去修改了我的代码，我在处理mapVGL需要的数据格式时，给加上了100的海拔高度。于是，神奇的一幕来了，我的问题解决了。
2024-07-24 11:16:28
342
原创 解决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
1136
原创 在vue3中通过vue-i18n实现国际化多语言切换
之前有在react中介绍过如何使用i18n去实现国际化，那么，在vue里想要实现国际化一般也需要用到i18n这个库，接下来介绍如何使用这个库。
2024-07-15 15:32:03
2200
原创 通过Umijs从0到1搭建一个React项目
有一阵时间没写react了，今天通过umi搭建一个demo项目复习一下react；umi是一个可扩展的企业级前端应用框架，在react市场中还是比较火的一个框架。
2024-07-10 18:07:09
2971
原创 vue3里对Echarts进行封装形成公共组件
在我们使用图表echarts组件时，其实需要对echarts进行封装，形成一个全局公共组件，如果不选择封装成组件，那么按照echarts官方文档来写则每次需要获取实例，然后echarts.init(ref)去初始化图表，这样其实会很麻烦，如果页面里的图表比较多则就会导致页面非常冗余，所以需要对其进行封装。
2024-06-28 17:38:03
774
原创 通过div的contenteditable属性实现富文本自定义公式生成器
最近遇到一个需求，需要实现一个自定义公式生成器，找网上找了好久都没合适的，有找到类似的但是存在一些光标上的bug，让人非常头疼，最后参考了一些部分代码实现了自己的公式生成器，效果如下。
2024-06-26 11:31:48
848
4
原创 前端引入不同的字体风格
为了实现页面更加美观，产品可能希望有不同的字体风格，那么就需要前端去实现不同的字体风格，实现不同的字体风格也非常简单，步骤如下。
2024-06-19 18:00:56
876
原创 解决vite打包vue项目导致JavaScript 堆内存耗尽，打包失败
你可以尝试增加 Node.js 的堆内存限制，以便程序有更多的内存可用。打开package.json文件，编辑build脚本：4096算下来是4GB，就临时给nood分配了4GB的内存。: 如果可能的话，尝试使用流式处理来逐行或者逐块地处理数据，而不是一次性加载所有数据。: 如果你的计算机硬件条件允许，考虑升级到内存更大的计算机，以便有更多的内存可用。: 如果你正在处理大量数据，尝试分批处理数据，而不是一次性加载所有数据到内存中。看了一下最后还是给Node.js增加内存最为暴力，效果也最为明显。
2024-06-03 11:34:59
1709
原创 vue3加载动态路由出现的问题解决
寻找了很多方法，最后明白了应该是npm run build 打包后，代码按照上面的import导入就无法找到组件路径，所以需要换一种引入方法。打印modules可以看到返回了views文件夹下的所有路径，通过遍历这个路径和后端拿到的数据路径，过滤出最后的动态路由。最近遇到了动态加载路由的问题，在开发环境下动态路由正常，打包后部署到服务器后，动态路由无法访问，一直报错。写一个for循环遍历方法，遍历后台返回的数据，并且遍历modules获取到对应的path并返回。
2024-05-30 17:10:07
1115
原创 解决vue3+Ts项目，打包报错问题。
可以看到以上报错，很多基本上都是ts的写法问题，有的同事写ts可能不会在意这些问题，例如写了index却没有使用，导入了某个模块却没有使用，再或者定义的变量没有加类型，再打包的时候都会出现问题，那么临时去改肯定来不及，我们可以在package.json中去处理打包命令。可以看到build命令里面有两个命令。vue-tsc和vite build；vue-tsc是TypeScript的编译命令，而vite build是vite的打包编译命令，如何想要打包成功不报错的情况下，需要将vue-tsc命令删掉即可。
2024-05-29 10:56:19
2074
原创 VUE3中实现主题颜色切换
root{这里定义了两套CSS主题，:root会选择到根元素，也就是会选择到Html元素，所以在Html下的元素都可以引用创建好的变量，实现共用颜色主题，这个文件可以直接在main.ts文件中import引入。
2024-04-19 14:55:13
2034
原创 Vue中引用百度地图并基于MapVGL实现3D地图效果，并绘制图层
MapVGL的介绍：MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。导入MapVGL库后，首先我们需要创建一个map.js中间文件，利用jsonp拿到百度地图的数据。按照文档，需要将你的json文件里的数据格式转换成MapVGL图层需要的数据格式。红色的线条就是最终画出来的图层效果。
2024-03-13 17:50:11
2425
7
原创 react拖拽组件dnd-kit拖拽事件与点击事件冲突问题解决
事件捕获用过都不行、寻找了很多办法无果，dnd-kit官方文档给出了Sensors传感器的概念，功能大概意思就是比如鼠标按下拖拽组件需要移动多少个像素才触发拖拽事件、或者是等待多少毫秒触发拖拽事件。例如我写的传感器如下，鼠标按下需要移动5个像素才激活拖拽事件， 这样当地点击功能按钮时，鼠标没有移动，自然就触发了点击事件。传感器如何应用：应用起来也非常简单，在DndContext标签上加个sensors属性就应用好了。记录在拖拽功能中拖拽组件与点击事件冲突，导致点击事件无法触发，点击只会触发拖拽事件。
2023-11-22 10:44:49
2567
原创 React拖拽组件dnd-kit的引入和使用
最近在项目上有个模块需要实现拖拽功能，选了很久的拖拽组件，最后选择了dnd-kit组件库，原因在于这个组件比较新，并且近期还在维护，还有相对应的学习文档可以查看。
2023-10-31 16:31:53
6485
1
原创 基于Expo开发react native的相关常用命令
点击链接就会打开expo的官网，查看打包进度和时间，打包完成后就出现一个Download按钮，就可以下载打好的包，需要注意，这里的命令默认打印的是abb格式的包，用于上架商店使用，如果想打apk 的包，需要加上。启动Expo开发服务器，并在浏览器种打开Expo DevTool控制台。安装指定的 npm 包，并将其添加到 Expo 项目中。和上面的步骤一样，但是环境必须要MAC系统。两下手机也可以呼出调试菜单。Expo项目在模拟器上可以。可以呼出调试菜单，真机可以。
2023-10-08 14:51:14
927
1
原创 Echarts中数据对tooltip小气泡的影响
第二种方法可以formatter来实现，formatter可以自定义toopltip里的布局以及数据，对开发者来说可以非常灵活的实现想要的结构，formatter回调函数打印的params如下；为了解决这种情况，数据为null时不展示这个字段，可以修改toopltip对象中的trigger属性，将trigger:'axis'修改为trigger:'item'。toopltip的用法很简单，只需要在echarts的配置项中添加tooltip属性就好了，但是有一些小的注意点需要注意。
2023-10-01 13:00:00
220
原创 Echarts中虚线与x轴刻度线没对齐解决办法
解决这个问题的方法非常简单，只需要在xAxis配置项中添加axisTick属性，然后添加alignWithLabel:true就可以了。
2023-09-14 16:09:33
1149
1
原创 react native中手风琴组件react-native-collapsible的使用方法
【代码】react native中手风琴组件react-native-collapsible的使用方法。
2023-08-16 13:16:40
584
1
原创 react native基于expo上传图片组件expo-image-picker的使用
app中，需要新增一个用户上传图片功能，由于app项目基于expo搭建的，所以直接使用expo中的组件。拿到assets后，组装成你想要的数据，返给后端拿到图片id再接着实现后面的功能。这里注意IOS和安卓下的区别，IOS正常打开相册，安卓打开的是文件管理器。第一步：下载expo-image-picker。第三步：上传方法（我这里用伪代码描述）第二步：在对应的文件中导入。上传图片成功后的回调结果。
2023-08-14 17:00:37
784
空空如也
vite单独打包组件，会把其他组件也打包进来。
2025-01-20
项目中如何设置私密文件，其他人无法编辑
2024-12-30
vue3项目，页面放置一会就会自动刷新，如何解决
2024-12-10
TA创建的收藏夹 TA关注的收藏夹
TA关注的人