背景:
后端传输给我大量的geojson数据,造成卡顿。大的时候为500w+字节数
优化方向:后端将JSON转化为二进制文件并压缩然后发给前端。
前端如何处理:
//定义websocket
const socket = new WebSocket('ws://192.168.2.206:8002/getModelData?pushType=realtime&displayType=2D');
socket.binaryType = 'arraybuffer' // 设置消息类型为二进制
socket.addEventListener('message', event => {
const arrayBuffer = event.data;
const inflate = new pako.Inflate({ to: 'string' });
inflate.push(arrayBuffer);
if (inflate.err) {
console.error(inflate.msg);
return;
}
const jsonString = inflate.result;
const data = JSON.parse(jsonString);
map.getSource('route').setData(data);
});
用到的依赖为pako.js库地址为在线cdn地址
也可以使用npm下载 npm install pako
然后使用
import pako from "pako";
//arrayBuffer为websocket传过来的文件
if (arrayBuffer) {
const inflate = new pako.Inflate({ to: "string" });
inflate.push(arrayBuffer);
if (inflate.err) {
console.error(inflate.msg);
return;
}
const jsonString = inflate.result;
const data = JSON.parse(jsonString);
//data为转化后的json
}
需要注意 定义websocket实例后一定要加上socket.binaryType = 'arraybuffer'
这行代码