ECharts地图数据压缩-ZigZag算法

ECharts地图数据压缩-ZigZag算法

开发过程中需要都echarts的地图数据进行压缩,经查找资料,发现echarts支持直接使用对GEOJson的coordinates进行 ZigZag压缩后的数据。
开始,尝试使用 mapshare-plus,但这个代码太老了,没有人维护,批量导出GEOJson格式文件的功能是坏的------可能大佬写着写着忘了。。。
修改之后,发现导出地图文件载入ECharts后有地图图形丢失的情况。。。
本人不是专业前端,无奈只有将加密方法单独摘出,万幸测试通过,没有问题

javaScript 复制代码
function convert2Echarts(rawStr) {
    let json = JSON.parse(rawStr);
	// Meta tag 不能删除,ECharts会识别不到
    json.UTF8Encoding = true;
	let features = json.features;
	features.forEach(function (feature) {
		let encodeOffsets = feature.geometry.encodeOffsets = [];
		let coordinates = feature.geometry.coordinates;
		if (feature.geometry.type === 'Polygon') {
			coordinates.forEach(function (coordinate, idx) {
				coordinates[idx] = encodePolygon(
					coordinate, encodeOffsets[idx] = []
				);
			});
		} else if (feature.geometry.type === 'MultiPolygon') {
			coordinates.forEach(function (polygon, idx1) {
				encodeOffsets[idx1] = [];
				polygon.forEach(function (coordinate, idx2) {
					coordinates[idx1][idx2] = encodePolygon(
						coordinate, encodeOffsets[idx1][idx2] = []
					);
				});
			});
		}
	});
	return JSON.stringify(json);
}

function encodePolygon(coordinate, encodeOffsets) {
	let result = '';

	let prevX = quantize(coordinate[0][0]);
	let prevY = quantize(coordinate[0][1]);
	// Store the origin offset
	encodeOffsets[0] = prevX;
	encodeOffsets[1] = prevY;

	for (let i = 0; i < coordinate.length; i++) {
		let point = coordinate[i];
		result += encode(point[0], prevX);
		result += encode(point[1], prevY);

		prevX = quantize(point[0]);
		prevY = quantize(point[1]);
	}

	return result;
}

function encode(val, prev) {
	// Quantization
	val = quantize(val);
	// var tmp = val;
	// Delta
	val = val - prev;

	// 估计是那时候浏览器的bug,我试了客户现场的浏览器,没发现这个问题,就删了,如果需要适配老机型的需要注意
	// if (((val << 1) ^ (val >> 15)) + 64 === 8232) {
		  //WTF, 8232 will get syntax error in js code
	//	  val--;
	// }
	// ZigZag
	val = (val << 1) ^ (val >> 15);
	// add offset and get unicode
	return String.fromCharCode(val + 64);
}

function quantize(val) {
	return Math.ceil(val * 1024);
}

压缩后的地图数据大概是这样:

最后记一个还有地图数据下载地址:阿里云GEOJson地图数据生成器

相关推荐
行走的陀螺仪5 分钟前
Sass 详细指南
前端·css·rust·sass
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ10 分钟前
React 怎么区分导入的是组件还是函数,或者是对象
前端·react.js·前端框架
LYFlied24 分钟前
【每日算法】LeetCode 136. 只出现一次的数字
前端·算法·leetcode·面试·职场和发展
子春一225 分钟前
Flutter 2025 国际化与本地化工程体系:从多语言支持到文化适配,打造真正全球化的应用
前端·flutter
QT 小鲜肉39 分钟前
【Linux命令大全】001.文件管理之file命令(实操篇)
linux·运维·前端·网络·chrome·笔记
羽沢311 小时前
ECharts 学习
前端·学习·echarts
LYFlied1 小时前
WebAssembly (Wasm) 跨端方案深度解析
前端·职场和发展·wasm·跨端
七月丶1 小时前
实战复盘:我为什么把 TypeScript 写的 CLI 工具用 Rust 重写了一遍?
前端·后端·rust
over6972 小时前
《闭包、RAG与AI面试官:一个前端程序员的奇幻LangChain之旅》
前端·面试·langchain