echarts依据svg作为地图并实现打点

效果图

 import chinamapSvg from "../../assets/images/map/map3.svg"; // 引入本地svg图片

geMap() {
let option= {
          tooltip: {
            show: true,
            backgroundColor: "rgba(6,57,133,0)",
            borderColor: "#13b8c3",
            borderWidth: 0,
            shadowColor: "rgba(6,57,133,0)", //发光?效果
            shadowBlur: 2,
            padding: 6,
            textStyle: {
              color: "#ffffff00",
            },
          },
  
          series: [
            {
              type: "scatter",
              coordinateSystem: "geo",
              data: [],
              symbol: "image://" + require("@/assets/images/map/sunIcon.png"),
              symbolSize: [25, 60],
              symbolOffset: [0, -35],
            },
            {
              type: "scatter",
              coordinateSystem: "geo",
              data: [],
              symbol: "image://" + require("@/assets/images/map/windIcon.png"),
              symbolSize: [25, 60],
              symbolOffset: [0, -35],
            },
            {
              type: "scatter",
              coordinateSystem: "geo",
              data: [],
              symbol: "image://" + require("@/assets/images/map/energyIcon.png"),
              symbolSize: [25, 60],
              symbolOffset: [0, -35],
            },
            {
              type: "scatter",
              coordinateSystem: "geo",
              data: [],
              symbol: "image://" + require("@/assets/images/map/cdIcon.png"),
              symbolSize: [25, 60],
              symbolOffset: [0, -35],
            },
            {
              type: "scatter",
              coordinateSystem: "geo",
              data: [],
              symbol: "image://" + require("@/assets/images/map/yqIcon.png"),
              symbolSize: [25, 60],
              symbolOffset: [0, -35],
            },
          ],
  
        }
	$.get(chinamapSvg, function (svg) {
  
          echarts.registerMap('organ_diagram', { svg: svg });
          option.tooltip.formatter = function (params) {
            if (params.componentSubType == "scatter") {
              let className = "norSty";
              if (params.data.status != "正常") {
                className = "abnorSty";
              }
              let toolTiphtml = "";
              let status = params.data.status == undefined ? "未知" : params.data.status;
              let power = params.data.power == undefined ? 0 : params.data.power;
              let capacity = params.data.capacity == undefined ? 0 : params.data.capacity;
              toolTiphtml =
                "<div class='toopTip' >" +
                "<div class='left'><img class='imgClass' src='" +
                vm.imgSrcTooltip(params.data.type) +
                "'><div class='" +
                className +
                "'>" +
                status +
                "</div></div>" +
                "<div class='right'><div class='staName'>" +
                params.data.name +
                "</div>" +
                "<div class='para'><div class='attr'>光伏辐照强度</div><div class='value'>" +
                power +
                "</div><div class='unit'>MWh</div></div>" +
                "<div class='para'><div class='attr'>当日发电量</div><div class='value'>" +
                power +
                "</div><div class='unit'>MWh</div></div>" +
                "<div class='para'><div class='attr'>额定容量</div><div class='value'>" +
                capacity +
                "</div><div class='unit'>MW</div></div><div>" +
                "</div>";
              return toolTiphtml;
            }
          }
          option.geo = [
           {
                        show: true,
                        layoutCenter: ["51.5%", "49.5%"], //位置
                        layoutSize: '155%', //大小
                        aspectScale: 0.78,
                        zoom: 0.64,
                        map: 'china',
                        roam: false,
                        label: {
                            normal: {
                                show: false,

                                textStyle: {
                                    color: "#fff",
                                    fontSize: 0,
                                },
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 0,
                                },
                            },
                        },
                        itemStyle: {
                            normal: {
                                areaColor: {
                                    type: "linear",
                                    x: 1200,
                                    y: 0,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0.2,
                                            color: "#1A6CED", // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.4,
                                            color: '#0551C1'
                                        },
                                        {
                                            offset: 0.7,
                                            color: "#0462C8", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#1892D8", // 50% 处的颜色
                                        },
                                    ],
                                    global: true, // 缺省为 false
                                },
                                // borderColor: "#47A4F2",
                                // borderWidth: 1.5,
                                // shadowColor: "#4DA8F5",
                                // shadowOffsetY: 10,
                                // shadowBlur: 120,
                            },
                            emphasis: {
                                show: false,
                                areaColor: "transparent",
                                borderWidth: 0
                            },
                        },
                        regions: [
                            {
                                name: "南海诸岛",
                                itemStyle: {
                                    // 隐藏地图
                                    normal: {
                                        opacity: 0, // 为 0 时不绘制该图形
                                    }
                                },
                                label: {
                                    show: false // 隐藏文字
                                }
                            }
                        ],
                    },
                    {
                        layoutCenter: ["50.5%", "52%"], //位置
                        layoutSize: '160%', //大小
                        aspectScale: 0.95,
                        zoom: 0.65,
                        roam: false,
                        map: 'organ_diagram',
                        itemStyle: {
                            borderWidth: 0,
                        },
                        emphasis: {
                            focus: 'none',
                            itemStyle: {
                                areaColor: '#ffffff',
                            },
                            label: {
                                show: false,
                            },
                        },
                        regions: [
                            {
                                name: 'map11',
                                itemStyle: {
                                    areaColor: 'red',
                                    color: 'red',
                                },
                            },
                        ],
                    },]
  
          mapChart.setOption(option);
          window.addEventListener("resize", () => {
            mapChart.resize();
          });
        })
}

这么做就不需要转换坐标了，但是有个弊端就是svg底图和正常引入的js底图的大小需要手动去调整，有略微的差别，有好的解决办法欢迎在评论区留言