基于GeoToolKit实现连井剖面对比显示及交互

最近基于GeoToolkit实现单井或多井的柱状图的显示和交互，特别是多井的连通对比分析，很多功能GeoToolkit原来是没有的。因此需要拓展了GeoToolKit的许多功能。本文主要基于GeoToolKit/INT组件，针对多井的测井曲线、岩性剖面、含油气性和射孔井段等进行对比分析展示。因此本次主要基于WellLogWidget实现多井的测井曲线、解释结论和岩性剖面的显示，以及连通性对比，同时支持用户拖动鼠标实现整口井井道的移动，连通性删减等交互操作。具体如下。其中的前后端内容详见之前文章。

1.多井连通性对比效果演示

2.核心代码

主要采用VUE+JS+GeotoolKit.JS，充分利用VUE的组件化设计思想，实现多井多通道剖面显示和连通性交互操作等。

MultiWellDrag.vue

复制代码

<template>  
  <div>    
  <canvas ref="plot" style="display:block;margin:0 auto;height:900px;position:relative;"  
    />  
  </div>
</template>    
<script>  
import {createScene, setupDragInteraction, setupZoneConnectionInteraction, createConnectionContext} from './MultiWellDrag.js';  
  
let plot = null;  
let disposeDrag = null;  
let disposeZoneConn = null;  
export default {  
  name:'wellMultiDrag',  
  destroyed () {  
    if (disposeDrag) {  
      disposeDrag();  
      disposeDrag = null;  
    }  
    if (disposeZoneConn) {  
      disposeZoneConn();  
      disposeZoneConn = null;  
    }  
    plot.dispose();  
  },  
  mounted () {  
    const canvas = this.$refs.plot;  
    // 用容器实际宽度设置 canvas 像素宽，保证三口井铺满屏幕；高度固定 900    // 1.绘制单井曲线道和油气属性道  
    const containerWidth = canvas.parentElement.clientWidth || window.innerWidth;  
    console.log('containerWidth', containerWidth);  
    canvas.width = containerWidth;  
    canvas.height = 900;  
    const scene = createScene(canvas);  
    plot = scene.plot;  
    // 创建连接上下文，在拖拽交互与连接交互之间共享连接关系  
    const connectionContext = createConnectionContext();  
    // 2.启用井道拖拽交互：按住鼠标左键拖动单井 header，整体移动 WellLogWidget；  
    //   拖动时连接 zone 跟随移动，连接关系不变  
    disposeDrag = setupDragInteraction(plot, canvas, scene.widgets, connectionContext);  
    // 3.启用 zone 连接交互：点击一口井的 zone 再点击另一口井的 zone 自动连通  
    disposeZoneConn = setupZoneConnectionInteraction(  
      plot, canvas, scene.wellConfigs, scene.widgets,  
      scene.wellWidth, scene.gap, scene.headerHeight, canvas.height, scene.zoneWellColors,  
      connectionContext  
    );  
  }  
};  
</script>

MultiWellDrag.js

复制代码

function createScene (canvas) {  
    // 创建根 Group 容纳多个 WellLogWidget    const root = new Group();  
    root.setAutoModelLimitsMode(true);  
  
    const { widgets, wellWidth, gap, wellConfigs, headerHeight, zoneWellColors } = createWidgets(canvas.width, canvas.height);  
    widgets.forEach(w => root.addChild(w));  
  
    // // 在井间空白区域绘制连通性多边形  
    // addCorrelationZones(root, wellConfigs, widgets, wellWidth, gap, headerHeight, canvas.height, zoneWellColors);  
  
    const plot = new Plot({  
        'canvasElement': canvas,  
        'root': root  
    });  
  
    // 将每个 WellLogWidget 的内置工具（含 track splitter）注册到 Plot 的工具容器，  
    // 使各井道的分隔线可拖拽调整宽度  
    try {  
        const plotTool = plot.getTool();  
        widgets.forEach(w => {  
            plotTool.add(w.getTool());  
        });  
    } catch (e) {  
        console.warn('注册 widget 工具失败:', e);  
    }  
  
    return { plot, widgets, wellWidth, gap, wellConfigs, headerHeight, zoneWellColors };  
}
/**  
 * 创建连接上下文：在拖拽交互与连接交互之间共享连接关系数据。  
 * setupZoneConnectionInteraction 负责注册连接和更新函数，  
 * setupDragInteraction 在拖动井道时调用更新函数让连接 zone 跟随移动。  
 */  
function createConnectionContext () {  
    return {  
        connections: [],  
        updateConnectionsForWidget: null,  
        updateAllConnections: null,  
        isDragging: false, // 拖拽进行中标记，bounds 监控时跳过避免重复更新  
        addConnection (conn) {  
            this.connections.push(conn);  
        },  
        getConnectionsForWidget (widgetIndex) {  
            return this.connections.filter(function (c) {  
                return c.s1.widgetIndex === widgetIndex || c.s2.widgetIndex === widgetIndex;  
            });  
        }  
    };  
}
......后续代码需要请联系。