李的博客网站
Element ui 全局修改loading图标样式
编辑
2025-11-12
前端开发遇到问题
00

element ui文档中没有提供修改全局修改默认图标的办法，由于使用了太多的v-loading指令，需要直接修改他的默认样式。

修改后效果

image.png 通过重写ElLoading的方式实现，具体如下：

1、在plugins文件夹下新建wrapElLoading.ts文件

ts
import {ElLoading} from "element-plus";
 
/**
 * @description 扩展ElLoading,传入默认值
 */
export default {
    install(app: any) {
        const svg: string = `<path d="M21.38,4.58a4.62,4.62,0,0,0,9.24,0h0a4.62,4.62,0,0,0-9.24,0Z" fill="#9ab1c9"/><path d="M6.33,10.39a3.75,3.75,0,0,0,7.49,0h0a3.75,3.75,0,0,0-7.49,0Z" fill="#9ab1c9"/><path d="M0,25.86a3.43,3.43,0,0,0,6.86,0h0a3.41,3.41,0,0,0-3.43-3.4A3.41,3.41,0,0,0,0,25.85Z" fill="#9ab1c9"/><path d="M6.88,41.66a3.2,3.2,0,1,0,3.2-3.17A3.18,3.18,0,0,0,6.88,41.66Z" fill="#9ab1c9"/><path d="M23.32,47.35a2.68,2.68,0,0,0,5.36,0h0a2.68,2.68,0,0,0-5.36,0Z" fill="#9ab1c9"/><path d="M39.68,41.66a2.14,2.14,0,0,0,4.28,0h0a2.14,2.14,0,0,0-4.28,0Z" fill="#9ab1c9"/><path d="M46.85,26A1.58,1.58,0,0,0,50,26h0a1.58,1.58,0,0,0-3.15,0Z" fill="#9ab1c9"/><path d="M40.77,10.2a1.12,1.12,0,1,0,1.12-1.11A1.12,1.12,0,0,0,40.77,10.2Z" fill="#9ab1c9"/>`;
        const loadingDir: any = ElLoading.directive
        const originDirMounted = loadingDir.mounted;
        loadingDir.mounted = function (el: any, binding: any, vnode: any, prevVnode: any) {
            // 需要覆盖哪些默认属性值在这里设置，具体属性名参考官网loading指令用法
            el.setAttribute('element-loading-svg', svg)
            originDirMounted.call(this, el, binding, vnode, prevVnode)
        }
        const originService = ElLoading.service;
        ElLoading.service = function (options: any = {}) {
            return originService.call(this, Object.assign({ svg}, options))
        }
        app.config.globalProperties.$loading = ElLoading.service;
        // 如果在main.ts中全局使用了ElementPlus —> app.use(ElementPlus),则下面这行代码不需要
        // app.use(ElLoading);
    }
}

2、在main.ts中use即可

js
import WrapElLoading from "@/plugins/wrapElLoading";
 
// 若项目采用全局引入ElementPlus，则须在app.use(ElementPlus)后执行
app.use(WrapElLoading);

———————————————— 版权声明：本文为CSDN博主「倾城烟雨墨」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_34743346/article/details/135165317

阅读全文
monaco-editor修改样式
编辑
2025-11-04
前端开发遇到问题
00

由于项目中需要对code-editor库的编辑代码进行修改，于是调研了下修改方式，当前的网络的文档也很少。

修改前后展示

image.pngimage.png

核心代码

javascript
manaco.editor.defineTheme('custmer', {
	base: 'vs',
	inherit: false,
	rules: [],
	colors: {
		['editorSuggestWidget.background']: '#000000',
	}
})

这段代码意思是定义一个custmer主题，基础vs主题，后面使用custmer主题即可修改样式。

相关文档

颜色的文档： https://code.visualstudio.com/api/references/theme-color

阅读全文
nginx 报错403
编辑
2025-07-17
部署项目遇到的问题
00
  1. 查看报错日志 [root@mysql03 nginx]# cat logs/error.log 2017/06/15 04:00:57 [error] 6702#0: *14 "/root/html/index.html" is forbidden (13: Permission denied), client: 10.219.24.1, server: request: "GET / HTTP/1.1", host: "" [root@mysql03 logs]# date Thu Jun 15 04:01:27 CST 2017
  2. 检查权限 [root@mysql03 ~]# ll drwxr-xr-x. 2 root root 4096 Jun 15 03:59 html [root@mysql03 html]# ll total 8 -rw-r--r--. 1 root root 537 Jun 15 03:59 50x.html -rw-r--r--. 1 root root 616 Jun 15 03:51 index.html 说明：发现目录权限没有问题
  3. 检查nginx启动进程 [root@mysql03 logs]# ps anx|grep nginx 6546 ? Ss 0:00 nginx: master process ./sbin/nginx 6702 ? S 0:00 nginx: worker process 6726 pts/1 S+ 0:00 grep nginx 说明：发现nginx的work process是nobody的
  4. 修改 nginx.conf 文件 打开nginx.conf文件所在的目录，查看文件的属性 （root root） [root@mysql03 nginx]# ll drwxr-xr-x. 2 root root 4096 Jun 15 04:08 conf 在nginx.conf文件的第一行加上 user root root; [root@mysql03 nginx]# cat conf/nginx.conf user root root;
  5. 重新 reload nginx进程 [root@mysql03 nginx]# ./sbin/nginx -s reload
  6. 再次访问，成功！
阅读全文
地图一次加载万级围栏资源优化（大量数据优化）
编辑
2025-07-09
前端开发遇到问题
00

最近遇到一个项目，需要将将近2w条围栏数据，快速的绘制到地图上，而且客户的电脑内存只有4g。用传统的svg绘制上地图上，同时渲染页面一下就崩溃了。因此需要以canvas的形式绘制到地图内。接下来我就叙述一下实现的过程。

地图围栏数据的获取方式（地图采用mars2d）

由于需要一次性加载2w条数据，无法通过接口查询数据库，这会消耗大量的时间请求接口查询数据。因此，最好的方案是直接读取文件的geojson资源。这里用的项目资源是shp2的压缩包。

  • 将资源文件放置到服务器上
  • 请求获取资源，将shp2格式数据转为geojson

将资源文件放置到服务器上

image.png 将文件打包成zip文件，再将资源放到自己的服务器上。

请求获取资源，将shp2格式数据转为geojson

js
// url为文件服务器资源
import * as shpUtil from 'shp-geojson';
const geojson = await shpUtil.toGeoJSON(url, undefined, 'gkb', options.crs);

将geojson的围栏数据绘制到canvas内

这里可以看官方示例http://mars2d.cn/editor-vue.html?id=layer-graphic/file/geojson-canvas 这里贴出我这里的关键代码（项目不同需要看文档）

js
// geojsonData为服务端来的数据，map为mars2d的地图实例
const showData = (geojsonData: any, map: any) => {

    const canvasLayer = new L.CanvasGeojsonLayer({
        style: {},
        onClick: function (features: any, latlng: any) {
            if (features.length === 0) {
                return
            }

            let inhtml = "<table>"
            const attr = features[0].geojson.properties
            for (const col in attr) {
                const showval = mars2d.Util.trim(String(attr[col]))
                if (showval === null || showval?.toString() === "NaN" || showval === "" || showval === "Null" || showval === "Unknown" || showval === "0" || showval?.length === 0) {
                    continue
                }

                inhtml += '<tr>  <td  style="text-align: right;min-width: 80px;">' + col + "：</td> <td>" + showval + "</td>   </tr>"
            }
            inhtml += "</table>"

            const popup = L.popup().setLatLng(latlng).setContent(inhtml).openOn(map)
        },
        onMouseOver: function (features: any, latlng: any) {
            // handle mouseover events
            if (features.length === 0) {
                return
            }

            for (let i = 0; i < features.length; i++) {
                const properties = features[i].geojson.properties
                if (!properties.Color_Old) {
                    properties.Color_Old = properties.Color
                }
                properties.Color = "rgba(90, 131, 245, 1)"
            }
            canvasLayer.render()
        },
        onMouseOut: function (features: any, latlng: any) {
            if (features.length === 0) {
                return
            }

            for (let i = 0; i < features.length; i++) {
                const properties = features[i].geojson.properties
                properties.Color = properties.Color_Old
            }
            canvasLayer.render()
        }
    })
    canvasLayer.addTo(map)
    canvasLayer.addCanvasFeatures(L.CanvasFeatureFactory(geojsonData))
    canvasLayer.render()
    return canvasLayer
}
const geojson = await shpUtil.toGeoJSON(url, undefined, 'gkb', options.crs);
for (let i = 0; i < geojson.features.length; i++) {
    const feature = geojson.features[i]；
    // 设置围栏颜色
    feature.properties.Color = item.color
}
showData({ ...geojson, type: "FeatureCollection" }, map)

这样就能以canvas的形式绘制到地图内。（数据保密部分打码处理）实现效果：

image.png

总结

最终总结

使用其它地图api，也可使用类似的思路，将地图数据改为本地数据，将围栏绘制到地图canvas内部，这种方式是内存消耗小，数据加载快的最有效方案。领导再也不嫌地图资源加载慢了。

阅读全文
svg制作图例图标样式
编辑
2025-07-02
前端开发遇到问题
00

地图上地形的图标需要用svg实现，因此学习了下svg线性图标绘制

效果

image.png image.png image.png

svg代码

实线

svg
<svg width="18" style="transform: rotate(90deg)" height="18" xmlns="http://www.w3.org/2000/svg">
  <rect x="1" y="1" width="16" height="16" fill="none" stroke="#b3fe68" stroke-width="2"/>
  <line x1="3" y1="3" x2="15" y2="15" stroke="#b3fe68" stroke-width="2" />
  <line x1="1" y1="9" x2="15" y2="24" stroke="#b3fe68" stroke-width="2" />
  <line x1="9" y1="1" x2="24" y2="15" stroke="#b3fe68" stroke-width="2" />
</svg>

反斜线

svg
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
  <rect x="1" y="1" width="16" height="16" fill="none" stroke="#219a1a" stroke-width="2"/>
  <line x1="3" y1="3" x2="15" y2="15" stroke="#219a1a" stroke-width="2" stroke-dasharray="9,3"/>
  <line x1="1" y1="9" x2="15" y2="24" stroke="#219a1a" stroke-width="2" stroke-dasharray="9,3"/>
  <line x1="9" y1="1" x2="24" y2="15" stroke="#219a1a" stroke-width="2" stroke-dasharray="9,3"/>
</svg>

无规则三角形

svg
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
  <!-- 绿色正方形边框 -->
  <rect x="1" y="1" width="16" height="16" fill="none" stroke="#219a1a" stroke-width="2"/>
  <!-- 正斜虚线 -->
  <!-- 更大的绿色三角形，角度不规律 -->
  <!-- 1号三角形，正常朝上 -->
  <polygon points="3,13 9,13 6,5" fill="#219a1a"/>
  <!-- 2号三角形，逆时针旋转30度 -->
  <polygon points="13,3 17,9 9,11" fill="#219a1a"/>
  <!-- 3号三角形，顺时针旋转45度 -->
  <polygon points="4,17 12,15 8,17" fill="#219a1a"/>
</svg>
阅读全文