美文网首页
绘制中国地图

绘制中国地图

作者: h可乐 | 来源:发表于2019-09-29 17:07 被阅读0次

项目需求是飞线地图,但是目前飞线还没实现,直接上代码,效果如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>

<!-- 引入 echarts.js -->

<script src="js/echarts.js"></script>

<script src="js/china.js"></script>

<script src="js/layer/layer.js"></script>

</head>

<body>

<!-- 为ECharts准备一个具备大小(宽高)的Dom -->

<div id="main" style="width:100%; height:1000px;"></div>

<script type="text/javascript">

var dom = document.getElementById("main");

var myChart = echarts.init(dom);

var app = {};

var series = []; //地图展现数据

var series = []; //地图展现数据

//24个省市经度纬度

var geoCoordMap = {

'陕西': [109.503789, 35.860026],

'西安': [108.946466, 34.347269],

'甘肃': [103.832478, 36.065465],

'兰州': [103.84044, 36.067321],

'新疆': [87.633473, 43.799238],

'乌鲁木齐': [87.62444, 43.830763],

'内蒙古': [111.772606, 40.823156],

'包头': [109.846544, 40.662929],

'青海': [101.786462, 36.627159],

'西宁': [101.78443, 36.623393],

'宁夏': [106.265605, 38.476878],

'银川': [106.258602, 38.487834],

'四川': [104.073467, 30.577543],

'成都': [104.081534, 30.655822],

'重庆': [106.558434, 29.568996],

'西藏': [91.124342, 29.652894],

'拉萨': [91.120789, 29.65005],

'云南': [101.592952, 24.864213],

'昆明': [102.852448, 24.873998],

'丽江': [100.233026,26.872108],

'贵州': [106.714476, 26.60403],

'贵阳': [106.636577, 26.653325],

'广西': [108.924274, 23.552255],

'南宁': [108.373451, 22.822607],

'山西': [112.515496, 37.866566],

'太原': [112.534919, 37.873219],

'河南': [101.556307, 34.51139],

'郑州': [113.631419, 34.753439],

'湖北': [112.410562, 31.209316],

'武汉': [114.311582, 30.598467],

'湖南': [111.720664, 27.695864],

'长沙': [112.945473, 28.234889],

'江西': [115.676082, 27.757258],

'南昌': [115.864589, 28.689455],

'安徽': [117.33054, 31.734294],

'合肥': [117.233443, 31.826578],

'上海': [121.480539, 31.235929],

'浙江': [120.159533, 30.271548],

'杭州': [120.215503, 30.253087],

'广东': [113.394818, 23.408004],

'广州': [113.271431, 23.135336],

'北京': [116.413384, 39.910925],

'天津': [117.209523, 39.093668],

'河北': [117.220297, 39.173149],

'唐山': [118.186459, 39.636584],

};

option = {

backgroundColor: "#123456",

color: ['#fc5353', '#f4fc6c', '#e68b55', '#9a68ff', '#ff60c5'],

visualMap: {

min: 1000,

max: 5000,

calculable: true,

right: '32%',

bottom: '6%',

zlevel: 10,

textStyle: {

color: '#fff'

}

},

tooltip: {

trigger: 'item',

formatter: function(params) {

if (params.value) {

return params.name + ' : ' + params.value[2];

} else {

return params.name;

}

}

},

legend: {

orient: 'horizontal',

left: '27%',

top: '5%',

data: ['高线'],

textStyle: {

color: '#ffffff'

},

icon: 'circle'

},

geo: {

map: 'china',

zlevel: 10,

layoutCenter: ['48%', '43%'],

roam: true,

layoutSize: "100%",

zoom: 1.08,

label: {

normal: {

show: true, //地图上的省份名称是否显示

textStyle: {

fontSize: 12,

color: '#43D0D6'

}

},

emphasis: {

show: true

}

},

itemStyle: {

normal: {

color: '#062031',

borderWidth: 1.1,

borderColor: '#43D0D6'

},

emphasis: {

areaColor: '#43D0D6'

}

}

},

series: series

};

myChart.setOption(option);

</script>

</body>

</html>

相关文章

  • Python制作中国地图

    介绍 最近需要绘制中国地图,由于之前都是非常简单地直接绘制地图已不可取!因此严格按照规定来直接一张中国地图。 所需...

  • 绘制中国地图

    项目需求是飞线地图,但是目前飞线还没实现,直接上代码,效果如下: