利用echart和echart-gl绘制江苏省的地图之一

利用echart和echart-gl绘制江苏省的地图之一

需求分析：

1. 新建一个画布并绘制3D江苏省的地图
2. 江苏省的每一个地级市配置背景颜色
3. 每个地级市的数据使用3D柱状图来展示，并显示出具体的数据
4. 根据每一个地级市的数据的取值范围标记颜色
   

1. 初始化配置

1.1 引入echarts、echarts-gl、江苏省的地图数据

import * as echarts from 'echarts' // echarts@v5.2.2
import echartGL from 'echarts-gl' // echarts-gl@v2.0.8
import jiangsu from '../assets/json/jiangsu.json' // 江苏省的地图数据

1.2 初始化echarts的参数配置

1.2.1 通过视觉映射组件来标记每个柱状图的颜色

// 是视觉映射组件
const visualMap = [{
	type: 'continuous',   // 连续型视觉映射组件
	show: false,          // 是否显示 visualMap-continuous 组件
	seriesIndex: 0,       // 指定取哪个系列的数据
	text: ['High', 'Low'],// 两端的文本
	calculable: true,     // 是否显示拖拽用的手柄
	max: 4000,            // 指定 visualMapContinuous 组件的允许的最大值
	// 定义 在选中范围中 的视觉元素
	inRange: {
		color: ['#87aa66', '#eba438', '#d94d4c'], // 图元的颜色的集合
	}
}]

1.2.2 使用三维地理坐标系组件绘制3D江苏省地图

1.2.3 通过 viewControl 控制视角的旋转、平移、缩放

// 用于鼠标的旋转，缩放等视角控制
const viewControl = {
	projection: 'perspective',  // 透视投影
	autoRotate: false,          // 是否开启视角绕物体的自动旋转查看
	autoRotateDirection: 'cw',  // 物体自转的方向: 从上往下看是顺时针方向
	autoRotateSpeed: 10,        // 物体自转的速度: 角度 / 秒
	autoRotateAfterStill: 3,    // 在鼠标静止操作后恢复自动旋转的时间间隔.在开启 autoRotate 后有效
	damping: 0.8,               // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于 0 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。
	rotateSensitivity: 1,       // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。
	zoomSensitivity: 1,         // 缩放操作的灵敏度，值越大越灵敏。
	panSensitivity: 1,          // 平移操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的平移灵敏度
	// panMouseButton: 'left',     // 平移操作使用的鼠标按键
	// rotateMouseButton: 'middle', // 旋转操作使用的鼠标按键
	// distance: 100,              // 默认视角距离主体的距离，在 projection 为'perspective'的时候有效。
	// minDistance: 40,            // 视角通过鼠标控制能拉近到主体的最小距离。
	// maxDistance: 400,           // 视角通过鼠标控制能拉远到主体的最大距离
	// orthographicSize: 100,      // 正交投影的大小。 projection 为'orthographic'的时候有效。
	// maxOrthographicSize: 20,    // 正交投影缩放的最大值。 projection 为'orthographic'的时候有效。
	// minOrthographicSize: 400,   // 正交投影缩放的最小值。 projection 为'orthographic'的时候有效。
	// alpha: 4,                   // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。
	// minAlpha: 5,                // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。
	// maxAlpha: 90,               // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。
	// beta: 4,                    // 视角绕 y 轴，即左右旋转的角度。
	// minBeta: -80,               // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。
	// maxBeta: 80,                // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。
	// center: [0,0,0],            // 视角中心点，旋转也会围绕这个中心点旋转
	animation: true,            // 是否开启动画。
	animationDurationUpdate: 1000,        // 过渡动画的时长。
	animationEasingUpdate: 'cubicInOut',  // 过渡动画的缓动效果。
}

1.2.4 设置每个地级市的标签

const label = {
	show: true,                   // 是否显示市
	textStyle: {
		borderWidth: 0,           // 文字的描边宽度。
		borderColor: '#fff',      // 文字的描边颜色。
		color: '#fff',            // 文字颜色
		fontSize: 12,             // 文字大小
		fontFamily: 'sans-serif', // 文字的字体系列。
		fontWeight: 'normal',     // 文字字体的粗细。
	}
}

1.2.5 设置每个地级市的样式

const itemStyle = {
	opacity: 1,
	color: 'rgb(5,101,123)', // 地图颜色
	borderWidth: 1,         // 分界线wdith
	borderColor: '#459bca', // 分界线颜色
}

1.2.6 设置每一个地级市的鼠标悬浮效果

const emphasis = {
	label: {
		show: true,           // 是否显示高亮
		textStyle: {
			color: '#000',      // 高亮文字颜色
			fontSize: 3,        // 文字的字体大小
		}
	},
	itemStyle: {
		color: '#0489d6'    // 地图高亮颜色
	}
}

1.2.7 设置地图的光照效果

const light = {
	// 场景主光源的设置
	main: {
		color: '#fff',          // 主光源的颜色
		intensity: 1.2,         // 主光源的强度
		shadow: false,          // 主光源是否投射阴影
		shadowQuality: 'high',  // 阴影的质量
		alpha: 55,              // 主光源绕 x 轴，即上下旋转的角度
		beta: 10,               // 主光源绕 y 轴，即左右旋转的角度
	},
	// 全局的环境光设置
	ambient: {
		color: '#fff', // 环境光的颜色
		intensity: 0.3  // 环境光的强度
	}
}

const geo3D = {
	map: '江苏',              // 地图类型。
	boxDepth: 80,            // 三维地理坐标系组件在三维场景中的深度
	// 用于鼠标的旋转，缩放等视角控制
	viewControl,
	// 标签的相关设置。
	label,
	// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等
	itemStyle,
	// 鼠标 hover 高亮时图形和标签的样式。
	emphasis,
	// 光照相关的设置。
	light
}

1.3 配置初始化的柱状图

const seriesBar3D = {
	name: 'bar3D',
	type: "bar3D",
	coordinateSystem: 'geo3D',  // 该系列使用的坐标系
	barSize: 1,                 // 柱子粗细
	shading: 'lambert',         // 三维柱状图中三维图形的着色效果。
	bevelSize: 0.3,             // 柱子的倒角尺寸。支持设置为从 0 到 1 的值。
	// 柱子的标签配置
	label: {
		show: true,
		formatter: function(data) {
			var res = data.name + " " + data.value[2]
			return res
		}
	},
	data: []
}

const options = {
  backgroundColor: 'rgba(128,128,128,0)',
  geo3D,
  series: [seriesBar3D]
}

1.3.1 定义每个地级市的具体数据

// 每个地级市的具体数据
const data = [
	{ name: '南京市', value: 3802 },
	{ name: '无锡市', value: 3802 },
	{ name: '徐州市', value: 3412 },
	{ name: '常州市', value: 3421 },
	{ name: '苏州市', value: 3802 },
	{ name: '南通市', value: 3432 },
	{ name: '连云港市', value: 3512 },
	{ name: '淮安市', value: 3802 },
	{ name: '盐城市', value: 3802 },
	{ name: '扬州市', value: 3802 },
	{ name: '镇江市', value: 3802 },
	{ name: '泰州市', value: 3612 },
	{ name: '宿迁市', value: 3802 },
]

1.3.2 定义每个地级市的省会的经纬坐标

// 每个地级市的省会的经纬坐标
const gdGeoCoordMap = {
	"南京市": [118.767413,32.041544],
	"无锡市": [120.301663,31.574729],
	"徐州市": [117.184811,34.261792],
	"常州市": [119.946973,31.772752],
	"苏州市": [120.619585,31.299379],
	"南通市": [120.864608,32.016212],
	"连云港市": [119.178821,34.600018],
	"淮安市": [119.021265,33.597506],
	"盐城市": [120.139998,33.377631],
	"扬州市": [119.421003,32.393159],
	"镇江市": [119.452753,32.204402],
	"泰州市": [119.915176,32.484882],
	"宿迁市": [118.275162,33.963008],
}

1.3.3 处理地级市的数据和坐标

// 处理地级市的数据和坐标
function convertData() {
	var res = []
	for (var i = 0; i < data.length; i++) {
		var geoCoord = gdGeoCoordMap[data[i].name]
		if (geoCoord) {
			res.push({
				name: data[i].name,
				value: geoCoord.concat(data[i].value)
			})
		}
	}
	return res
}

1.3.4 声明画布

// 声明
var echart = null
// 创建画布
function createMap() {
	echart = echarts.init(document.getElementById('echarts'), {
		width: document.documentElement.clientWidth,
		height: document.documentElement.clientHeight
	})
	echarts.registerMap('江苏', jiangsu)
	options.series[0].data = convertData(data)
	echart.setOption(options)
	echart.on('click', function(params) {
		console.log(params)
	})
}

2. 存在的问题

1. echarts@v5.2.2 和 echarts-gl@v2.0.8 组合创建的江苏省地图中每个地级市的 label 的字体颜色无法改变。
2. echarts@v5.2.2 和 echarts-gl@v2.0.8 组合创建的江苏省地图中在每个地级市区域无法触发click事件，但是每个地级市中的柱状图可以触发click事件，如果采用如下方式不使用geo3D而是使用map3D绘制江苏省地图，可以在每个地级市区域触发click事件：

const options = {
	series: [
		{
			type: 'map3D',
			map: '江苏',
			itemStyle: {...},
			data: [...]
		}
	]
}

3. echarts-gl 绘制的地图中无法放置彩色图片
4. ecahrts-gl 中的scatter3D的symbol绘制的图形只有'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'和通过 'path://' 将图标设置为任意的矢量路径,这集中方式，而且还都是2d的平面图。