管理员--0728-CSDN博客

原创 openlayers绘制箭头线

老规矩，先上效果图（只需看黄色箭头样式就行）实现方法也很简单，具体如下：// line就是线条两边的坐标const lineArrow = [ { name: '浙奉渔19001', type: 1, line: [[13739180.61760428, 3867806.8497407753], [13753601.705080839, 3864763.0546381413]] }, {

2022-02-17 16:03:48 3358 14

效果图此处用到了openlayers的webgl属性 import GeoJSON from 'ol/format/GeoJSON'; //用来加载矢量数据 import WebGLPointsLayer from 'ol/layer/WebGLPoints'; //使用webgl渲染初始化矢量图层，从文件加载点的地理信息 this.vectorSource = new Vector({ url: 'http://localhost:9528/data.ge

2021-05-27 11:26:58 6028 15

原创 openlayers之轨迹回放（附加暂停、继续播放功能）

效果图老规矩，直接上代码，已经把该备注的都备注好了（可直接复制查看） <div id="map"></div> <label for="speed"> speed:  <input id="speed" type="range" min="10" max="999" step="10" value="60"> </label> <button id="start-animation">S

2021-04-08 18:15:42 5045 30

原创 openlayers实现点聚合，并添加点击事件（点击显示弹窗）

新手第一次用openlayers，看了下官网，对新手很不友好，看着官网的例子整了半天才出来，直接上代码<div id="map"></div><div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-title" class="popup-title"&gt.

2021-04-07 18:57:43 7172 10

原创 webpack 打包时排除某些依赖模块

防止将某些 import 的包打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖例如，从 CDN 引入 jQuery，而不是把它打包：//index.html<script src="https://code.jquery.com/jquery-3.1.0.js"></script>//vue.config.jsconfigureWebpack: { name: name, resolve: { alia.

2021-04-01 14:31:10 2056

原创 el-date-picker添加日期约束（年月日时分秒）

此方法不是禁用不满足条件的日期，而是以提示的方式添加约束<el-form-item label="开始日期" prop="startDate"> <el-date-picker v-model="sizeForm.startDate" :clearable='false' type="datetime" @change='changeStartT.

2021-03-29 10:51:19 3144 2

原创 echarts标题（title）设置背景图片

效果图核心代码此处用到了rich属性title: { x: 'center', text: '{A| ' + that.title + '}', //使用A方案的样式 textStyle: { rich: { A: { //设置背景图片，可以设置width和height，不设置时宽高自适应 backgroundColor: { image: require('../../assets/image

2021-03-25 15:08:25 5825

原创 echarts5.0新特性

样式属性的变化去除 default exports 的支持 //echarts5.0之前的引入方式 import echarts from 'echarts' //echarts5.0的引入方式 import * as echarts from 'echarts'新加了按需引入 import * as echarts from 'echarts/core'; import { BarChart } from 'echarts/charts'; import { GridCom

2021-03-23 11:54:43 4340

原创 vue引入websocket

process.env.VUE_APP_WS_URL是vue3中开发环境中的websocket地址核心代码data() { return { // 重试定时器 wsIn: null, // websocket ws: null, id: null };},mounted() { this.webSockectInitMessage( process.env.VUE_APP_WS_URL + '/websocket/' + this.id.

2021-03-22 18:32:04 796

原创多选框checkbox控制高德地图轨迹展示

效果图点击表格某一行获取checkbox列表，通过选中多选框来展示选中的轨迹先准备json数据，要包含name、轨迹线的颜色、check选中的数字（也就是id）核心代码drawLine() { let that = this; //获取选中的多选框id console.log(that.checkList); let lineColor = null; //绘制轨迹前先清除上一次的轨迹 if (this.pathSi

2021-03-22 18:10:55 332 6

原创 vue二进制数据流导出excel

点击按钮，导出Excel，接口返回的是数据流，axios 利用blob导出后端返回二进制流excel文件打开axios官网，在请求配置这里可以看到‘responseType’这个属性//api.js//设置responseType为‘blob’export function download (data) { return request({ url: '/***/***/download', method: 'post', data:.

2021-03-08 19:12:27 1107

原创 elementUI的步骤条+折叠面板

效果图要求：折叠面板跟随步骤打开，到哪一步，打开哪一步的折叠面板完整代码（因为步骤比较简单，就不做注释了，有问题可以留言）<template> <div class="app-container"> <div> <el-steps direction="vertical" finish-status="success" :active="Number(active

2021-02-18 12:03:13 2383 2

原创高德地图删除点聚合

先来看效果图点击绘制清除地图上的所有聚合，开始绘制轨迹路线，点击销毁清除地图上的轨迹路线，展示聚合,快进快推、开始暂停、回到起点直达终点是轨迹展示的功能组件，主要用于控制巡航器，有需要可以看一下初始化聚合方法initCluster() { //points就是要展示的一组经纬度 for (var i = 0; i < this.points.length; i += 1) { this.markers.push( new AMap.

2021-02-04 18:44:26 4316 12

原创高德地图轨迹巡航，带进度条

全部代码，复制后可直接使用（先下载elementUI，然后引入高德地图）<template> <div class="dashboard"> <div id="map" :style="'height:'+mapHeight+'px'"></div> <div class="operation"> <el-card class="box-card"> <di.

2021-02-02 18:36:17 2182 7

原创 Excel点击两次才能打开

问题描述：Excel2016点击第一次打开是空白页面，再次点击Excel文件时才显示内容解决办法：win+R后输入regedit，在HKEY_CURRENT_USER\Software\Microsoft\Office\16.0\ ，找到Excel子项，将其进行重命名，完成后在控制面板-卸载程序中右键Office，选择更改-联机修复亲测有效！！！...

2021-01-29 16:25:32 854

原创 echarts图表（大屏可视化）文字大小自适应

做可视化的时候，相信大家都遇到过图表大小可以自适应，但是图表里面文字大小不能自适应的问题，之前也在网上找过文字自适应的方法，但是都是先改变窗口大小，然后刷新页面，文字大小才能跟随变化，于是就有了这篇文章（虽然方法有点笨！）先看效果图1920 * 1080分辨率1320 * 800分辨率880 * 500分辨率先引入font.jsexport function fontSize (res) { let docEl = document.documentElement, .

2021-01-22 10:34:24 4648 20

原创 echarts3d地图缩放和拖拽时会先重置地图再缩放的问题(以及tootip工具栏点击问题)

2020年12月2号echarts发布5.0版本，在vue项目中直接执行npm install echarts --save的话是直接下载的5.0 版本，新版本的有配置项和一些方法有所改动，直接使用的话可能会遇到各种问题，我这几天给3d地图添加缩放拖拽事件，发现缩放和拖拽时，地图会先重置一遍然后才会缩放到指定大小，后经排查发现是版本问题console.log(this.$echarts) //首先先打印echarts版本，如果version是5.0.0请继续往下看，如果不是那么这篇文章就不一定能帮助到.

2021-01-11 16:39:59 1570 6

原创 echarts5.0

先来占个坑，后续会写一些5.0的文章echarts5.0: 传送门

2021-01-11 15:12:53 2743

原创高德3d轨迹展示

3d视图不支持轨迹展示！！！但是我还是试了一下，添加俯视角度之后轨迹展示不出来，将下面代码直接复制到高德的示例里面点击开始巡航可以直接看效果传送门<!doctype html><html lang="zh-CN"><head> <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/misc/PathSimplifier/examples/naviga

2020-12-25 11:30:40 1030 2

原创高德地图之marker点击事件（给每个marker添加点击事件）

首先创建聚合,然后给聚合的每个marker添加点击事件效果图从接口获取数据创建聚合//创建聚合addMarker(positionData) { let map = this.getMap //获取地图 if (positionData.length) { this.markerList = [] //清空marker } for (let i = 0; i < positionData.length; i++) { if (posi

2020-12-16 16:28:31 18932 6

原创 vue封装全局loading

首先创建一个loading文件<template> <div> <div v-loading.fullscreen.lock="loadingAll" element-loading-background="rgba(0, 0, 0, 0.6)"> </div> </div></template><script>export default { comput.

2020-12-09 17:50:18 906

原创移动端手指滑动，高度跟随手指滑动位置而改变

效果：列表刚开始显示高度为200，手指滑动，列表高度随手指位置改变，列表最高高度为500实现这个功能之前先说一下手指触摸事件//手指按下触发touchstart(event) { var touch = event.touches[0]; this.startY = touch.pageY; this.startX = touch.pageX; event.stopPropagation(); },//手指移动触发touchmove(event) {

2020-12-01 09:55:39 1416

原创 Layuimini关闭当前tab页面的方法

有个功能需要修改完资料后关闭当前页面首先引入miniTab然后修改完后直接调用经测试可以关闭当前页面，就是这么简单各位客官要是感觉有用的话能留个小心心嘛,谢谢啦！！！^ v ^

2020-10-27 16:23:23 1786 3

原创 canvas绘制不规则图形，点击获取当前图形索引

canvas绘制不规则图形，并给每个图形添加点击事件有这么一个需求，把传过来的四个坐标，连成一个图形（可能是规则的，也可能是不规则的），点击某个图形，显示当前这个图形的信息//数据格式dataList: { lonLatList: null seatId: 1 //图形id state: 0 //状态 vehicleNo: null //车牌号 xyList: [ //根据经纬度转换的xy坐标 [58, 511], [81, 503], [23,

2020-10-26 17:33:02 1768

原创 layuiDate添加日期约束

layuiDate开始时间和结束时间拆分在原有的基础上加上了时分秒的选择这是官网上的样子这个是改过之后的样子使用方法：链接: https://pan.baidu.com/s/1-TFy7MkEBB4ni3GmEBuEpg 提取码: 3usi 点击此处layuiDate.js下载各位客官要是感觉有用的话能留个小心心嘛,谢谢啦！！！^ v ^...

2020-09-27 10:33:54 189

原创 elementUI 地址回显(默认地址)

elementUI cascader地址回显（默认展示地址）效果图引入elementUI地区组件（element-china-area-data）npm install element-china-area-data -SprovinceAndCityData是省市二级联动数据（不带“全部”选项）regionData是省市区三级联动数据（不带“全部”选项）provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）regionDataPlus是省市区三级联动数据

2020-08-06 16:40:48 1872

原创 vue H5支付（支付宝篇）

IOS无法打开支付页面问题h5支付一般是后台写好接口，提交订单，后台返回一个支付宝form表单，表单格式如下：解决IOS不能跳转支付页面问题h5支付一般是后台写好接口，提交订单，后台返回一个支付宝form表单，表单格式如下：提交订单页面（home.vue） this.payUrl = res.data.data.payUrl //form表单 console.log(this.payUrl) // <form id='alipaysubmit' name='al

2020-07-27 13:16:10 2376 3

原创 vant地址列表回显（设置默认省市区地址）

vant area地址回显（默认展示地址）根据省市区Id（provinceId,cityId,countyId）获取省市区name最终效果图根据省市区Id（provinceId,cityId,countyId）获取省市区name// 首先设置addressInfo参数 data () { return { addressInfo:{ name: '雨季', //姓名 tel: '120', //电话

2020-07-24 17:25:54 6567 6

原创 echarts省市地区Js及json下载

链接：https://pan.baidu.com/s/1j5vDTBe4xiC2oOzdVsorTQ 提取码：xote欢迎交流echarts相关知识有什么问题加QQ:1960883022 请注明来意

2020-03-17 17:33:36 2008 7

我灰灰凭啥输