echarts实现2D世界地图
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
#container {
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script>
var latlong = {};
latlong.AF = {
'latitude': 24.0464639997, //纬度
'longitude': 140.8007812500 //经度
};
latlong.AL = {
'latitude': 11.4611520000,
'longitude': 90.0516320000
};
latlong.DZ = {
'latitude': 14.3127300000,
'longitude': 119.5700950000
};
var mapData = [{
'code': 'AF',
'name': '2018环太军演',
'value': 32358260,
'color': '#eea638',
'zb': `美国:
罗纳德·里根号航空母舰、
柯蒂斯·威尔伯号导弹驱逐舰、
复仇者号扫雷舰、
奥克拉荷马市号核子攻击潜艇、
F/A-18E战斗机 21 架<br/>
日本:
出云级直升机驱逐舰 1 艘、
金刚级驱逐舰 2 艘、
苍龙级潜艇 2 艘1`,
'text': '参演国家：澳大利亚，巴西，加拿大，以色列，日本，英国，美国和越南等等',
'scal': '一共包括26个国家，共有47艘水面舰艇，5艘潜艇，18个国家的陆军，200多架飞机和<br/>近25000人参加',
'descript': 'RIMPAC 2018的主题就是“有能力，适应性强的合作伙伴”。<br/>参与国和部队将展现广泛的能力及海上力量的灵活性。<br/> 这些能力包括从救灾和海上安全行动到海上控制和复杂的作战。相关的演习内容也包括两栖作战，<br/>炮击，导弹，反潜和防空演习，反海盗行动，扫雷行动，爆炸物处理以及潜水和打捞等等'
},
{
'code': 'AL',
'name': '印度洋联合海上军演',
'value': 3215988,
'color': '#d8854f',
'zb': `美国:
罗纳德·里根号航空母舰、
柯蒂斯·威尔伯号导弹驱逐舰、
复仇者号扫雷舰、
奥克拉荷马市号核子攻击潜艇、
F/A-18E战斗机 21 架<br/>
日本:
出云级直升机驱逐舰 1 艘、
金刚级驱逐舰 2 艘、
苍龙级潜艇 2 艘1`,
'text': '参演国家：澳大利亚、马来西亚、马尔代夫、毛里求斯、缅甸、新西兰、阿曼、越南、泰国、美国等等',
'scal': '一共包括16个国家，共有30艘水面舰艇，5艘潜艇，200多架飞机和<br/>近15000人参加',
'descript': '印度海军将于3月6日起在安达曼-尼科巴群岛海域，主办为期8天的大型海军演习'
},
{
'code': 'DZ',
'name': '美菲“肩并肩”联合军事演习',
'value': 35980193,
'color': '#de4c4f',
'zb': `美国:<br/>
罗纳德·里根号航空母舰、
柯蒂斯·威尔伯号导弹驱逐舰、
复仇者号扫雷舰、
奥克拉荷马市号核子攻击潜艇、
F/A-18E战斗机 21 架
`,
'text': '参演国家：美国和菲律宾',
'scal': '一共包括2个国家，共有20艘水面舰艇，5艘潜艇，100多架飞机和<br/>近5000人参加',
'descript': ''
}
];
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var max = -Infinity;
var min = Infinity;
mapData.forEach(function(itemOpt) {
if (itemOpt.value > max) {
max = itemOpt.value;
}
if (itemOpt.value < min) {
min = itemOpt.value;
}
});
var option = {
backgroundColor: '#404a59',
title: {
text: '第七舰队联合军演概览',
subtext: '',
left: 'center',
top: 'top',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: function(params) {
console.log(params)
// var value = (params.value + '').split('.');
// value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
// return params.seriesName + '<br/>' + params.name + ' : ' + value +'<br/>' +
return '经度：'+params.value[0]+'<br/>' +
'纬度：'+params.value[1]+ '<br/>' +'军演名称：'+ params.name +
'<br/>'+params.data.text+
'<br/>'+'规模：'+params.data.scal+
'<br/>'+'舰种：'+'<br/>'+params.data.zb+
'<br/>'+'描述：'+params.data.descript
},
// extraCssText:'width:260px;'
},
visualMap: {
show: false,
min: 0,
max: max,
inRange: {
symbolSize: [26, 30]
}
},
geo: {
name: 'World Population (2010)',
type: 'map',
map: 'world',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [{
type: 'scatter',
coordinateSystem: 'geo',
data: mapData.map(function(itemOpt) {
return {
name: itemOpt.name,
value: [
latlong[itemOpt.code].longitude,
latlong[itemOpt.code].latitude,
itemOpt.value,
],
label: {
emphasis: {
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: itemOpt.color
}
},
text: itemOpt.text,
scal: itemOpt.scal,
descript: itemOpt.descript,
zb: itemOpt.zb
};
})
}]
};
myChart.setOption(option)
</script>
</body>
</html>