- 博客(12)
- 收藏
- 关注
RSS订阅原创 React+Cesium实现地图悬浮框
摘要 本文介绍了如何实现一个随地图移动的悬浮框组件。通过使用Cesium的地图框架，实现了以下功能： 创建可自定义内容的悬浮框组件，暴露children接口供外部自定义内容 在地图代码中绑定viewer的postRender事件，实时更新悬浮框位置 使用wgs84ToWindowCoordinates方法将地理坐标转换为屏幕坐标 提供关闭悬浮框的方法并解除事件绑定，防止内存泄漏 使用示例展示了如何在地图元素点击事件中调用该组件 该方案实现了悬浮框随地图移动的效果，同时不影响其他区域的点击操作，具有较好的用户
2025-09-10 11:42:19
332
原创 react18+antd 实现可以拖拽无遮罩的模态弹框
实现Ant Design Modal可拖拽功能摘要： 通过自定义实现AntD Modal组件的拖拽功能，解决了大屏场景下弹窗与地图交互的需求。核心方案是通过标题栏的鼠标事件绑定实现拖拽逻辑：在mousedown时记录初始位置，mousemove时动态更新弹窗位置，mouseup时解除事件绑定。关键点包括：1) 使用transform定位弹窗；2) 设置mask={false}和pointerEvents:"none"解决遮罩穿透问题；3) 完善React生命周期管理防止内存泄漏。该方案代
2025-09-10 11:28:48
241
原创 react闭包陷阱
React闭包陷阱解析与解决方案 在React中，当useEffect依赖数组为空时，回调函数会捕获初始状态值的快照。这导致即使后续状态更新，清理函数中访问的仍是旧值（闭包陷阱）。 解决方案： 推荐方案：使用useRef保存最新状态值，通过current属性读取实时数据。 不推荐方案：在组件外声明变量追踪状态（违反React状态管理原则）。 核心要点： 空依赖useEffect会固定初始状态。 useRef可跨渲染周期保存可变值，解决闭包问题。 优先采用React官方推荐方式处理动态依赖。
2025-08-22 10:00:25
396
原创 electron+Vue3+vite+ts+biome+elementplus实现一个简单计算器
入门第一个electron的程序后 就发现使用原生还是太不方便了 html和js css逻辑分开 有更好的框架为何不用呢，查了下react和vue都可以和electron很好的融合， 首先第一步 用vite脚手架建一个vue项目，这里就不赘述了应该都会吧，我是用的webstorm更方便，一件新建项目选择脚手架就行了，没得或者用vscode的老老实实命令行npx create-vite 然后选择几个选项就行用ts就选上这个无所谓。大功告成，后面就是vue+vite怎么写 你就怎么写就完事。
2025-08-07 10:00:31
674
原创 mars3d cesium实现基于行政区划的点聚合(不是使用API的像素点聚合)
网上没找到类似这种实现的，大部分都是采用的基于像素的点聚合，通过设置几个参数，算法会自动把靠近的几个点聚合为一个点，但这显然不符合需求， 需求要的是以行政单位进行聚合，那就代表有的可能两个点离得很远，但是要聚合到一起， 同理，有的两个点很近 但是不在一个行政区 那就不是一个聚合。
2025-04-24 09:22:19
976
原创 react18中子传父以及父组件调用子组件方法
在react18中全部使用函数式组件，这让习惯vue的我很不习惯，就连最基础的组件通信都还没搞清白 父传子 或者孙 都好说 可以使用props 或者 上下文context， 一到子传父就犯了难，
2024-09-25 09:26:37
3020
原创 ES6手写Promise
使用ES6 class语法实现简易版的手写Promise 实现 then 链式调用、catch、finally、和静态方法resolve，reject，注释清晰，逻辑清晰
2024-08-08 09:08:37
465
1
原创 react18+antdPro可编辑表格的使用和数据联动
在vue中这很好实现 得益于v-model的双向绑定， 才开始做react项目不久， 确实让我犯了难 只知道用render写自定义组件，但是里面内容不知道咋么写 form中的name咋办能获取到数组中每行的内容，而且数据是单向的。在项目中经常会遇到这样的需求 表格数据是需要编辑的 而且有联动的需求，比如 结论是单选形式 选了存疑的 才能选存疑类型 然后会在上面tag显示对应的人数 存疑 > 0 人就显红， 符合要求小于总数就显红 而且选择为符合要求后 还要清空存疑类型。
2024-07-25 17:55:45
794
原创 从零开始创建一个vue3+vite项目并集成element-plus、eslint以及prettier
ESLint 是一个用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具，其目标是使代码更加一致并避免错误。ESLint 是完全插件化的。每条规则都是一个插件，你可以在运行时添加更多。你还可以添加社区插件、配置和解析器来扩展 ESLint 的功能。
2024-04-03 15:45:02
2367
1
原创 leaflet加载geojson设置zIndex的层级关系
有如下业务需求，加载整个区域的边界以及文字，采用geojson加载，有业务需求加载森林火险等级，并且透明度要高点，显眼一些，这样会挡住下面的边界和文字，查了很多文档，发现设置geojson的zindex无效，原因反正比较多，好像是geojson没这个属性。然后另一个图层同理，要显示在上层的 zindex就设置高一点，想在下层被遮挡的就设置小一点。最后发现有效的是给map加几个pane，并且在创建geojson的时候添加属性。
2024-04-03 09:38:01
798
1
原创 cesium销毁内存泄漏问题优化
在vue开发SPA实际项目中，不止涉及到使用cesium可视化的大屏一个界面，在切换页面或者关闭该功能、弹框后，cesium加载的模型，图层，实体等等信息会缓存到电脑的显存中，但是切回cesium界面的时候，又会重新进入页面的挂载周期，进行新的cesium实例的渲染，显存占用会越来越大，达到临界值后，页面会崩溃，显示out of memory或者是cesium页面红色弹框的shader错误。明显会看到显存曲线的上升趋势。废话不多说，直接上干货，代码。
2024-03-28 09:28:16
5141
18
原创 leaflet弹出层动态生成dom动态绑定事件无效问题
今天在项目中遇到个很诡异的bug，业务中有个查询功能点击查询后，点击时绑定map的click事件，点击地图来触发弹出层，但是在弹出层中是js动态生成的dom，其中又有一些button 动态绑定了click事件，在第一次创建时正常，再次多次点击地图后，生成的button事件失效点击无反应。期间发信每次这个弹出层关闭的时候再重新打开，第一次也可以生效，尝试每次打开前关闭一次弹框，还是无效，还试了把事件绑定放在setTimeout中也不行，但是查阅所有相关代码，并没有清除事件的操作，很纳闷，事件去哪了。
2024-03-27 14:10:02
769
1
ES6手写Promise
2024-08-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人