- 博客(65)
- 收藏
- 关注
RSS订阅原创 vue3大屏适配
最近写大屏，发现适配真的好难统一，不是这有问题就是那有问题，要不然页面拉伸的就变形了，在网上找到了一个好用的插件，暂时用起来没问题，如果后续有问题或者大家有什么好的想法可以在评论区说一下。
2025-03-31 17:10:32
133
原创 在 OpenLayers 中，绘制一条线new LineString ，线上根据长度像尺子一样展示点，即每隔一段距离显示一个标记来代表距离
第一个是简易版，复杂版运用到我项目中了，我这边只贴个简易版的代码，目前在我项目中运用还没问题，如果有什么错误可以指出。// 创建 LineString 的 VectorSource 和 VectorLayer。// 创建标记点的 VectorSource 和 VectorLayer。// 创建 LineString 的副本并进行投影转换。// 创建 LineString 的 Feature。// 创建 LineString 对象。// 创建标记点的 Feature。// 计算每 1 千米的标记点。
2025-03-13 14:53:50
403
原创 cesium在高德影像地图上叠加高德路网地图
直接上代码，有一部分是ai写的，结果ai写的不太准确，我又补了一部分，代码很简单，反正效果实现了，如果代码有什么问题请留言。// 初始化 Cesium Viewer。// 引入 Cesium 样式。// 添加高德路网图。
2025-02-19 14:28:57
308
原创 vue3加vite多环境配置
打包命令：pnpm run build:dev，打包开发环境的代码，具体看你自己的命名。启动命令：pnpm run dev ，启动开发环境的代码。注意，变量名必须以VITE_开头，这是Vite默认的前缀。.env.development是开发环境。3.package.json中配置启动脚本。.env.production是生产环境。4.在 vite 中使用环境变量。我自己的项目两个环境就足够了。1.在根目录下新建两个文件。其次在打印看一下环境。在浏览器可以打印出来。
2024-11-27 09:27:30
415
原创 vue3中openlayers绘制多个Overlay
项目需求是要在地图上显示多个div，之前使用Overlay绘制单个显示正常，结果绘制多个的时候就显示一个，不过也解决了，下面我就把核心代码贴一下，如果有什么问题可以留言，我就是提供一个思路。上面图片的信号塔是动态显示的，一般可以使用动态图片，但是我觉得动态图片达不到我想要的效果，所以改成了svg加css做出的动态效果图。忽略我命名的不规范，这只是我模拟的假数据。/* 在中间状态下居中显示 *//* 从左侧开始隐藏 */
2024-09-05 09:54:15
510
原创 vue3中Cesium离线地图
最近的需求需要在vue3发布Cesium离线地图，之前openlayers我是在本地开启http server发布的地址可以使用，但是Cesium会报跨域错误，在网上查了一下，后用的是nginx代理，下面我记录一下自己的方法。4.使用nginx代理。2.联网与否加载地图。
2024-07-31 09:35:45
852
原创 openlayers绘制圆的半径线条
之前不晓得咋算圆的面积，就是圆的一个点，无意中看见一个大佬的文章，顿时有了思路。核心代码就上面那些，我这边用暂时还没什么问题。
2024-07-12 13:17:33
393
原创 openlayers更改点坐标
我现在的需求是无人机点位根据ws传输的经纬度改变位置，在网上查了很多资料，终于是做出来了，如果有问题请指出。效果图，无人机可以来回移动。
2024-07-09 10:13:06
328
原创 element plus 日期组件中英文切换
现在的项目需要做中英文切换功能，我发现element plus 只有日期组件不能转换，然后上网查了一下并结合自己的方法写了出来。//这是关键代码，我是将中英文切换字段存储在本地。
2024-07-01 15:27:02
658
原创 vue3引入cesium和olcs
唯一的区别是我是直接从包里引入的，大佬是将包里的文件拿出来用的。在vite.config.js中配置，参考这位大佬的笔记。写个案例，参考大佬的文章。//挂载到window上。在main.js配置。
2024-06-06 14:34:38
602
原创 openlayers绘制经纬网格，有添加或者移除功能
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
2024-05-21 14:15:14
677
原创 vue3使用el-radio-group获取表格数据无法选中问题
今天写项目发现使用el-radio-group无法获取表格中的数据，于是去官网查看了一下，发现写的没啥问题，就是。这样的写法，又在网上看了一些回答，发现是用。不过我用label可以选中数据。这样的写法，官网里说。
2024-05-14 10:19:06
418
原创 电脑关机显示应用程序无法正常启动（0Xc0000142）错误，taskist.exe应用程序错误
之前电脑每一次关机都显示应用程序无法正常启动（0Xc0000142）错误，试了很多种方法，差点要重装系统了，但是太麻烦，卸载了电脑上一个叫星速的软件，这个问题就好了，如果你电脑也有这个问题，看看有没有这个软件，可以卸载试试看。
2022-12-31 12:57:07
6265
3
原创 js解析excel文件，读取单元格中的值
首先需要引入js包，https://github.com/SheetJS/sheetjs这个是地址。将表格数据转化为json格式，这样就可以根据条件获取表格数据了。这个博主的，但是想要获取具体的一行数据，需要写。我这里就具体说一下读取单元格值的方法。画红框就是获取的数据。
2022-11-27 13:31:59
3688
原创 vue3使用vuex实现页面实时更新数据（setup）
我项目中使用ws获取数据，因为数据是不断更新的，vue页面只更新一次就不更新了，然后暂时只能想到vuex来保存更新状态，页面监听数据实现实时更新。(注意，这里我用的是定时器，另外不要在意这么多方法传这个数组，你也可以就一个方法里使用vuex，我这个就是测试写的）////asyncAddStoreCount是mutations中的方法，2是传递过去的数据。////console.log(value)//输出新修改的值。//使用计算属性动态拿到vuex的值。3.新建store文件夹。......
2022-07-23 18:05:41
12787
1
原创 vue项目打包成桌面快捷方式（electron）
网上有很多相关的例子了，所以我只是把自己的问题记录一下。1.把electron的官方例子clone下来2.进入项目，输入以下命令，运行项目3.弹出界面4.接下来将自己的vue项目打包，运行npm run build5.将打包的项目复制到electron-quick-start的根目录6.重新运行一下如果页面能打开，则说明没问题。如果页面打不开，点击view底下的Toggle Developer Tools,然后点击f12，打开调试工具查看问题。错误1解决1因为我是vue3加vi
2022-06-06 13:23:46
1514
4
原创 vue3加vite安装路由并跳转页面
最近使用了vue3中的路由器，记录一下。1.首先安装路由，我使用的是pnpm，也可以使用npm安装pnpm i vue-router@4或者npm i vue-router@42.新建页面a.vue<script setup> import { ref } from "vue";</script><template>a</template><style scoped></style>3.在页面创建r
2022-05-10 21:42:08
5107
2
原创 vue3在外部js文件调用vue内的方法
需求就是我在vue项目里有一个a.js文件，我想在a.js文件里调用b.vue里的test方法。直接上代码a.jsexport default { hotmockobjId: function () { //逻辑代码 ....... //调用b.vue的方法名 test() }}b.vueimport {defineComponent, onMounted} from 'vue'//引入方法 setup() { onMounted(() => {
2022-03-31 13:28:03
7278
3
原创 echarts关系图，点击上一步下一步按钮可改变关系图颜色
效果如图片所显示，点击下一步按钮，橙色会移到下一个图上，上一步就是移到上一个图，就是还有一个问题，点击下一步之后如何将上一个图高亮显示，这个正在思考中。技术栈：vue3 echarts ant-design-vue完整代码：<template> <div v-show="DetermineShow" class="header"> <div v-show="isshow" class="mask"> <h1 class="mask.
2022-03-07 15:53:52
860
原创 react嵌套路由(新V6.0.2)
最近看了一下react路由，发现网上的视频都是老版的，新版本的路由变化还是蛮大的，我就将我这次遇到的路由嵌套举个例子。1：项目目录2：创建router.js代码import React, { Component } from "react";//引入路由import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';//引入组件import Home from "./pages/Home";i
2021-11-11 14:49:22
4042
6
原创 react组件传值（属性props)
最近开始学习react，然后记录一下觉得不错的方法，以便我随时回来复习。首先需要新建两个页面Data.js代码import React from 'react'import Child from './Child'//引入组件class Datamount extends React.Component { render() { return ( <> <div>Datamount</div&
2021-11-05 14:18:38
379
原创 EarthSDK中点击地图，跟随鼠标出现经纬度弹框（vue）
效果图当我点击地图时，鼠标点击的上方出现这个弹框代码<template> <div> <div style="width: 95%; height: 95%; position: relative; overflow: hidden"> <!-- 点击效果 --> <div> <div ref="earthContainer" @click="
2021-10-21 10:24:46
1208
原创 vue封装本地存储模块
首先在项目中新建utils文件夹，再创建storage.js文件，这个文件就是封装本地存储的页面storage.js// 本地存储模块// 获取export const getItem=(name,value)=>{ // 未经处理的请求数据 const data=window.localStorage.getItem(name) try { // 将data转为js对象 return JSON.parse(data) } cat
2021-10-14 11:52:40
544
原创 OpenLayers工具栏（vue中使用）
效果如下这只是一小部分效果图片，因为动态图片超出大小，只能放静态图片。完整代码部分<template> <!-- 绘制、编辑、输出GeoJson数据 --> <div ref="map" id="map"> <div class="btns"> <button @click="drawFeature">绘制</button> <button @click="editorFeatu
2021-10-09 09:53:43
1561
1
原创 学习vue加OpenLayers（4）地图全局视图（鹰眼图）控件
效果图当地图移动时，鹰眼图也跟着移动，并可以拖动鹰眼图，地图也随之移动。直接上代码<template> <div class="hello"> <div id="map" class="map"></div> </div></template><script>import "ol/ol.css";import OSM from "ol/source/OSM";// 对于在网格中提供预渲染的
2021-09-13 14:21:22
1500
原创 elementui步骤条自定义点击跳转页面，返回步骤条保留信息
先看效果图如果没有点击下一步，步骤条将不可点击，点击下一步可返回上一步，步骤条也可以来回点击跳转页面，还可以转到其他页面，回来后步骤条依然没有改变，保留状态，这个是我自己想的方法，可能有一些不太对，但是我这边大致功能都能实现，如果有什么问题可以指出。代码这是我的目录结构，现实中根据你项目需求来91.vue(起名不规范，这是我专门的测试页面)步骤条单独是一个组件<template> <div class="main"> <el-button typ
2021-09-02 10:43:11
5482
1
原创 学习vue加OpenLayers（3）动画 GIF
不知道为什么官网的案例一直说没有gifler()方法，所以我又去网上查了查，发现openlayers官方API上是不支持gif的，openlayer 里面支持 gif 图标上图的只有 overlay类。案例 gjf图片定位在地图的一些点上，这个我也是参照了另一位博主的博客加上官网写的，附上链接博客代码<template> <div id="content"> <div id="map" class="map" ref="map"></div>
2021-08-26 13:48:34
1194
原创 学习vue加OpenLayers（2）高级视图定位
案例依旧是官网的效果图代码<template> <div class="hello"> <div class="mapcontainer"> <div id="map" class="map"></div> <div class="padding-top"></div> <div class="padding-left"></div>
2021-08-25 17:08:45
275
1
原创 学习vue加OpenLayers（1）
因为我是从现在开始学习这个ol，所以案例是从官网上找的，openlayers官网只不过我用vue重新写一遍，下面开始。效果图1.创建好的vue项目，执行npm i ol --save命令2.写一个div地图容器 <div id="map" class="map" tabindex="0"></div> <button id="zoom-out" @click="zoomout">Zoom out</button> <butto
2021-08-25 14:29:08
518
原创 Element UI垂直导航栏变成按钮样式，点击效果不改变
有时候页面点击按钮效果会失效，这样用户体验不太好，所以我看了一下官网，发现导航栏点击事件不失效，这样的话，用户在同页面点击其他的按钮，样式也不会更改。效果图代码<template> <div id="app"> <el-row class="tac"> <el-col :span="4"> <el-menu default-active="选中" class="el
2021-08-17 16:05:55
758
原创 el-tree子节点添加el-switch开关
一开始觉得在子节点添加开关是很难的事，主要是想复杂了，哎，走了好多弯路，一直想的是把子节点提取出来，然后给赋值，这样就可以在子节点显示出开关，然后被后端一语点醒，不用那么麻烦，他已经给了显示与否的值，只是我一直没想明白，想来真的是令人尴尬。效果图代码<template> <div> <el-tree :data="data" node-key="id" default-expand-all :expand-on
2021-08-16 11:09:42
786
2
原创 elementui表格复选框选中，下拉框出现选中的数据
效果图复选框选中数据，点击添加按钮，弹框出现的下拉框有选中的数据。完整代码<template> <div> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @select="selectionRow" > <el-table-colum
2021-08-10 15:29:44
1655
1
原创 vue加element实现下拉框点击一行数据，文本框显示并嵌套数据
先看效果图下拉框点击显示在文本框中每点击下拉框，文本框都将数据嵌套进去监测运算符是否已存在，如果存在则不显示运算符并提醒代码<template> <div> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm"
2021-08-02 10:52:29
2077
原创 elementui表格根据传入的表格id，获取下标选中复选框
表格复选框有一个非常不好办的事情，就是关于回显了，因为框架要求是具体表格哪一行才能回显数据，于是当传入的数据不在表格内，在另一个数组中时，就要判断id上方相等，获取下标传入表格内才能回显。<template> <div> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @se
2021-07-29 14:46:46
1998
原创 elementui表格从接口获取数据渲染表头与内容
业务需要，表格内容不固定，都从后端获取数据，平常做表格都是名称是固定的，表格名称绑定就出来了，看了官方文档，又上网搜了一下，与后端也改了几次表格格式，终于搞出来了，当然啦，这也借鉴了别人的代码思路，只不过我又结合了自己的数据做了一下改动，下面是代码。<template> <div class="index"> <el-row :gutter="15"> <el-col :span="24"> <el-table
2021-07-20 15:52:43
2525
原创 el-select切换选项时提示是否继续，点击取消值不变，确定值改变
项目需要下拉框做判断，但是一开始做的时候发现点击下拉框事件时值已经改变了，就算点否也不能阻止值的改变，只能监听v-model的值来进行判断赋值。下面是效果图取消时值不变确定时值变代码有所删减，不过下拉框功能齐全<template> <div> <el-select @change="analysischange" v-model="analysiss"> <el-option v-for="item i
2021-07-14 10:15:01
4768
原创 vue通过文件流预览pdf文件，并导出pdf文件
首先下载vue-pdfnpm install vue-pdf -D然后直接看代码吧完整代码如下<template> <div> <el-button class="grid-button" type="success" plain size="small" @click="exportdata" >导出</
2021-06-28 13:18:53
1659
原创 el-steps不跳转路由切换页面
先看效果图第一页第二页因为这是我测试制作的网页，所以不标准也不规范，我只是把大概流程写一下。<template> <div> <el-steps :active="active" finish-status="success"> <el-step title="步骤 1"></el-step> <el-step title="步骤 2"></el-step></el-steps>
2021-06-21 11:25:10
1696
3
原创 echarts弹框返回对象之外的数据
说一下项目需求，就是当我点击echarts图时，根据图标题名称查询数据，调取接口，然后将接口数据展示出来。由于我的项目有点复杂，就写一个例子来简单的表示一下。效果图：弹出的内容是加进去的 // 基于准备好的dom，初始化echarts实例 const myChart = echarts.init(document.getElementById("newEcharts")); // 绘制图表 const option = { title: {
2021-06-02 16:18:13
273
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人