ECharts 渲染中欧视图（中国在左，欧洲在右）

本来上传了一份 world.js 到 CSDN。但是想着 CSDN 自动涨积分的机制就干脆再写一篇博客，以帮助那些真正需要的人。 已经摸索会了禁止自动涨积分。下载地址见链接： （https://download.csdn.net/download/x1020915098/12871308）

首先你需要一份 world.json 数据。如果没有：请移步至 ECharts 常见问题 寻找下载 world.json 的方法。

中欧视图

现在网上的大多数世界地图基本全是以欧洲为中心的，不太适合我们国内开发。其实这个时候转也很方便，只需要通过 js 代码将所有的点坐标按照一定的算法进行平移即可。

下面是我的部分代码，大家可以参考一下，如有疑问可留言讨论。（与 -30 比较是因为这个经度纵向经过的区域少，就“格陵兰”一个，方便修复）：

/**
* 初始化 Echarts
 */
initEcharts() {
	const that = this;

	this.echartsInstance = echarts.init(document.getElementById('geocanvas'));
	// 显示加载动画
	this.echartsInstance.showLoading();
	// 获取地图数据并渲染
	fetchWorldJson().then(geojson => {
		let fixPlaces = ['格陵兰', 'Greenland'];
		// 欧洲视图 转为 中欧视图（中国在左，欧洲在右）
		let features = geojson.features;
		for (let i = 0, length = features.length; i < length; ++i) {
			let feature = features[i];
			let geometry = feature.geometry;
			let coordinates = geometry.coordinates;
			if (fixPlaces.includes(feature.properties.name)) {
				continue;
			}
			if (feature.properties.cp) {
				feature.properties.cp[0] = feature.properties.cp[0] >= -30 ? feature.properties.cp[0] - 180 : feature.properties.cp[0] + 180;
			}
			if (feature.properties.center) {
				feature.properties.center[0] = feature.properties.center[0] >= -30 ? feature.properties.center[0] - 180 : feature.properties.center[0] + 180;
			}
			for (let j = 0, length = coordinates.length; j < length; ++j) {
				let coordinate = coordinates[j];
				for (let k = 0, length = coordinate.length; k < length; ++k) {
					if (coordinate[k].length > 2) {
						for (let m = 0, length = coordinate[k].length; m < length; ++m) {
							coordinate[k][m][0] = coordinate[k][m][0] >= -30 ? coordinate[k][m][0] - 180 : coordinate[k][m][0] + 180;
						}
					} else {
						coordinate[k][0] = coordinate[k][0] >= -30 ? coordinate[k][0] - 180 : coordinate[k][0] + 180;
					}
				}
			}
		}
		// 注册地图
		echarts.registerMap('WorldMap', geojson, {
			'Greenland': {
				left: 110,
				top: 60,
				width: 60
			}
		});
		this.echartsInstance.setOption(this.option);
		// 隐藏加载动画
		this.echartsInstance.hideLoading();
		// 请求初始数据
		this.mapView.toLowerCase() === 'world' ? this.getWorldGisDot() : this.getChinaGisDot();
	}).catch(err => {
		console.error("[MapEcharts.vue] 渲染地图失败！", err);
	});
}