2301_80636534的博客

原创 折线图和多边形矢量图，同时展示在高德地图上

本文展示了一个基于Vue.js和AMap地图组件开发的航线管理系统界面。系统包含两个主要功能模块：航线管理和围栏管理。航线管理部分实现了航点标记、航线绘制功能，可显示航点的经纬度、高度、速度等详细信息，并支持航点点击交互。围栏管理部分提供矩形和圆形围栏的创建、更新和清除功能。系统采用响应式设计，通过watch监听props变化实现数据动态更新，并使用了AMap API进行地图操作。界面采用暗色主题风格，航点标记采用自定义样式，支持航点详细信息展示面板的显隐控制。整体实现了航线规划与电子围栏管理的核心功能。

原创 Echart 3D环形图

本文介绍了一个基于Vue 3和ECharts GL的3D饼图组件实现。该组件通过echarts-gl库创建具有交互效果的3D饼图，展示设备在线、离线和故障三种状态的数据分布。主要特点包括： 实现3D饼图的参数化渲染和动态更新 添加了悬浮高亮、点击选中等交互效果 优化了视觉效果，包括增强边框、阴影和光照 响应式设计，自动适应窗口大小变化 通过props接收数据，实现数据驱动更新 该组件适用于设备状态监控等数据可视化场景。

原创 高德地图航线实时标点

本文实现了一个基于高德地图的无人机航线可视化组件。组件主要功能包括：1) 通过API获取规划航线和实际飞行航线数据；2) 使用不同样式的折线区分显示两种航线（规划航线为蓝色虚线，实际航线为橙色实线）；3) 根据飞行状态实时更新无人机位置标记；4) 飞行状态下每3秒自动刷新数据。组件采用Vue3+TypeScript开发，实现了地图初始化、数据清理、航线渲染、实时标记等功能，并通过监听路由参数变化实现动态数据更新。组件卸载时会自动清理地图资源和定时器，确保内存管理安全。

原创 高德地图圆形和矩形创建并编辑

本文摘要：该代码实现了一个电子围栏管理系统，包含左侧表单栏和右侧地图容器。主要功能包括：1）支持矩形和圆形两种围栏类型的绘制与编辑；2）通过AMap API实现地图交互功能；3）提供围栏名称、备注等表单字段；4）支持新增和编辑两种模式；5）包含提交和取消操作按钮。系统采用Vue3+TypeScript开发，通过AMap.MouseTool实现围栏绘制，使用PolygonEditor和CircleEditor进行围栏编辑，并将围栏数据存储在formState对象中。代码结构清晰，包含完整的生命周期管理和资源销

原创 ant-design-vue组件设置中文

摘要：该代码展示了一个Vue3+TypeScript项目的基本结构。App.vue作为主组件，使用了Pinia状态管理(LoginUserStore)和Ant Design Vue UI组件库，并配置了中文语言包。通过a-config-provider实现国际化，BasicLayout作为基础布局组件。main.ts作为入口文件，集成了Pinia、Vue Router和Ant Design，并注入了中文语言环境配置。项目采用了Composition API的script setup语法，实现了用户登录状态的

原创 去掉滚动条

【代码】去掉滚动条。

原创 vue3两个按钮合并成一个按钮

摘要：该代码实现了一个喊话/停止喊话切换功能的Vue组件。核心逻辑是通过isShouting状态变量控制按钮文本和功能，点击按钮时触发toggleShout方法，根据当前状态分别执行startShout或stopShout操作。组件采用单按钮设计，状态变化时按钮样式（primary/danger）和文本（"喊话"/"停止喊话"）会同步更新。代码结构清晰，包含模板、脚本和样式三部分，使用Vue3的setup语法糖实现响应式状态管理。（149字）

原创 高德使用折线标点实现起点、终点、途径点

本文实现了一个基于高德地图的路线规划组件，主要功能包括：1) 通过按钮切换起点、终点和途经点的选择模式；2) 点击地图获取位置并反解析为地址信息；3) 实时绘制连接所有点的路线；4) 提供点位删除和重置功能。组件采用Vue3组合式API开发，通过不同颜色区分各类标记点，并实现了地图自适应展示所有点位。该组件具有直观的操作界面和实时反馈，适用于需要多点路线规划的Web应用场景。

原创 vue3使用‘js-audio-recorder‘插件实现录音功能，回传pcm文件

本文介绍了一个基于Vue3和Element Plus的音频录制组件实现。该组件使用js-audio-recorder插件，提供开始/停止录音、播放录音、上传录音等功能。关键特性包括：支持16位采样、16kHz采样率、单声道录制；实时显示录音时长；通过getPermission()获取麦克风权限；可将录音转换为WAV/PCM格式并上传。文章还提供了vue-i18n国际化配置建议，并提示了在Vue3+TS环境下可能遇到的插件兼容性问题，推荐参考相关博客解决。组件采用Composition API编写，包含完整的

原创 vue3使用recorder-core插件实现录音，mp3、mav格式

本文介绍了使用Vue3和recorder-core实现网页录音功能的代码实现。主要包含录音控制（打开/开始/结束）、波形显示、本地试听和文件上传功能。通过按钮触发录音操作，利用Recorder库处理音频数据，WaveView扩展显示波形图，最终将录制的MP3文件通过FormData上传至服务器。代码清晰展示了从权限获取到音频处理的完整流程，并包含资源释放处理，是一个完整的网页录音实现方案。

原创 vue新增或修改时限制判断后端的验证

【代码】vue新增或修改时限制判断后端的验证。

原创 Vue 3 + TypeScript 开发的视频直播页面组件

本文介绍了一个支持RTMP/RTSP/GB28181协议的直播组件，适用于机场和无人机场景。组件核心功能包括：1）直播源管理（设备/摄像头/镜头选择）；2）协议与画质配置（支持5档画质）；3）播放控制（启停/切换/状态监听）。关键实现包含：1）响应式布局适配多端；2）Jessibuca播放器集成；3）三种协议处理逻辑（RTMP直接播放、RTSP需转码、GB28181安防协议）。代码展示了直播参数配置、播放器初始化及状态监控等核心逻辑，特别处理了无人机ID、摄像头ID等关键参数的拼接规则。该组件通过模块化设计

原创 高德地图-轨迹回放

该代码实现了一个基于AMap/BMap的轨迹回放功能，包含以下核心功能：1) 创建地图容器和轨迹控制面板；2) 定义详细轨迹路径坐标数组；3) 使用Marker标记实现沿路径移动动画；4) 提供开始、暂停、继续、停止四个控制按钮；5) 实时绘制已通过路径和地图中心跟随。代码同时兼容AMap和BMap两种地图API，通过插件方式加载动画功能，并实现了路径可视化、自动旋转等效果。

原创 echart的3D立体柱状图

本文介绍了如何使用Vue3和ECharts创建3D柱状图效果。通过注册自定义图形(leftShape/rightShape/topShape)来构建柱体的三个侧面，利用echarts.graphic.extendShape定义每个侧面的绘制路径。在renderItem函数中组合这些图形，并设置渐变填充样式。最终在onMounted钩子中初始化图表，配置x/y轴和数据系列。关键点包括：自定义图形注册、坐标计算、渐变填充应用以及图表初始化设置。该实现展示了ECharts强大的自定义绘图能力。

原创 vue3实现天气组件

摘要：该代码展示了如何使用高德地图JSAPI 1.4的天气组件实现天气查询功能。通过AMap.Weather插件获取南京市实时天气数据，并根据不同天气类型（晴、阴/多云、雨）显示对应图标。代码采用Vue3组合式API，包含类型定义、加载状态管理和错误处理，界面样式使用SCSS实现，具有响应式布局和状态提示功能。

原创 vue3实现时间组件

这篇文章展示了一个Vue3日期时间显示组件，使用Composition API实现。主要功能包括：实时显示当前时间（时分秒）、日期（年月日）和星期几。组件通过定时器每秒更新数据，使用计算属性格式化显示内容，并包含样式定义。特点：响应式数据、定时器管理、格式化显示，适用于需要展示完整日期时间信息的场景。

原创 路由传参跳转

【代码】路由传参跳转。

原创 router和route的区别

VueRouter中route和router的核心区别在于：route是当前激活的路由信息对象，包含path、params、query等状态信息，通过useRoute()获取；router是路由实例，通过new VueRouter()创建，提供push()、replace()等方法进行路由跳转和全局管理。简言之，route用于获取路由状态，router用于操作路由行为。

原创 v-if隐藏多次点击无反应

原创 在 Vue 3 中全局使用 Suspense 组件

Vue3的Suspense组件提供了一种优雅的全局异步加载管理方案。通过在根组件包裹Suspense，可以统一处理全应用的加载状态，展示自定义fallback内容。结合Pinia状态管理可创建更高级的全局加载控制，包括加载状态和提示信息。使用时需注意嵌套Suspense的优先级、错误处理(onErrorCaptured)及SSR兼容性。这种方案能有效提升用户体验，实现统一的加载过渡效果，特别适合包含大量异步操作的Vue3应用。

原创 config.ts配置文件

链接：https://juejin.cn/post/6844904093568221191。引入作者：chrisPaul101755。

原创 “__VLS_functionalComponentProps”代码报红问题

tsconfig.json里面添加"types": ["vite/client"],VSC重新启用这个插件。

原创 Could not find a declaration file for module ‘..XX‘.

解决Vue项目中TypeScript无法识别.vue文件的问题，需进行以下操作：1) 创建shims-vue.d.ts声明文件，定义.vue模块类型；2) 检查tsconfig.json配置，确保包含.vue文件类型支持；3) 验证组件文件路径是否正确；4) 修改配置后需重启开发服务器。值得注意的是，该解决方案可能生成额外的js文件，其原理有待探讨，但实际能成功完成项目打包。建议开发者在操作前后注意文件路径和配置的准确性。

原创 vue3页面不显示

原创 小程序测试

学习。

原创 es6解构赋值

数组中不想要的元素也可以通过添加额外的逗号来把它丢弃。

原创 vue一些基本配置（持续更新）

vite.config.ts 关闭console。config.ts 查找域名。

原创 高德地图自定义折线矢量图形

实现的功能：通过点标记连接生成线 实现折线适量图形。

原创 微信小程序登录

原创 vue3添加统一路由前缀

试了好多办法，这个最直接。

原创 微信小程序配置

1.进入微信小程序公众平台，进入后注册域名。

原创 vue3框架+element-plus

可视化安装

原创 vue单页面 与多页面的区别

只要用框架基本上都是单页面工程。

原创 搭建一个vue3+vite框架

可以使用以下两种搭建方式可以使用以下两种搭建方式。

原创 pinia

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的。来共享一个全局状态。对于单页应用来说确实可以，但如果应用在服务器端渲染，这可能会使你的应用暴露出一些。

原创 高德地图矢量图形点击事件生成

对地图进行渲染， 如果点击后只显示一个矢量图形，可以加上限制判断，不需要的不用加。必须添加中心点，需要根据中心点进行渲染。通过改变点的位置，对矢量图形重新绘画并重新获取各个点的位置进行渲染。通过计算给四周的点进行标记，可以直接使用该算法。生成矢量图形如上，代码如下。

原创 高德地图自定义点标记

由于自定义图标可能会发生偏移，我这里对原文档的样式进行了调整，原文档的文字写在 var markerContent = '' 这样会造成位置偏移，解决起来更加复杂，我对其进行调整为'摄像机，防止了位置偏移。并对 样式进行了调整。自定义点标记内容-点标记-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)

原创 Invalid Object: LngLat(NaN, NaN)高德地图报错

解决方法：地图初始化之后，先进行数据渲染，再进行位置标记。原因二：地图渲染比数据渲染快，数据没有跟上导致报错。

原创 高德地图绘图，点标记，并计算中心点

【代码】高德地图绘图，点标记，并计算中心点。

原创 整体字符串转数组，数组转字符串

数组转字符串JSON.stringify。字符串转数组 JSON.parse。