继续在上一篇文章的基础上，利用之前的数据处理方法统一了地层数据和断层数据的格式，本文结合GeoToolKit/INT组件，针对业务中经常提出的多种地质对象的组合解析与可视化需求，本文实现了不同地质年代地层的演化过程，并结合断层数据进行组合显示。
本篇主要阐述三维地层成果数据的可视化展示和初步的交互实现，包括前端、后端设计、地层数据及文件格式等内容。
1.前端设计与相关技术：主要采用VUE+JS+Geotoolkit.JS，充分利用VUE的组件化思想，以及Geotoolkit.JS的Contour和Fault组件的结合实现。这两种地质对象的可视化方式不同，主要体现为地层数据需要根据不同深度用不同颜色标尺进行，断层一般采用同一种颜色，支持不同透明度的可视化显示，所以，采取的设计实现方式都有所不同，详见示例效果图。
2.后端设计与相关技术：主要采用java spring框架或者NodeJS的微服务接口实现。为了便于js或java解析地层或断层数据，统一采用json格式，有时候需要做base64转码处理。本文示例都可支持。
java版代码
//获取指定地质年代的地层数据
@GetMapping("/getSurfaceJson")
public String getSurfaceJson(HttpServletRequest request) {
String displayName=request.getParameter("file");
//读取json数据
return JsonUtils.getJsonObjFromResource(displayName);
}nodejs版代码
//get方式返回json数据，这里用于返回指定地质年代的surface数据。
app.get('/data/json', (req, res) => {
let obj = url.parse(req.url,true).query;
var filename=obj.filename;//获取文件名
rf.readFile("data/"+filename,'utf-8',function(err,data){
if(err){
console.log("error");
res.send('')
}else{
res.send(data);//utf-8返回
// res.json(data); //json返回
}
});
})断层数据格式
[{"x":563586.5625,"y":5310937.0,"z":-2835.875},{"x":555671.6875,"y":5310325.5,"z":-2682.3477},
{"x":556280.5313,"y":5310325.5,"z":-2737.3779},{"x":556889.3438,"y":5310325.5,"z":-2757.8491}]3.功能简述：支撑一个地质年代地层或多个地质年代地层的动态加载显示，同时支撑地层与断层的组合加载与显示，支持动态调整颜色标尺，支持放大缩小移动等常规操作。
4.地层与断层数据组合显示示例效果
总结，后续在前端方面主要提升显示粒度，并增加更多的交互功能，继续优化后端的解析数据服务，配合前端进行大区域地层数据的分段加载与可视化，同时未来将支持更多的沉积与盆模软件的数据打通，实现多种类型地层数据的解析处理服务，希望对储层研究、数据解析、处理、传输和可视化交互等提供参考。
扫描二维码关注公众号，回复：
15317142 查看本文章
说明：这里的地层主要是研究目标区关注的层位。