ECharts合并地图上的区域

对于某些特定需求，官方下载的地图数据可能并不能完全满足。例如，要求显示中国地图，但需要将山东江苏和浙江这3个省合并起来，显示“东部区域”。其他省份不变。

于是就需要对官方提供的地图数据进行修改。

一个思路是借助第三方工具，生成新区域的轮廓点，然后删除原来的3个区域。例如http://geojson.io/就提供了这样一种方式。但这样费时费力，且精度无法保证。

实际上，直接将这三个省的轮廓点合并即可。

对于地图，使用json格式引入：

$.get('js/china.json', function(chinaJson) {
	echarts.registerMap('china', chinaJson);
	var chart = echarts.init(document.getElementById('main'));
	chart.setOption({
		series: [{
			type: 'map',
			map: 'china'
		}]
	});
});

其中引入的json会解析为参数chinaJson。而一个地图的json格式如下：

{
	"type": "FeatureCollection",
	"features": [
		{
			"type": "Feature",
			"id": "01",
			"properties": {
				"name": "辽宁",
				"cp": [文本经纬度坐标]//先经度后纬度，保留到小数点后六位
			},
			"geometry": {
				"type": "Polygon",
				"coordinates": [[
						[坐标对0], [坐标对1]...//同cp属性
					]
				]
			}
		},
		{省份2},
		{省份3},
		...
	]
}

可见，每个省的数据主要包含在两个属性中：properties和geometry。

properties用于设置显示的文本和文本的位置。

geometry绘制地图一定是用的Polygon，其coordinates属性是所有坐标点对的集合。然而，考虑到一个完整的区域可能并不相连，例如群岛等，所以coordinates其实是一个二维数组，也就是一个Polygon的一维数组。其含义是一个区域是由多个Polygon构成，而每个Polygon是由多个点构成。

于是，我们要合并山东江苏和浙江这3个省，那么只需要将这3个省的Polygon都放到同一个coordinates数组中即可。

// 合并多个省为一个
var mergeProvinces = function(chinaJson, names, properties) {
	var features = chinaJson.features;
	var polygons = [];
	// 将指定省的polygon保存下来，并将省的数据从地图中删除
	for(var i = 0, iLen = names.length; i < iLen; i++) {
		for(var j = 0, jLen = features.length; j < jLen; j++) {
			if(features[j].properties.name == names[i]) {
				polygons = polygons.concat(features[j].geometry.coordinates);
				features.splice(j, 1);
				break;
			}
		}
	}
	// 构建新的合并区域
	var feature = {
		type: "Feature",
		id: "" + features.length,
		properties: {
			name: properties.name || ""
		},
		geometry: {
			type: "Polygon",
			coordinates: polygons
		}
	};
	if(properties.cp) {
		feature.properties.cp = properties.cp;
	}

	// 将新的合并区域添加到地图中
	features.push(feature);
};

$.get('js/china.json', function(chinaJson) {
	var params = {
		names: ["山东", "江苏", "浙江"],
		properties: {
			name: "东部区域",
			cp: [
				119.553222,
				33.724339
			]
		}
	};

	mergeProvinces(chinaJson, params.names, params.properties);

	echarts.registerMap('china', chinaJson);
	var chart = echarts.init(document.getElementById('main'));
	chart.setOption({
		series: [{
			type: 'map',
			map: 'china'
		}]
	});
});

这样，在地图引入后就对区域进行了合并与删除，那么后续的操作跟正常引入的地图就相同了。

另外，关于地图上的坐标点，使用的是常规的经纬度。坐标对的x为经度，y为纬度。

要想查看某个地点的具体经纬度，可以借助各种在线网站，例如：http://www.gpsspg.com/maps.htm

ECharts合并地图上的区域

猜你喜欢