基于GeoToolkit/INT实现二维等值线图绘制示例

       继续在上一篇文章的基础上，利用相同的数据处理方法统一了地层数据和断层数据格式，本文主要基于GeoToolkit/INT组件，针对地质专业经常用到的地层数据解析和二维等值线（等高或等深线）可视化需求，本示例实现了不同地质年代地层的三种类型快速可视化，详细效果如下。

本篇主要阐述地质研究形成的地层数据解析与可视化交互显示，包括前端、后端设计等内容。

1.前端设计与相关实现代码：主要采用VUE+JS+Geotoolkit.JS，充分利用VUE的组件化思想，以及Geotoolkit.JS的ContourShape和ContourFaultList组件结合实现。具体前端代码如下，示例效果图详见第3部分。

vue组件

<script>
// 绘制二维等值线图
import {createScene} from './simpleContourShape';
let plot = null;
export default {
    name:"simpleContourShape",
    destroyed () {
        plot.dispose();
    },
    mounted () {
        plot = createScene(this.$refs.plot);
    }
};
</script>

js组件

import {createModelLimits, makeContourPlot, MODE} from './contourShapeCommon';

//绘制整体场景，先设置模型范围，再绘制具体的对象。
function createScene (canvas) {
    const left = 38;
    const bottom = 41;
    const right = 54;
    const top = 46;
    // 设置模型范围
    const modelLimits = createModelLimits(left,bottom,right,top);

    //绘制对象
    return makeContourPlot(canvas, modelLimits, right, top, MODE.Shape);
    // return makeContourPlot(canvas, modelLimits, right, top, MODE.ColoredIsolines);
    // return makeContourPlot(canvas, modelLimits, right, top, MODE.ShapeWithSingleIsoline);
}
export {createScene};

解析和绘制contour的js公共组件

//设置模型左上--》右下边界范围
const createModelLimits = function (left, bottom,right,top) {
    return new Rect(left, bottom,right, top);
};
//对外部组件提供的绘制contour的接口，用于绘制contourShape，并将其加入的group中，将group作为plot的根对象返回。
function makeContourPlot (canvas, modelLimits, xSize, ySize, mode) {
    // Create contour shape
    const contourShape = buildContourShape(modelLimits, xSize, ySize, mode)
        .setBoundingBox(modelLimits);
    // Create a group to hold the contourShape
    const group = new Group()
        .setModelLimits(modelLimits)
        .addChild(contourShape)
        .setVerticalFlip(true)
        .setFillStyle(ColorUtil.parseColor('white'));
    // Create a Plot object from the canvas and group
    return new Plot({
        'canvasElement': canvas,
        'root': group
    });
}
surface.contour = null;
//contour明码数据解析，详见surfaces2.json
function getContour() {
    if (surface.contour == null) {
        surface.contour = [];
        for (let k = 0; k < SurfaceData.length; k++) {
            surface.contour.push(SurfaceData[k]);
        }
    }
    return surface.contour;
};
//主要方法，用于构建fault和grid，grid里面有contour
const buildContourShape = function (modelLimits, xSize, ySize, mode) {
    // Create faults
    const faults = createFaults(modelLimits);
    // Create grid
    const grid = createGrid(xSize, ySize);
    // Create contour shape
    const contour = new ContourShape()
        .setGrid(grid)
        .setScale(scale)
        .setFaultsList(faults)
        .setSmoothingIsolines(true)
        .setSuppressIntersectingLabels(true)
        .setSmoothingLabels(true)
        .setFillStyle(ColorUtil.parseColor('blue'));
    return contour;
};
//构建Grid，Grid中包含了Contour，Grid必须从0开始绘制
const createGrid = function (xSize, ySize) {
    const grid = new ContourRectangularGrid();
    grid.setRange(new GridRange(0,0,xSize,ySize));
    //为了将坐标转换到grid设置的模型范围，用到的倍数关系
    const num=10000;
    //获取Contour数据，line是一个三维数组，第一层为每一段的contour、第二层为每一段的x点数组，y点数组，z数组，第三层为具体的x，y和z的array
    const lines = getContour();
    let xmin,xmax,ymin,ymax;
    xmin=xmax=ymin=ymax=0;
    //1.方法一：实现将x-array，y-array,z-value赋值给grid
    for (let i = 0; i < lines.length; i++) {
        // grid.setData(lines.at(0).x, lines.at(0).y, lines.at(0).z);
        // grid.setData(lines.at(i).x, lines.at(i).y, lines.at(i).z);
        for(let j=0;j<lines.at(i).x.length;j++){
            //获取x和y的最小值和最大值
            if((i==0) && (j==0)){
                xmin=lines.at(i).x[j];
                ymin=lines.at(i).y[j];
                xmax=xmin;
                ymax=ymin;
            }
            if(xmin>lines.at(i).x[j]){
                xmin=lines.at(i).x[j];
            }
            if(xmax<lines.at(i).x[j]){
                xmax=lines.at(i).x[j];
            }
            if(ymin>lines.at(i).y[j]){
                ymin=lines.at(i).y[j];
            }
            if(ymax<lines.at(i).y[j]){
                ymax=lines.at(i).y[j];
            }
            //将每个散点值赋值给grid。
            grid.setValue( Math.floor(lines.at(i).x[j]/num),  Math.floor(lines.at(i).y[j]/(num*10)),  Math.floor(lines.at(i).z));
        }
    }
    return grid;
};
export {createModelLimits, makeContourPlot, MODE};

2.后端设计与相关技术：主要采用java spring框架或者NodeJS的微服务接口实现。为了便于js或java解析地层或断层数据，统一采用json格式，有时候需要做base64转码处理。代码详见 上一篇文章，后端代码、服务方式和调用方式和数据文件格式类似。

3.地层与断层数据组合显示示例效果

等值线图（包括线，填充和深度文字标识）

等值线图（包括线和深度文字标识）

等值线图（包括线，填充，深度文字标识和线型个性化）