Ra-Liz's Blog

思路下载地图瓦片⇒瓦片存项目中⇒leaflet接入地图，简单配置一下 参考文档：https://juejin.cn/post/7102330662425722894 如果觉得难操作可以看本文的详细操作步骤。 前言离线地图最好确定好缩放级别和地图的范围，不然瓦片数量会特别多，项目打包直接指数爆炸 前置信息：leaflet的缩放级别从1到18，越大越近。使用leaflet时候一定记得引入其.css文件，不然瓦片错位，这个不用担心，具体代码放在下面了。 leaflet文档: https://leafletjs.cn/reference.html 具体操作 下载瓦片 运行程序下载地址：https://github.com/muddyrain/vue-ol-map 全能地图下载器-MapTileDownloader.rar 选择地图 选择地理范围 选择地图级别 下载，不需要下一步的拼接环节 查看下载结果 瓦片存放 把/16/17/18这些文件夹给复制到项目/public/map里 接入leaflet：通过各种方式下载包到项目。记得引入.css文件。 12// ...

为什么想重新规范一下博客呢？最近业余时间经常会看周刊，机缘巧合下又捕获到了几个不错的文章站点。 一个站点是XboxYan大佬的纯CSS实现功能合集，另一个站点是范兄特别简明且优雅的个人博客。 跟着两位大佬写了不少小功能，而且看完范兄的2023年度总结文章心潮澎湃。 转眼看看自己的博客，营养价值极低，而且有的太啰嗦了（学生时代写的东西让现在的自己感到一头问号），所以打算把自己的博客翻修一下。 计划赶不上变化，从这里动态记录盖房子装修过程吧。 文章的分类和标签整理一下√ 没用的文章得删一下了

创建一个容器 12345678910111213141516const map = L.map("map", { center: [41.486904, 122.621087], // 中心lo&la zoom: 7.25, // 缩放级别 zoomControl: false, // 是否将zoom控件放入图中 minZoom: 7, maxZoom: 11, zoomSnap: 0.25, // 缩放级别倍数，默认接近整数，这里允许更大颗粒度 scrollWheelZoom: false, // can scroll everywhere smoothWheelZoom: true, // enable smooth zoom ?这个文档里没找到 smoothSensitivity: 0.4, // zoom speed. default is 1 同上 attributionControl: false ...

elementui el-upload实现图片列表展示、上传和删除halohalohalo好久不见 业务需求增加和修改内容中包含一个图片路径列表，需要对图片列表进行展示和操作（添加、预览、查看大图、下载、删除） 分析 弹出框中使用el-upload组件展示和操作图片列表，参考效果：https://element.eleme.io/#/zh-CN/component/upload#wen-jian-suo-lue-tu 关闭弹出框/点击取消时，需要将此次图片列表新增的图片删去，释放存储空间 相较于新增弹出框，修改弹出框需要事先展示从后端获取到的图片列表，因此需要两个el-upload标签来分类 接口需求 添加图片POST 删除图片DELETE 查询图片GET 其中，el-upload添加图片使用组件参数方式设置，查询亦是无需手动获取。删除需要手动。 1imgUrl: process.env.VUE_APP_BASE_API + "/system/deviceFault/uploadPhoto" 接下来分新增和修改两种来阐述代码构建过程 新增首先，这是一个图片列 ...

前言工作中遇到项目使用的node版本比较早，这个时候一般会选择两种方式解决： 直接安装一个指定版本的node，比较直接，但是不方便切换 使用nvm管理node版本，可以随时切换node版本，但是安装配置有可能出点问题 我就遇到了上图的问题，查了很多地方，没啥用，最后找到了这个方法👇 别跟我说要删干净node再下载nvm，install不成功需要配置镜像什么什么的。 直接下载node包，解压重命名，放nvm文件夹里，谢谢qvq 详细步骤 下载安装nvm，参考fcc给出的流程：https://www.freecodecamp.org/chinese/news/node-version-manager-nvm-install-guide/ 手动下载node包 https://nodejs.org/zh-cn/download/prebuilt-binaries 解压node包，重命名，放入nvm目录下 重命名：v+版本，见下图 注意检查一下解压是怎么解的，别目录套目录了 检查成没成功 成功了。 可以仿照这个思路试一试捏，如果有效，欢迎赞助我一瓶矿泉水qvq（或 ...

前言​ 本人ruoyi vue2模板搭建的管理项目中集成Cesium，踩了诸多坑。 ​ 各种查阅和看Demo，测试出来了可行的配置。特来分享，或许可以减少各位同伴踩到的坑（如果可以，麻烦在文章底部留个言，我想知道有多少朋友也在做这个工作）。 配置步骤 版本道传版本要≤1.95.0，这里参考https://github.com/syzdev/vue-cesium-start使用了1.80.0版本 添加一个loader: @open-wc/webpack-import-meta-loader vue.config.js配置 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081'use strict'const path = require('path')const webpack = ...

MyVisualMap实现思路（不包含完整代码）效果类似这种，实现方式想必非常多，接下来仅讲解我的思路，可做一种参考。 描述实现一个类echarts visualMap的工具bar，可以调整一个高度自定义的echarts图形的values和colors 分析实现一个带两种模式的多角标(网上普遍叫法是multiple handles)Slider。 模式一（渐变模式）是固定values，修改对应的colors，此时滑动条是一个渐变色块； 模式二（非渐变模式）是固定colors，修改对应的values，此时滑动条是一个多个色块组成的均匀条。 思路咱们慢慢来，手挫肯定是要画点时间的，喝口水慢慢来。 绘图 前置共识：values和colors一一对应，拖拽牵扯到的变动属性(top/height等)在绘图的时候需要考虑到，别框死了。 固定一个div作为盛放色块和角标的容器，灵活使用css-position-relative/absolute，对应给div两块子元素。 颜色块-colorRef 渐变模式时，可以直接给colorRef设置一个linear-gradient(to bottom, $ ...

elementui vue2版本如何给el-table/el-pagination等组件进行样式自定义el-table 现有组件描述 直见官网：https://element.eleme.io/#/zh-CN/component/table#table-column-scoped-slot 场景描述 背景透明 hover有点颜色（半透明） 代码： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950<template> <el-card> <el-table class="right-table"> <el-table-column>....</el-table-column> .... </el-table> </el-card></templa ...

写在前面最近在换工作，投了特别喜欢的一家公司，正在等意向（更新后续，目前成功入职了，十分感恩），等待时间是不能浪费的，所以我打算先熟悉一下公司的技术。echarts就是其中之一，之前有用过Echarts，但是这家公司的业务是需要高度自定义的。那么就开始吧！ 项目链接在这儿👉https://github.com/Ra-Liz/vue-echarts-test 以下的练手项目使用vue3搭建。（顺便回顾了vue3，没想到上手这么快） 一个简单的自定义饼图 思路： 使用ref绑定图容器 初始化echart画布 配置画布内元素 标题、工具文本、整体样式 数据排序、细节样式 挂载监听器 测试数据实时更新逻辑 btn绑定回调，watch监听数据变化 优化函数声明，分块，拼接 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 ...

Tailwindcss 处理背景渐变前言在开发中，我们经常需要使用背景渐变，但是 Tailwindcss 默认并没有提供背景渐变的工具类，所以我们需要自己来实现。 实现方法 在tailwind.config.js中添加自定义工具类： 12345678910111213module.exports = { theme: { extend: { backgroundImage: { "gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))", }, }, colors: { "start-color": "#FD7A61", "end-color": "#FF934D", }, },}; 在需要使用背景渐变 ...