Echarts加载自定义地图geoJson

86 阅读 0 评论 57 点赞

我是靠谱客的博主正直小蘑菇，这篇文章主要介绍Echarts加载自定义地图geoJson，现在分享给大家，希望可以做个参考。

Echarts3提供的地图有时无法满足我们的需求，这时可以引入geoJson作为底图。

准备你的geoJson文件，注意中括号的数量

复制代码

1
2
3
4
5
6
7
8
9
10
11
12

"geometry": {
"type": "Polygon",
"coordinates": [
[
[-10.0, -10.0],
[10.0, -10.0],
[10.0, 10.0],
[-10.0, -10.0]
]
]
}

或者是

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

"geometry":
{
"type": "MultiPolygon",
"coordinates": [
[
[
[180.0, 40.0], [180.0, 50.0], [170.0, 50.0],
[170.0, 40.0], [180.0, 40.0]
]
],
[
[
[-170.0, 40.0], [-170.0, 50.0], [-180.0, 50.0],
[-180.0, 40.0], [-170.0, 40.0]
]
]
]
}

在echarts3中先注册再使用。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$.get('myJson.json', function (myJson){
echarts.registerMap('MY', myJson) //注册
var option = {
series: [
{
name: 'my custom map',
type: 'map',
roam: true,
map: 'MY'
//使用
}
]
};
myChart.setOption(option);
}