- 博客(53)
- 收藏
- 关注
RSS订阅原创 vue3中使用svg图标
本文介绍了在Vite+Vue3项目中集成SVG图标的完整流程。首先安装vite-plugin-svg-icons插件，在assets目录下存放SVG文件。然后在vite.config.ts中配置插件，指定图标目录和命名规则。接着创建SvgIcon组件，支持自定义尺寸、颜色等属性。通过全局组件注册使SvgIcon可在全项目使用，需在main.ts中引入virtual:svg-icons-register。最后在页面中通过<SvgIcon name="图标名">即可使用SVG图标
2025-07-25 14:57:16
813
原创 openLayers切换基于高德、天地图切换矢量、影像、地形图层
摘要：本文介绍了基于OpenLayers的地图交互功能实现，主要包括地图初始化和图层切换功能。地图部分支持加载天地图XYZ/WMTS和高德地图两种瓦片服务，通过Vue组件实现三种底图（矢量、影像、地形）的切换交互。代码展示了使用ol/layer/Vector管理图层，通过鼠标悬停触发面板展开，点击切换不同地图类型，并保持图层状态同步。组件采用响应式设计，包含过渡动画效果，底部固定定位的UI布局，为地图应用提供了灵活便捷的底图切换方案。 （149字）
2025-06-19 11:14:37
732
原创 openLayers添加天地图WMTS、XYZ瓦片服务图层、高德地图XYZ瓦片服务图层
本文介绍了基于OpenLayers的地图交互功能实现，主要包括以下内容： 地图初始化：支持天地图XYZ/WMTS瓦片服务和高德地图两种底图加载方式，可通过配置参数控制不同图层的显示。 交互功能： 标记点添加：支持动态创建可拖拽的标记点 折线绘制：提供平滑曲线功能，使用chaikin-smooth算法优化线条效果 轨迹模拟：实现路径动画效果，可设置航向角和轨迹线 知识图谱式交互：由静态线条和可拖拽点构成 实现细节： 使用ol/layer/Vector管理矢量图层 通过ol/interaction/Transl
2025-06-19 09:59:47
938
原创 Cesium使用glb模型、图片标记来实现实时轨迹
本文介绍了在Vue项目中使用Cesium实现两种实时轨迹显示的方法：1. 通过GLB模型展示轨迹，利用computeHeading函数计算模型朝向，实现3D模型的动态移动和转向；2. 使用图片标记显示轨迹，通过计算两点间角度调整图片旋转方向。两种方法均基于预定义的经纬度坐标数组，采用定时器逐点推进，并同步绘制贴地轨迹线。代码示例包含添加初始实体、更新位置朝向、清除定时器等完整实现逻辑，适用于Cesium三维地球的轨迹可视化开发。
2025-06-06 16:07:55
699
原创 Cesium添加图片标记点、glb模型
本文介绍了在Vue项目中加载Cesium三维地图后，如何实现两项功能扩展：1)通过BillboardGraphics添加图片标记点，需将图片置于public目录并设置坐标、尺寸等参数；2)加载glb格式3D模型，支持设置模型位置、朝向、缩放比例等属性，并可自动定位到模型位置。文章提供了具体代码实现方法，包括图片标记点添加函数和3D模型加载函数，涉及坐标转换、朝向调整等关键技术点。
2025-06-06 15:40:19
435
原创 Cesium添加点线面
能扩展的方法。主要内容包括：1) 使用Entity API添加点线面元素（如北京、上海的标记点，城市间连线，半透明多边形等）；2) 通过Primitive API实现更底层的地理元素绘制（包括点集合、折线、多边形）；3) 添加鼠标点击交互功能，可获取点击实体信息。文章通过代码示例详细展示了不同几何元素的创建方式，包括设置颜色、透明度、边框等样式属性，以及贴地显示等特性。这些功能扩展了基础的Cesium三维地球场景，为WebGIS开发提供了实用参考。
2025-06-06 15:29:24
611
原创 openlayers实现可拖拽的节点（类似知识图谱）
本文介绍了实现知识图谱可视化的技术方案，主要分为两个图层实现：1、线图层 - 负责绘制静态连接线，使用LineString创建线要素并添加到矢量图层；2、点图层 - 实现可拖拽的节点功能，通过Translate交互实现拖动，每个节点使用Point创建要素。两个图层通过坐标数据关联，线图层的坐标由点图层拖动时动态更新。代码展示了图层创建、要素添加和交互绑定的具体实现，使用OpenLayers库完成地图可视化功能。
2025-06-06 14:00:57
253
原创 openLayers实现实时轨迹
代码实现了一个基于定时器的轨迹动画效果。通过预定义的轨迹数据点，每2秒更新一次图标位置，并绘制红色半透明线段连接相邻点。首先在地图上创建图层并添加初始图标，然后使用定时器逐步更新图标坐标，计算航向角调整图标方向（与正北的夹角），同时在移动路径上生成线段特征对象。当遍历完所有轨迹点后自动清除定时器。该功能适用于可视化动态移动轨迹场景。
2025-06-06 13:52:32
369
原创 前端使用vue-simple-uploader进行分片上传
main.js初始化vue-simple-uploader。common/config文件。
2024-01-30 17:24:44
863
1
原创 JavaScript截取文件后缀名、路径存在多个点
提示: 如需删除数组的第一个元素，请使用shift方法。如果(" ")用作分隔符，则字符串在单词之间进行拆分。pop方法移除数组的最后一个元素，并返回该元素。split方法返回新数组，不会更改原始字符串。split方法将字符串拆分为子字符串数组。注释: pop方法会改变数组的长度。
2023-09-28 13:19:14
364
原创 一段文字里将固定文字进行修改
只需要关注getDictDataByDictType()这个方法里面的东西。xxx蓄滞洪区xxx,xxx水位达到xxx,触发xxx，请做好相关防范。2)在框中展示数据,内嵌input标签进行修改,修改前为xxx。只需要关注 getRadioRow()这个方法里面的东西。
2023-08-02 11:14:22
135
原创 ol点击切换矢量、影像、地形图层(天地图)
1、创建layer-control.vue文件。二、初始化地图，将组件引入至地图。一、创建影像、矢量、地形切换框。创建map.vue文件。
2023-07-10 16:04:08
878
原创 Vue2 动态修改浏览器标题和图标
第二步：在build文件下webpack.dev.conf.js、webpack.prod.conf.js的HtmlWebpackPlugin内加入favicon:path.resolve(‘favicon.ico’)代码。第二步：在build文件下webpack.dev.conf.js、webpack.prod.conf.js的HtmlWebpackPlugin内加入title:config.title代码。第三步：在index.html中修改title。操作完成后重启即可，一定要重启！
2023-06-07 17:21:47
1364
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人