首页 > 建站教程 > 地图,GIS教程 >  Echarts显示某省市县地图正文

Echarts显示某省市县地图

最近构建大数据平台时,需要显示一个市的地图,改完后显示效果

echarts map 使用阿里dataV


地图json数据

首先你是要显示一个区域的地图,那么就需要获取到这个区域的周维经纬度数据,将其连起来就是一个闭合的区域,也就是你需要显示的地图,可以从阿里Datav地图选择器下载

echarts map 使用阿里dataV


选择对应的省市区,然后点击右下角的下载:

echarts map 使用阿里dataV


下载json数据后,代码如下:

01<!DOCTYPE html>
02<html>
03<head>
04    <meta charset="UTF-8">
05    <meta http-equiv="X-UA-Compatible" content="IE=edge">
06    <meta name="viewport" content="width=device-width, initial-scale=1.0">
07    <title>Document</title>
08</head>
09<body>
10<script type="text/javascript" src="js/jquery.min.js"></script>
11<script type="text/javascript" src="js/echarts.min.js"></script>
12  
13<div id="chart" style="width: 100%;height:500px;"></div>
14  
15<script type="text/javascript">
16  
17//获取下载的地区json文件,将代码里的“zhenngzhou”统统替换成你的文件名,建议用英文。
18$.get('zhengzhou.json',function(rs){
19    echarts.registerMap('zhengzhou',rs);
20    showMap();
21})
22  
23function showMap(){
24        var myChart = echarts.init(document.getElementById('chart'));
25        var option = {
26            tooltip: {
27// show: false //不显示提示标签
28                formatter: '{b}'//提示标签格式
29                backgroundColor:"#999999",//提示标签背景颜色
30                textStyle:{color:"#fff"//提示标签字体颜色
31            },
32            series: [{
33                type: 'map',
34                mapType: 'zhengzhou',
35                label: {
36                    normal: {
37                        show: true,//显示省份标签
38                        textStyle:{color:"#c71585"}//省份标签字体颜色
39                    },
40                    emphasis: {//对应的鼠标悬浮效果
41                        show: true,
42                        textStyle:{color:"#800080"}
43                    }
44                },
45                itemStyle: {
46                    normal: {
47                        borderWidth: .5,//区域边框宽度
48                        borderColor: '#009fe8',//区域边框颜色
49                        areaColor:"#ffefd5",//区域颜色
50                    },
51                    emphasis: {
52                        borderWidth: .5,
53                        borderColor: '#4b0082',
54                        areaColor:"#f47920",
55                    }
56                },
57                data:[
58                    {name:'金水区', selected:true}
59                ]
60            }],
61        };
62  
63        myChart.setOption(option);
64        myChart.on('mouseover'function (params) {
65            var dataIndex = params.dataIndex;
66            console.log(params);
67        });
68    }
69  
70</script>
71</body>
72</html>


显示效果:

echarts map 使用阿里dataV


可以加入geo定位,显示一些更有用的东西,代码如下:

01<!DOCTYPE html>
02<html>
03<head>
04    <meta charset="UTF-8">
05    <meta http-equiv="X-UA-Compatible" content="IE=edge">
06    <meta name="viewport" content="width=device-width, initial-scale=1.0">
07    <title>Document</title>
08</head>
09<body>
10<script type="text/javascript" src="js/jquery.min.js"></script>
11<script type="text/javascript" src="js/echarts.min.js"></script>
12  
13<div id="chart" style="width: 100%;height:500px;"></div>
14  
15<script type="text/javascript">
16  
17//获取地区json文件
18$.get('zhengzhou.json',function(rs){
19                echarts.registerMap('zhengzhou',rs);
20                showMap();
21            })
22  
23function showMap(){
24        var myChart = echarts.init(document.getElementById('chart'));
25        var option = {
26            tooltip: {
27            },
28            geo: {
29                tooltip: {
30                    show: true
31                },
32                map: 'zhengzhou',
33                roam: true
34            },
35  
36            series: [
37                {// 定位点
38                    type: 'effectScatter',
39                    coordinateSystem: 'geo',
40                    geoIndex: 0,
41                    symbolSize: function (params) {
42                        return (params[2] / 100) * 15;
43                    },
44                    symbol: 'circle',
45                    itemStyle: {
46                        color: '#0E436D'
47                    },
48                    encode: {
49                        tooltip: 2
50                    },
51                    data:[
52                        [113.572182,34.80333, 100],
53                        [113.404019,34.793607, 120]
54                    ]
55                },
56                {// 对应的名称
57                    type: 'map',
58                    mapType: 'zhengzhou',
59                    label: {
60                        normal: {
61                            show: true,//显示省份标签
62                            textStyle:{color:"#FFFFFF"}//省份标签字体颜色
63                        },
64                        emphasis: {//对应的鼠标悬浮效果
65                            show: true,
66                            textStyle:{color:"#FFFFFF"}
67                        }
68                    },
69                    itemStyle: {
70                        normal: {
71                            borderWidth: .5,//区域边框宽度
72                            borderColor: '#197BC6',//区域边框颜色
73                            areaColor:"#209CFC",//区域颜色
74                        },
75                        emphasis: {
76                            borderWidth: .5,
77                            borderColor: '#1463A0',
78                            areaColor:"#197BC6",
79                        }
80                    },
81                    data:[
82  
83                    ]
84                }
85            ],
86        };
87  
88        myChart.setOption(option);
89        myChart.getZr().on('click'function (params) {
90            var pixelPoint = [params.offsetX, params.offsetY];
91            var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
92            console.log(dataPoint);
93        });
94    }
95  
96</script>
97</body>
98</html>


运行效果:

echarts map 使用阿里dataV