Echarts_map(一) 使用echarts地图的要点整理

Echarts_map(一) 使用echarts地图的要点整理

---

前言

背景

近段时间,大量的接触echarts,整理一下知识点,巩固学习;

Echarts 相关链接

Echarts官方文档
Echarts社区

Echarts_map使用要点

• GeoJson的使用;
• option-geo的使用;
• option-#series
  • map 地图基础,数值对应地图
  • lines 地图轨迹线
  • scatter 地图标注点
  • effectScatter 地图闪动标注点
• 不同地图GeoJson对应的nameMap;
• 数据处理函数;
• 点击交互事件(地图下钻);
• 百度地图为底图的echarts;
• 3D地图-WEB GL;

入门

最简单的江苏地图

$.getJSON("json/jsGeoJson/jiangsu.json", function(geoJson) {//#1
	echarts.registerMap('江苏', geoJson);//#2
	let option = {
		series: [
			{
				name: '江苏地图',
				type: 'map',
				mapType: '江苏',//#3
				itemStyle:{
				    normal:{label:{show:true}},
				    emphasis:{label:{show:true}}
				},
				data:[{name: '南京', value: 100}],//#4
				nameMap: {'南京市': '南京'}//#5
			}
		]
	}
	mapChart.setOption(option);
})

代码备注:

• #1 json/jsGeoJson/jiangsu.json 读取江苏地图的GeoJson; (下面内容会相对详细的介绍GeoJson);
• #2 在echarts中注册名为江苏的地图名称,和#3:series[0].mapType 对应;
• #4 series[0].data主要存放每个行政区对应的值其中name属性对应GeoJson中#6:features[].properties.name
• #5 很多时候数据库存储的行政区名称和GeoJson的行政区名称不一样,例如南京市和南京,US和美国等等,nameMap就是解决这个问题的方法之一,也可以在数据处理的函数,直接改后端传来的数据(让后端改好传过来?也行吧);

GeoJson

GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法的地理空间信息数据交换格式。

我们常用的GeoJSON实际是描述行政区边界的json,实际上本来echarts是提供对应的json,后来百度官方下了,我们只能自己搜集相关json文件了;

下面是最简单的GeoJSON

{
  "type": "FeatureCollection",
  "features": [
        {
        	"type": "Feature",
        	"properties": {
        		"name": "行政区名称",//#6
        		"id": "行政区ID"
        	},
        	"geometry": {
        		"type": "MultiPolygon",
        		"coordinates": [
        			[
        				[
        					[119.917345, 31.753843],
        					[119.891998320313, 31.7478542304688],
        					[119.853077421875, 31.7734767890625],
        					[119.867345, 31.833843],
        					[119.873985625, 31.8372023750001],
        					[119.881422148438, 31.851899640625],
        					[119.91062625, 31.83712425],
        					[119.925201445313, 31.8083132148438],
        					[119.947345, 31.803843],
        					[119.959268828125, 31.7798561835938],
        					[119.920704375, 31.760483625],
        					[119.917345, 31.753843]
        				]
        			]
        		]
        	}
        }
    ]
}