ECharts + geoJSON 绘制地图

获取geoJSON

  1. 通过地图选择器下载geoJSON数据，或者直接引用里面的地址。本例以洛阳市为例引用地址https://geo.datav.aliyun.com/areas/bound/410300_full.json

  2. 在arcgis里面使用工具把shp数据处理成geoJSON数据。使用工具为arcgis工具箱 Conversion Tools->JSON->Features To JSON

使用ECharts创建地图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>洛阳市</title>
    <script src="scripts/lib/echarts.min.js"></script>
    <script src="scripts/lib/jquery.min.js"></script>
    <style>
        html,body,#main{
            padding: 0px;
            margin: 0px;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
    $.get("https://geo.datav.aliyun.com/areas/bound/410300_full.json",function(map){
 var myChart = echarts.init(document.getElementById('main'));
        echarts.registerMap("luoyang",map);
 var option = {
            series : [ {
                map : "luoyang",
                type : "map",
                aspectScale: 1.0,
                selectedMode: 'single',//选择类型,
                hoverable:false,//鼠标经过高亮
                roam: true,//鼠标滚轮缩放
                itemStyle: {
                    normal: {
                        borderWidth:1,
                        borderColor:'#ffffff',//区域边框色
                        areaColor: '#FFDAB9',//区域背景色
                        label: {
                            show: true,
                            textStyle: {
                                color: '#6495ED',//文字颜色
                                fontSize:18      //文字大小
                            }
                        }
                    },
                    emphasis: {                 // 选中样式
                        borderWidth:1,
                        borderColor:'#00ffff',
                        color: '#ffffff',
                        label: {
                            show: true,
                            textStyle: {
                                color: '#ff0000'
                            }
                        }
                    }
                }
            } ]
        };
        myChart.setOption(option);
    });
</script>
</body>
</html>

效果图如下

发布于