Echarts地图的使用 | 易学教程

中国地图，以及各省市地图

获取地图坐标json：http://datav.aliyun.com/tools/atlas/#&lat=35.10193405724606&lng=104.2822265625&zoom=4

例子一：echarts 地图香港十八区人口密度

特别注意：HK2.json为获取香港十八区的地理坐标，用上面的方法可获取

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../Util/echart/echarts-min.js"></script>
		<link rel="stylesheet" href="../../inSchool/bootstrap-3.3.7-dist/css/bootstrap.css" />
		<script src="../../Util/bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
	</head>

	<body>
		<div id="map" style="height: 800px; width: 1500px;margin: 0 auto;"></div>
		<script>
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('map'));
			myChart.showLoading();

			$.get('json/HK2.json', function(geoJson) {

				myChart.hideLoading();

				echarts.registerMap('HK', geoJson);

				myChart.setOption(option = {
					title: {
						text: '香港18区人口密度 （2011）',
						subtext: '人口密度数据来自Wikipedia',
						sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
					},
					tooltip: {
						trigger: 'item',
						formatter: '{b}<br/>{c} (p / km2)'
					},
					toolbox: {
						show: true,
						orient: 'vertical',
						left: 'right',
						top: 'center',
						feature: {
							dataView: {
								readOnly: false
							},
							restore: {},
							saveAsImage: {}
						}
					},
					visualMap: {
						min: 800,
						max: 50000,
						text: ['High', 'Low'],
						realtime: false,
						calculable: true,
						inRange: {
							color: ['lightskyblue', 'yellow', 'orangered']
						}
					},
					series: [{
						name: '香港18区人口密度',
						type: 'map',
						mapType: 'HK', // 自定义扩展图表类型
						label: {
							show: true
	 					},
	                                       // center: [104.114129, 37.550339],//当前视角的中心点
						zoom: 1, //当前视角的缩放比例
						roam: true, //是否开启平游或缩放
						scaleLimit: { //滚轮缩放的极限控制
							min: 1,
							max: 5
						},
						data: [{//这个是自定义的数据，例如鼠标点上去显示的数据，
								name: '中西区',
								value: 20057.34
							},
							{
								name: '湾仔',
								value: 15477.48
							},
							{
								name: '东区',
								value: 31686.1
							},
							{
								name: '南区',
								value: 6992.6
							},
							{
								name: '油尖旺',
								value: 44045.49
							},
							{
								name: '深水埗',
								value: 40689.64
							},
							{
								name: '九龙城',
								value: 37659.78
							},
							{
								name: '黄大仙',
								value: 45180.97
							},
							{
								name: '观塘',
								value: 55204.26
							},
							{
								name: '葵青',
								value: 21900.9
							},
							{
								name: '荃湾',
								value: 4918.26
							},
							{
								name: '屯门',
								value: 5881.84
							},
							{
								name: '元朗',
								value: 4178.01
							},
							{
								name: '北区',
								value: 2227.92
							},
							{
								name: '大埔',
								value: 2180.98
							},
							{
								name: '沙田',
								value: 9172.94
							},
							{
								name: '西贡',
								value: 3368
							},
							{
								name: '离岛',
								value: 806.98
							}
						],
						// 自定义名称映射
						nameMap: {//这是和坐标json中的  properties.name一一对应
							'中西区': '中西区',
							'东区区': '东区',
							'离岛区': '离岛',
							'九龙城区': '九龙城',
							'葵青区': '葵青',
							'观塘区': '观塘',
							'北区区': '北区',
							'西贡区': '西贡',
							'沙田区': '沙田',
							'深水埗区': '深水埗',
							'南区': '南区',
							'大埔区': '大埔',
							'荃湾区': '荃湾',
							'屯门区': '屯门',
							'湾仔区': '湾仔',
							'黄大仙区': '黄大仙',
							'油尖旺区': '油尖旺',
							'元朗区': '元朗'
						}
					}]
				});
			});
		</script>
	</body>

</html>

效果显示：

其他省份或者国家，同理可得了：

例如效果：

没有做数据渲染，大同小异；

有些时候需要滚动鼠标进行缩放和放大操作：只截取一部分

series: [{
						name: '香港18区人口密度',
						type: 'map',
						// center: [104.114129, 37.550339],//当前视角的中心点
						zoom: 1, //当前视角的缩放比例
						roam: true, //是否开启平游或缩放
						scaleLimit: { //滚轮缩放的极限控制
							min: 1,
							max: 10
						},
}]

如有不解，请加java爱好群大家交流：852665736；大家一起交流，一同进步

来源：CSDN

作者：奔跑的java小白

链接：https://blog.csdn.net/qq_38310446/article/details/103842297

标签

地图

香港十八区