- 博客(7)
- 收藏
- 关注
RSS订阅原创 二维天地图组件（功能强大）点线面编辑，新建，回显
本文介绍了一个基于Vue3+TypeScript+Element Plus的天地图组件，支持点、线、面的全编辑、回显和控制功能。组件包含以下核心功能： 提供点、线、面三种绘制工具 支持编辑模式下拖拽修改图形 右键菜单实现要素删除 实时监听数据变化并刷新地图 可保存当前绘制数据到父组件 组件通过props接收showTools控制显示工具类型，以及pointData/lineData/polygonData实现数据回显。使用方式简单，父组件只需传入相应数据即可实现地图展示和编辑功能，适合需要地理信息标注的业务
2025-11-25 16:40:52
102
原创 vue-konva多个多边形（点位+标签）随意拖拽互不影响
本文介绍了一个基于Vue-Konva实现的可交互多边形绘制组件。该组件支持以下功能：1) 根据数组数据自动生成多边形；2) 多边形顶点可单独拖动调整；3) 每个多边形配有可拖动的文字标签；4) 支持整体拖动多边形及其标签；5) 所有操作限制在画布范围内。实现方案采用v-stage作为画布容器，通过v-group管理多边形、控制点和标签的层级关系，利用各种事件处理方法实现交互逻辑，包括拖拽限制、数据同步更新等。组件还集成了防抖机制优化数据保存请求，并提供了响应式样式调整。最终实现了一个可编辑保存的多个多边形
2025-08-28 13:01:38
230
原创 原生百度地图绘制折线vue3+ts解决方案
这是一个基于百度地图WebGL API的管网绘制组件实现方案。通过Vue 3+TypeScript开发，主要功能包括：1)使用BMapGLLib.DrawingManager实现折线绘制功能；2)支持自定义绘制样式和吸附功能；3)绘制完成后自动保存坐标点到数组。关键实现步骤：1)在HTML引入百度地图相关JS/CSS资源；2)通过initMapV.ts初始化地图视图；3)组件包含弹窗容器和地图绘制区域，提供"重新开始"和"关闭"按钮。该组件可集成到项目中用于管网/管线
2025-06-26 10:22:25
301
原创 element plus table组件去掉/更改hover样式
此需求属于大屏展示数据的一个内容块，领导要做成滑动下拉的格式，具体设计交给我，既然想着要展示数据那必须表格，于是几分钟就搞定基本数据，但是实在是太丑。白色跟透明化大屏格格不入，于是尝试更改table组件的css。这样就全好啦，各位其中的颜色可以自行更改，数据由于是假数据，其中一点的小瑕疵也就稍微忍忍，后续传感器真实数据上来了再对齐！写完自我感觉良好，ui说你的hover效果为什么是白色的啊，白色和靛青色很不协调，客户看着不累吗？这时候呢发现表体虽然变透明好看了，但是表头没变....于是再次框框写。
2024-01-09 17:10:59
2644
原创 关于ckplayer对接海康摄像头的问题
2.由于海康插件属于内嵌的浏览器插件，可以加载视频但是无法实现三维拖影效果，会有严重的遮 挡问题，所以启用ckplayer对接海康视频流。1.由于最新版的ckplayer默认支持m3u8，但是需要引入hls.min.js（无需安装任何js类库）1.点击标注拿到对应摄像头的indexCode与海康交互拿到对应的m3u8视频请求地址。1.由于本项目属于智慧化工园区，要求三维地图上实现点击点位标注出现实时监控视频预览。2.请求地址放入ckplayer。2.配置项需要理清楚。
2023-12-26 13:15:45
829
原创 el-upload的缓存问题
发一下最近遇到的bug吧，是关于el-upload组件的，有兴趣的兄弟可以去看看，当视图仅有一个upload的时候，可以使用官方自定义的this.$refs.refname.cleaFiles()函数来清除upload自带的缓存。但是当同一个页面有很多个upload组件调用情况的时候，clearFiles就不管用了，也请教过公司大佬，大佬说可以遍历清除upload的filelist，自己操作后没有试成功解决办法1：可以给每个调用的组件绑定不同v-bind：key解决办法2：可以动态给子组件传递v-bi
2022-06-25 17:52:59
1535
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人