基于GeoToolKit/INT完成不同年代地层与断层的可视化组合显示示例

原创

已于 2023-05-09 17:44:07 修改 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #java #python #后端

于 2023-05-09 17:34:47 首次发布

文章介绍了使用Vue.js和GeoToolKit.JS结合JavaSpring或NodeJS微服务实现三维地层数据与断层数据的可视化展示和交互。前端利用Vue的组件化和Geotoolkit.JS的Contour与Fault组件，后端则通过JSON格式处理数据。功能包括动态加载、颜色标尺调整和常规操作。未来计划增强显示粒度和交互性，支持更多数据源。

继续在上一篇文章的基础上，利用之前的数据处理方法统一了地层数据和断层数据的格式，本文结合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版代码