- 博客(59)
- 收藏
- 关注
RSS订阅原创 openlayers绘制圆的半径线条
之前不晓得咋算圆的面积，就是圆的一个点，无意中看见一个大佬的文章，顿时有了思路。核心代码就上面那些，我这边用暂时还没什么问题。
2024-07-12 13:17:33
153
原创 openlayers更改点坐标
我现在的需求是无人机点位根据ws传输的经纬度改变位置，在网上查了很多资料，终于是做出来了，如果有问题请指出。效果图，无人机可以来回移动。
2024-07-09 10:13:06
106
原创 element plus 日期组件中英文切换
现在的项目需要做中英文切换功能，我发现element plus 只有日期组件不能转换，然后上网查了一下并结合自己的方法写了出来。//这是关键代码，我是将中英文切换字段存储在本地。
2024-07-01 15:27:02
483
原创 vue3引入cesium和olcs
唯一的区别是我是直接从包里引入的，大佬是将包里的文件拿出来用的。在vite.config.js中配置，参考这位大佬的笔记。写个案例，参考大佬的文章。//挂载到window上。在main.js配置。
2024-06-06 14:34:38
444
原创 openlayers绘制经纬网格，有添加或者移除功能
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
2024-05-21 14:15:14
401
原创 vue3使用el-radio-group获取表格数据无法选中问题
今天写项目发现使用el-radio-group无法获取表格中的数据，于是去官网查看了一下，发现写的没啥问题，就是。这样的写法，又在网上看了一些回答，发现是用。不过我用label可以选中数据。这样的写法，官网里说。
2024-05-14 10:19:06
210
原创 电脑关机显示应用程序无法正常启动（0Xc0000142）错误，taskist.exe应用程序错误
之前电脑每一次关机都显示应用程序无法正常启动（0Xc0000142）错误，试了很多种方法，差点要重装系统了，但是太麻烦，卸载了电脑上一个叫星速的软件，这个问题就好了，如果你电脑也有这个问题，看看有没有这个软件，可以卸载试试看。
2022-12-31 12:57:07
5205
2
原创 js解析excel文件，读取单元格中的值
首先需要引入js包，https://github.com/SheetJS/sheetjs这个是地址。将表格数据转化为json格式，这样就可以根据条件获取表格数据了。这个博主的，但是想要获取具体的一行数据，需要写。我这里就具体说一下读取单元格值的方法。画红框就是获取的数据。
2022-11-27 13:31:59
3395
原创 vue3使用vuex实现页面实时更新数据（setup）
我项目中使用ws获取数据，因为数据是不断更新的，vue页面只更新一次就不更新了，然后暂时只能想到vuex来保存更新状态，页面监听数据实现实时更新。(注意，这里我用的是定时器，另外不要在意这么多方法传这个数组，你也可以就一个方法里使用vuex，我这个就是测试写的）////asyncAddStoreCount是mutations中的方法，2是传递过去的数据。////console.log(value)//输出新修改的值。//使用计算属性动态拿到vuex的值。3.新建store文件夹。......
2022-07-23 18:05:41
11691
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
1377
3
原创 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
4710
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
6687
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
806
原创 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
3942
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
335
原创 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
1104
原创 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
489
原创 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
1425
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
1407
原创 elementui步骤条自定义点击跳转页面，返回步骤条保留信息
先看效果图如果没有点击下一步，步骤条将不可点击，点击下一步可返回上一步，步骤条也可以来回点击跳转页面，还可以转到其他页面，回来后步骤条依然没有改变，保留状态，这个是我自己想的方法，可能有一些不太对，但是我这边大致功能都能实现，如果有什么问题可以指出。代码这是我的目录结构，现实中根据你项目需求来91.vue(起名不规范，这是我专门的测试页面)步骤条单独是一个组件<template> <div class="main"> <el-button typ
2021-09-02 10:43:11
5203
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
1081
原创 学习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
221
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
447
原创 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
689
原创 el-tree子节点添加el-switch开关
一开始觉得在子节点添加开关是很难的事，主要是想复杂了，哎，走了好多弯路，一直想的是把子节点提取出来，然后给赋值，这样就可以在子节点显示出开关，然后被后端一语点醒，不用那么麻烦，他已经给了显示与否的值，只是我一直没想明白，想来真的是令人尴尬。效果图代码<template> <div> <el-tree :data="data" node-key="id" default-expand-all :expand-on
2021-08-16 11:09:42
710
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
1574
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
1974
原创 elementui表格根据传入的表格id，获取下标选中复选框
表格复选框有一个非常不好办的事情，就是关于回显了，因为框架要求是具体表格哪一行才能回显数据，于是当传入的数据不在表格内，在另一个数组中时，就要判断id上方相等，获取下标传入表格内才能回显。<template> <div> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @se
2021-07-29 14:46:46
1922
原创 elementui表格从接口获取数据渲染表头与内容
业务需要，表格内容不固定，都从后端获取数据，平常做表格都是名称是固定的，表格名称绑定就出来了，看了官方文档，又上网搜了一下，与后端也改了几次表格格式，终于搞出来了，当然啦，这也借鉴了别人的代码思路，只不过我又结合了自己的数据做了一下改动，下面是代码。<template> <div class="index"> <el-row :gutter="15"> <el-col :span="24"> <el-table
2021-07-20 15:52:43
2445
原创 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
3733
原创 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
1585
原创 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
1589
3
原创 echarts弹框返回对象之外的数据
说一下项目需求，就是当我点击echarts图时，根据图标题名称查询数据，调取接口，然后将接口数据展示出来。由于我的项目有点复杂，就写一个例子来简单的表示一下。效果图：弹出的内容是加进去的 // 基于准备好的dom，初始化echarts实例 const myChart = echarts.init(document.getElementById("newEcharts")); // 绘制图表 const option = { title: {
2021-06-02 16:18:13
215
原创 elementui表格一行数据从接口获取字体颜色并渲染到页面
标题有点废，不过大致意思就是后端返给我数据，并给我rgba颜色，由于每一行数据字体颜色不一样，所以渲染到页面的数据字体颜色也是不一样的，一开始还是有点小懵逼的，然后找到解决方法，发现很简单。如图所示，这是效果图。 <el-table :data="tableData" border fit highlight-current-row style="width: 100%"
2021-05-27 15:12:33
458
原创 el-cascader动态懒加载子项，三级联动省市效果
先看效果，点击北京出现市区，点击市区出现详细地区，我这个人比较懒惰，详细地区就复制粘贴修改一下了。贴代码，一开始借鉴另一位博主的代码，但是一直有报错resolve is not a function，就很苦恼，效果可以实现，又看了官方网站，自己修修改改，这样子差不多就实现了。<template> <div class="main"> <el-cascader :props="props"></el-cascader> </div&g
2021-05-07 17:50:09
798
原创 vue实现一个页面几个数据,点击按钮只显示特定的数据
效果图是这样，点击信息1，出现数字1，点击信息2，出现2，依次下去，都可以显示出来。如果一个页面有多个需要显示隐藏的数据，那么这个方法可以很好的实现出来。上代码，框架我使用的是elementui，点击触发事件，获取value值<el-select v-model="region" @change="dd" placeholder="请选择活动区域"> <el-option v-for="(it,inn) in its" :key="inn" :label="it.l
2021-04-15 21:01:43
3128
原创 接口数据使用v-model回显在input输入框中，当改变数据时，接口数据也跟着更新
以下是我的测试数据。index.vue页面 <tr v-if="tableData"> <td colspan="1" width="10%" class="mans" rowspan="6"> 人口数据（万人） </td> <td colspan="4" width="40%" class="man">常
2021-04-04 13:58:42
1652
原创 不规则表格（实现表格跨半行）
最近做项目时，遇到需要做表格的情况，由于表格比较多，需要用colspan， rowspan一点点扣，我就记录一下。这是最终效果图接下来说明一个思路，在第一行就规定td的colspan = “10” width = “100%”，这样在接下来的行数中就可以分配行数了。每一个tr里面的分配colspan总数都要是10，结合你需要的表格具体行数来定。只要掌握方法就可以随心所欲的制作你需要的表格了，我的比较丑，只是提供一下方法。<table class="table" border="1" c
2021-03-20 17:35:27
438
原创 vue使用axios获取本地json数据
1.新建vue项目，在终端安装axios axios官网` npm install --save axios vue-axios2.在main.js导入下列代码import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)3.创建你的本地json数据（注意，json文件一定要创建在public文件夹中）4.在需要数据的页面引入axios`5.异步加载数据（链接是你打开vue页面的链接
2021-03-05 13:01:41
5331
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人