svg开发地图组件使用
1.由于思极地图上的线路 变电站 是根据地图的可视窗口的区域，放大，缩小，拖拽动态请求后端数据，加载数据的，地图上的数据很多，导致加载很慢，不能整个地市整个区域内的所有变电站和线路 潮流数据一目了然。
2.const mySvg = ref(); import { Svg, SVG } from "@svgdotjs/svg.js"; draw.value = SVG(mySvg.value);//实例化svg
3.渲染的内容：svg中的第一个标签是 相当于一个div,在第一个g标签做为最大的盒子，然后 第一个g标签中包含湖南省的边界，各个地市边界，城市名字，潮流数据，线路数据，变电站，短路水平，节点电压，变电站图标图例等；地图的裁剪线路变电站是以地图的边界为基础的裁剪地图以外的变电站和线路数据；
4.层级覆盖：svg在页面渲染的时候后面的g标签会覆盖前面的 g标签，相当于后面的g标签渲染的内容的层级比前面的g标签渲染的内容要高。
5.地图双击穿透；单击变色；
6.svg坐标转换为实际经纬度坐标：通过svg中最大的g标签中的值获取标签上的transform属性 中的6个值；a,d是x，y轴放大的倍数，c,d是x，y轴倾斜度；e,f是水平和垂直方向的平移；
7.longitude = (e / a + event.layerX / a) / (mapWidth.value / 360) - 180;
地图的水平偏移量 /地图水平放大的倍数 + 这部分表示鼠标事件在X轴上的 位置除以比例尺， 即将鼠标事件的X坐标转换为实际地图上的X坐标；
纬度同理；
latitude = Math.abs((f /d + event.layerY / d) / (mapHeight.value / 180) - 90);
有些地图的形状又细又长，需要根据传递后端的宽度，然后放大地图的大小，导致点击地图上的坐标点转换后的经纬度不准确，然后就需要 经度 a地图的宽度放大的位数；纬度 d地图的高度放大的倍数；
8.地图上的物体初始是灰色,通过传参各种配置可以改变颜色，大小。
9.绘制地图外边界的代码 const g_outerBorder = draw.value.get(0).find("g[name=outerBorder]");//获取节点 g_outerBorder.clear();//清空dom节点缓存 const path = draw.value.path(outerBorderData.polyline).stroke({ width: svgStyle.value.strokeWidthA, color: "#55c6fe", linecap: "round", linejoin: "round" }).fill("url(#myGradient)").attr({ name: outerBorderData.name, level: outerBorderData.level, adcode: outerBorderData.adcode, citycode: outerBorderData.citycode }); //绘制节点路径，添加属性
draw.value.find("g[name=outerBorder]").add(path);把绘制好的路径添加到指定的g标签中
10.事件类型 path.on("click", (e) => {});//单击事件 group.on("contextmenu", (event) => { event.preventDefault(); })//右键菜单事件 group.mouseenter((event) => {});//鼠标进入事件 group.mouseleave((event) => {});//鼠标离开事件
11.虽然地图上的东西都能一目了然，但是在大屏上选中线路很难选中，于是我就在原始的线路上增加一条相对比较粗的线路，在鼠标未悬浮的时候，线路处于透明的状态，鼠标悬浮进去就是显示状态，原始线路的点击和双击事件也转移到了粗的线路上
12.线路上有潮流指向展示，根据各个层级线路的长度去适配箭头所在的位置，控制箭头一直处于线路中间的状态
13.添加故障，右击线路选择线路的始端和末端，在线路上的始端和末端增加闪电标识符号
14.地图上的数据拖拽：定义一个变量初始是false,当鼠标按下的时候修改为true,然后记录线event.clientX，如果地图放大或者缩小了就 event.clientX/放大缩小的倍数，鼠标移动的时候记录一下鼠标移动解释的坐标；终点坐标-起始坐标 ；最后用transform：translate(x,y)修改数据的位置。鼠标离开或者鼠标抬起把这个变量修改为false。
15.动画效果：线路的闪烁，变粗变细，颜色深浅，变电站半径大小，变电站的切换，线路的滚动效果，线路上的箭头移动效果；
