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地图数据生成器