使用seisplotjs框架读取mseed文件绘制地震波形图

由于需要将mseed文件的波形图显示在前端页面，查了好多内容后发现了这个框架可以实现这个功能。

1.首先读取mseed文件

在这里由于不能在浏览器直接读取文件系统的内容，所以我用到了node写了一个后台服务接口，这个接口使用了express库和fs库实现了文件读取功能，并将内容通过http的形式发送到前端页面上。

const express = require('express');
const fs = require('fs');

const app = express();

app.get('/api/wave', (req, res) => {
  res.setHeader('Access-Control-Allow-Methods', 'GET')
  const mseedDataBuffer = fs.readFileSync('public/Sichuan.mseed');
  res.send(mseedDataBuffer);
})

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在前端页面上，利用axios库接收数据，具体代码如下：

axios.get('http://localhost:3000/api/wave', {
                responseType: 'arraybuffer'
            })
                .then(response => {
                    var abRaw = response.data;
                    ....
            })
                .catch(error => {
                    // 处理错误
                });

2.构建Seismogram对象

从后端拿到的数据是ArrayBuffer形式的数据，该数据需要通过miniseed库的方法转换为Datarecord对象。接着根据DataRecord对象数组创建SeismogramSegment对象。根据这个对象还需要生成Seismogram对象，这个对象是用于渲染波形图的输入参数之一。另外一个参数是配置参数对象。

const parsed = sp.miniseed.parseDataRecords(abRaw);
const serseismogramSegment = sp.miniseed.createSeismogramSegment(parsed);
const serseismogram = new sp.seismogram.Seismogram(serseismogramSegment);

通过下述代码可以配置波形图参数对象

let seisConfig = new sp.seismographconfig.SeismographConfig();
seisConfig.linkedTimeScale = new sp.scale.LinkedTimeScale();
seisConfig.linkedAmplitudeScale = new sp.scale.LinkedAmplitudeScale();
seisConfig.wheelZoom = true;
// snip start gain
seisConfig.doGain = false;

3.绘制波形图

得到seisConfig和Seismogram对象后，就可以根据这两个对象作为输入参数绘制波形图，具体操作如下。

//绘制
let div = document.querySelector('div#myseismograph');

首先选择到对应的标签，在该标签上进行内容渲染。

<div id="myseismograph">
</div>

接下来进行绘制。

let sddA = sp.seismogram.SeismogramDisplayData.fromSeismogram(serseismogram);
let graphZ = new sp.seismograph.Seismograph([sddA], seisConfig);
div.appendChild(graphZ);

这样子就完成了波形图的绘制。具体效果如下：

以上就实现了mseed文件绘制地震波形图的功能，该功能只是一个简易的例子展示，具体拓展还需要查看seisplotjs的官方文档进行学习。

Seisplotjs 3.1 API Documentation (crotwell.github.io)

另外，本文只实现了mseed文件，有些需求要seed文件实现也可以一起交流学习，seed文件跟mseed文件的内容只有在头部会有些许区别，对seed文件的内容进行修改后应该是可以通过该框架实现相同功能。