ECharts如何制作省份地图并在地图上显示自定义图标

javascript/jquery

浏览数:1,024

2019-8-31

之前一直被客户提的一个需求烦恼着,他要只显示某个省份的地图,并且呢要在地图上显示小车的图标,还有其它一些点的信息。我以前只用过echarts做过图表,没做过地图,所以自己也是网上看了很多并且看了很多api文档,最后总算是搞出来了,在这里留个笔记方便自己也方便别人。

步入正题之前需要下几个文件

  1. echats的js文件,自己可以去官网上下
  2. 地图省份的数据 (可能有的省份不对),这是我的 网盘地址: 密码:8xa9
    下面步入正题:
    先放上一张效果图(小车图标的位置我是随机生成了,所以有点丑不要介意哈)
    效果图

我这里就以显示贵州省的地图为例,首先引入几个JS文件:

    <script src="~/Scripts/jquery.js"></script>/*Jquery文件*/
    <script src="~/Scripts/echarts.js"></script>/*echarts文件,可从官网下载,我这里用的是3.0的*/
    <script src="~/Scripts/guizhou.js"></script>/*省份数据,可从我的网盘中下载*/
    <script src="~/Scripts/mapData/ColdCar.js"></script>/*地图上车辆显示的经纬度数据*/

车辆经纬度的数据格式大致如下

var coldCar = [
    {
        "name": "车辆1",
        "value": [107.615944, 27.479744, 2]
    },
    {
        "name": "车辆2",
        "value": [108.296644, 27.676476, 2]
    }
]

定义一个div标签用来初始化echarts

<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="echartMap" style="width: 100%;height:100%;"></div>

具体的JS实现代码

        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('echartMap'));
        var option = {
            tooltip: {
                show: true,
                trigger: 'item',
                triggerOn: 'click',
                formatter: "名称:{b}<br />坐标:{c}"
            },
            series: [
                {
                    name: '冷链仓储分布',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    label: {
                        emphasis: {
                            show: true,
                            position: 'right',
                            formatter: '{b}'
                        }
                    },
                    symbolSize: 10,
                    showEffectOn: 'render',
                    itemStyle: {
                        normal: {
                            color: '#46bee9'
                        }
                    },
                    data: coldStore
                }, {
                    name: "冷链运输车分布",
                    type: 'custom',//配置显示方式为用户自定义
                    coordinateSystem: 'geo',
                    itemStyle: {
                        normal: {
                            color: '#46bee9'
                        }
                    },
                    renderItem: function (params, api) {//具体实现自定义图标的方法
                        return {
                            type: 'image',
                            style: {
                                image: "../../Content/images/汽车.png",
                                x: api.coord([
                                    coldCar[params.dataIndex].value[0], coldCar[params.dataIndex]
                                        .value[1]
                                ])[0],
                                y: api.coord([
                                    coldCar[params.dataIndex].value[0], coldCar[params.dataIndex]
                                        .value[1]
                                ])[1]
                            }
                        }
                    },
                    data: coldCar
                }, {
                    name: "高风险食品安全分布",
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    label: {
                        emphasis: {
                            show: true,
                            position: 'right',
                            formatter: '{b}'
                        }
                    },
                    symbolSize: 10,
                    showEffectOn: 'render',
                    zlevel: 2,
                    itemStyle: {
                        normal: {
                            color: '#FF4500'
                        }
                    },
                    data: coldFood
                }, {
                    name: "药品安全分布",
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    label: {
                        emphasis: {
                            show: true,
                            position: 'right',
                            formatter: '{b}'
                        }
                    },
                    symbolSize: 10,
                    showEffectOn: 'render',
                    zlevel: 2,
                    itemStyle: {
                        normal: {
                            color: '#9932CC'
                        }
                    },
                    data: coldMed
                }
            ],
            legend: {
                type: "plain",
                show: true,
                orient: 'vertical',
                top: 'middle',
                left: 'left',
                data: [
                    {
                        name: "冷链仓储分布",
                        icon: "circle",
                        textStyle: {
                            color: "#a9d6fa"
                        }
                    },
                    {
                        name: "冷链运输车分布",
                        icon: "circle",
                        textStyle: {
                            color: "#a9d6fa"
                        }
                    },
                    {
                        name: "高风险食品安全分布",
                        icon: "circle",
                        textStyle: {
                            color: "#a9d6fa"
                        }
                    },
                    {
                        name: "药品安全分布",
                        icon: "circle",
                        textStyle: {
                            color: "#a9d6fa"
                        }
                    }
                ]
            },
            geo: {//引入贵州省的地图
                map: '贵州',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                zoom: 1,
                itemStyle: {
                    normal: {
                        borderColor: '#387ba7',
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 10,
                        shadowOffsetX: 10
                    },
                    emphasis: {
                        areaColor: '#b3f3f3'
                    }
                },
                regions: [//对不同的区块进行着色
                    {
                        name: '毕节市',
                        itemStyle: {
                            normal: {
                                areaColor: '#2b97df'
                            }
                        }
                    }, {
                        name: '遵义市',
                        itemStyle: {
                            normal: {
                                areaColor: '#a9d6fd'
                            }
                        }
                    }, {
                        name: '铜仁市',
                        itemStyle: {
                            normal: {
                                areaColor: '#3497df'
                            }
                        }
                    }, {
                        name: '贵阳市',
                        itemStyle: {
                            normal: {
                                areaColor: '#0d4369'
                            }
                        }
                    }, {
                        name: '安顺市',
                        itemStyle: {
                            normal: {
                                areaColor: '#005c9b'
                            }
                        }
                    }, {
                        name: '黔西南布依族苗族自治州',
                        itemStyle: {
                            normal: {
                                areaColor: '#a9d6fd'
                            }
                        }
                    }, {
                        name: '六盘水市',
                        itemStyle: {
                            normal: {
                                areaColor: '#0d4369'
                            }
                        }
                    }, {
                        name: '黔东南苗族侗族自治州',
                        itemStyle: {
                            normal: {
                                areaColor: '#005c9b'
                            }
                        }
                    }, {
                        name: '黔南布依族苗族自治州',
                        itemStyle: {
                            normal: {
                                areaColor: '#2b97df'
                            }
                        }
                    }
                ]
            }
        };
        myChart.setOption(option);

代码呢,大致如上,显示自定义图标的代码主要是这段,具体的参数大家可以去官网看文档

 {
                    name: "冷链运输车分布",
                    type: 'custom',//配置显示方式为用户自定义
                    coordinateSystem: 'geo',
                    itemStyle: {
                        normal: {
                            color: '#46bee9'
                        }
                    },
                    renderItem: function (params, api) {//具体实现自定义图标的方法
                        return {
                            type: 'image',
                            style: {
                                image: "../../Content/images/汽车.png",
                                x: api.coord([
                                    coldCar[params.dataIndex].value[0], coldCar[params.dataIndex]
                                        .value[1]
                                ])[0],
                                y: api.coord([
                                    coldCar[params.dataIndex].value[0], coldCar[params.dataIndex]
                                        .value[1]
                                ])[1]
                            }
                        }
                    },
                    data: coldCar
                }

显示自定义地图的代码是这块

geo: {//引入贵州省的地图
                map: '贵州',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                zoom: 1,
                itemStyle: {
                    normal: {
                        borderColor: '#387ba7',
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 10,
                        shadowOffsetX: 10
                    },
                    emphasis: {
                        areaColor: '#b3f3f3'
                    }
                },

好了,大致的代码就这么多啦,希望能帮到大家
最后附上完整的代码文件: 网盘地址 密码:hnn9

如何制作区县以及自定义地图看下篇文章Echarts如何只做一个区或者一个县的地图

微信关注我哦!(转载注明出处) 关注我哦 个人博客地址:点击跳转

作者:邵佳楠