使用echarts map svg 遇到的一些小坑

最近自己的业务系统需要实现卫星地图来显示建筑物信息的功能，素闻免费开源的echarts有这一功能，于是参照官网资料与示例自己鼓捣起来。

官网：Apache ECharts

我打算参照该官网的示例“庖丁解牛”来做：

 废话不多说，先上代码：

<!--内容开始-->
<section class="content content_main">

    <!-- 用于显示地图的容器 -->
    <div id="container" style="height: 1080px"></div>
    <!-- 用于显示地图的容器 -->

    <!-- 以下部分根据需要引入 -->
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/jquery"></script>
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <!-- Uncomment this line if you want to dataTool extension
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/extension/dataTool.min.js"></script>
    -->
    <!-- Uncomment this line if you want to use gl extension
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
    -->
    <!-- Uncomment this line if you want to echarts-stat extension
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
    -->
    <!-- Uncomment this line if you want to use map
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
    -->
    <!-- Uncomment these two lines if you want to use bmap extension
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/extension/bmap.min.js"></script>
    -->
    <!-- 以上部分根据需要引入 -->


    <script type="text/javascript">
        var dom = document.getElementById('container');//绑定DOM元素
        //echarts的初始化设置，基本不用改
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var option;//定义设置项
        //通过jqeury的get方法获取svg文件，并执行回调函数function (svg){}
        $.get('/static/admin/images/SatelliteMap.svg', function (svg) {
            echarts.registerMap('Beef_cuts_France', { svg: svg });//注册地图
            option = {
                // 鼠标移动至svg元素上会弹出来的提示框
                tooltip: {
                    //可以格式化其显示的内容，可以使用回调函数，详见说明文档
                    formatter: '{b0}: {c0}<br />'
                },

                // 以下部分为原示例的根据svg元素(data)的value的值而进行颜色渐变显示，这里用不到
                // visualMap: false,
                // {
                //     left: 'center',
                //     bottom: '10%',
                //     min: 5,
                //     max: 100,
                //     orient: 'horizontal',
                //     text: ['', 'Price'],
                //     realtime: true,
                //     calculable: true,
                //     inRange: {
                //       color: ['#dbac00', '#db6e00', '#cf0000']
                //     }
                //   },
                // 以上部分为原示例的根据svg元素(data)的value的值而进行颜色渐变显示，这里用不到

                //对数据列的设置
                series: [
                    {
                        name: 'French Beef Cuts',//数据列的名称
                        type: 'map',//数据列的类别
                        map: 'Beef_cuts_France',//数据列所要绑定的地图
                        roam: true,//是否允许放大
                        //数据列的显示样式
                        itemStyle: {
                            color: 'Yellow',//颜色设置，在我使用的自己绘制的SVG图中，这个设置项可以对svg元素的填充色不起作用
                            borderColor: 'rgba(255,255,0,0.1)',//边框颜色设置
                            borderWidth: 2,//边框粗细设置
                            areaColor: 'rgba(255,0,0,0)',//区域颜色设置，在我使用的自己绘制的SVG图中，这个设置项可以对svg元素的填充色进行设置，前提是svg元素在绘制的时候填充颜色不透明度要大于0
                        },
                        //高亮显示的设置
                        emphasis: {
                            label: {
                                show: false //不显示标签
                            },
                            //高亮时的样式显示
                            itemStyle: {
                                borderColor: 'Yellow',
                                areaColor: 'rgba(255,0,0,0.5)',
                                borderWidth: 2,
                                borderType: 'solid'
                            }
                        },
                        selectedMode: false,//关闭选择模式，即图元为不可选择状态。开启时，同样可以对元素被选中后的样式等进行设置
                        // 以下为测试数据
                        data: [
                            { name: 'svg_5', value: 15 },//这里的name为svg文件中元素的name属性，很多svg编辑器绘制的svg文件是没有name属性的，必须得自己加上去。
                            { name: 'svg_6', value: 35 },
                            { name: 'svg_7', value: 15 },
                            { name: 'svg_8', value: 25 },
                            { name: 'svg_9', value: 45 },
                            { name: 'svg_10', value: 85 },
                            { name: 'svg_11', value: 25 },
                            { name: 'svg_12', value: 15 },
                            { name: 'svg_13', value: 55 },
                            { name: "svg_14", value: 25 },
                            {
                                //每个元素都可以单独设置其itemStyle、emphasis、tooltip等参数，且该节点的参数设置会覆盖全局的设置。
                                name: 'svg_15', value: 65,
                                itemStyle: {
                                    color: 'rgb(255,255,255)',
                                    borderColor: 'rgba(255,0,0,1)',
                                    borderWidth: 3,

                                }
                            },
                            { name: 'svg_16', value: 45 },
                            { name: 'svg_17', value: 85 },
                            { name: 'svg_18', value: 35 },
                            { name: 'svg_19', value: 75 },
                            { name: 'svg_20', value: 65 },
                            { name: 'svg_21', value: 65 },
                            { name: 'svg_22', value: 85 },
                            { name: 'svg_23', value: 75 },
                            { name: 'svg_24', value: 65 },
                            { name: 'svg_25', value: 55 },
                            { name: 'svg_26', value: 45 },
                            { name: 'svg_27', value: 85 },
                            { name: 'svg_28', value: 15 },
                            { name: 'svg_29', value: 65 },
                            { name: 'svg_30', value: 45 },
                            { name: 'svg_31', value: 85 },
                            { name: 'svg_32', value: 65 },
                            {
                                name: '北校区', value: 95,
                                itemStyle: {
                                    color: 'rgba(255,0,0,0.1)',
                                    borderColor: 'rgba(255,0,0,1)',
                                    borderWidth: 3,

                                }
                            }
                        ]
                    }
                ]
            };
            myChart.setOption(option);
        });

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
        window.addEventListener('resize', myChart.resize);
    </script>

</section>

当然首先，我们得先有SVG文件，可以通过以下网址在线绘制：

SVG 在线编辑器

可以自己导入背景图，这里我自己做了一张卫星图。 

每个建筑都用一个闭合的线条框起来，我是用钢笔工具来画的。注意每个颜色的内部都可以预先填充一种颜色，透明度建议100%，因为在echarts中是可以进行调整的，但是只能降低原有透明度，而不能在原有的透明度值上增加。

画好以后，保存为svg文件，用代码编辑器打开，可以看到里面除了背景图base64代码以外，就是一个个<path>标签。

 <path
//填充颜色
fill="#20cccc"
//边框颜色
stroke="#f90929"
//边框线条大小
stroke-width="6"
//边框透明度
stroke-opacity="null"
//边框虚线风格设置
stroke-dasharray="5,2,2,2,2,2"
//填充透明度，如需在使用效果中显示和调整，该项目值必须大于0
fill-opacity="0"
//整体透明度
opacity="0.5"
//路径点
d="m2319.14899,1463.82976"

id="svg_12"
//必须包含name属性，echarts才能够识别显示
name="svg_12"

/> 

总结

有两个小坑，一个是svg元素必须设置name属性，才能在echarts中显示出来。二是如果要使echarts元素中的 areaColor设置起作用，必须在编辑制作SVG文件的时候将元素的填充透明度“fill-opacity”设置为大于0。