最近基于GeoToolkit实现单井或多井的柱状图的显示和交互特别是多井的连通对比分析很多功能GeoToolkit原来是没有的。因此需要拓展了GeoToolKit的许多功能。本文主要基于GeoToolKit/INT组件针对多井的测井曲线、岩性剖面、含油气性和射孔井段等进行对比分析展示。因此本次主要基于WellLogWidget实现多井的测井曲线、解释结论和岩性剖面的显示以及连通性对比同时支持用户拖动鼠标实现整口井井道的移动连通性删减等交互操作。具体如下。其中的前后端内容详见之前文章。1.多井连通性对比效果演示2.核心代码主要采用VUEJSGeotoolKit.JS充分利用VUE的组件化设计思想实现多井多通道剖面显示和连通性交互操作等。MultiWellDrag.vuetemplate div canvas refplot styledisplay: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 ); } }; /scriptMultiWellDrag.jsfunction 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; }); } }; } ......后续代码需要请联系。