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

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

echats的js文件,自己可以去官网上下
地图省份的数据 (可能有的省份不对),这是我的 网盘地址: 密码: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

Q.E.D.