REGION INFO    数字地方
摘要：HTML5作为目前主流的Web前端开发技术以前，油田勘探开发在地质图形数据可视化方面，大多采用基于ActiveX、Flash、Silverlight等控件和XML模板定制相结合的方式，将控件嵌入到Web网页中进行曲线图形绘制，基本上都存在特定场景单独开发，控件重用性差，后期运维难度大的现状。论文研究目的就是使用HTML5原生接口，在Canvas API基础上设计一套测井曲线、综合录井图、栅状图及油藏剖面图等地质图形可视化前端组件，通过与WebAPI数据服务接口相结合，使开发人员用最少的开发代价实现油田地质图形的前端交互可视化展示，解决以往需要下载安装控件、难以跨平台、跨浏览器、存在不安全隐患以及在信息统计分析和交互能力上存在明显的缺陷等问题。
关键词：HTML5；Canvas；WebAPI；JavaScript；数据可视化；前后端分离
HTML5作为Web前端开发的新标准超文本标记语言，为开放Web平台及跨平台的Web应用提供了强有力的技术支持。它具有本地存储、图形绘制、离线应用、地理坐标定位、图像处理等特性。HTML5 主要有2个2D 图形技术，即 Canvas 和 SVG。Canvas是用JavaScript 操作动态生成，SVG 则是使用XML静态描述生成，Canvas 是基于位图，图片放大会影响到显示的效果，SVG 是基于矢量图，图形放大不会影响到显示效果[1]。两者适用的场景不太相同，比如Canvas做应用程序或游戏的较多，适合像素处理，动态渲染和大数据量绘制，SVG由于无法满足复杂绘图和在线绘图的需求，不适合动态渲染和大数据量绘制，适合地图展示，高保真文档查看和打印等应用场景。svg图形
一、Canvas绘图技术
Canvas最初是由苹果公司内部使用自己的Mac OS X WebKit推出，苹果公司大力推广使用HTML5，促进了Canvas的发展和应用，为Web图形提供更快和更新的实现方法。Canvas就是一个置身于浏览器中的画布，也是一个带有绘图API的图像元素，能表示一个在页面上即时渲染的位图区域，它本身没有绘图能力，只是通过JavaScript调用Canvas API就能方便的在Web页面上进行图形的绘制和处理，提供了大量图形绘制函数，能够完成任何图形的绘制，还可以进行大量数据的复杂图形的在线绘制[2-3]。Canvas还有更吸引人的地方，一是交互能力方面，在Canvas之前，基于B/S的客户端绘图很难实现，虽然简单的绘图可以通过JQuery、JavaScript等脚本来完成，但是交互复杂的绘图操作就需要借助第三方插件来实现。Canvas可以有效地解决复杂交互图形绘制的问题，非常适合于如测井曲线道、线的选择、填充、拖动、增删等操作，在Web页面上创建完整的应用程序。二是Canvas图形绘制的JavaScript脚本代码是能够被压缩和缓存，这样可以大幅度地减少带宽的占用。三是Canvas是基于像素级的即时模式图形系统，绘制完成后不保存对象到内存中，这样使用Canvas就可以获得快速的绘图速度，用户体验会比较好。
二、图形元素封装
基于HTML5的数据可视化的方法是基于数据驱动，采用HTML5提供的API借助浏览器的支持，在客户
端实现的绘图的可视化技术。数据驱动依靠服务器端提供数据，依靠WebAPI接口，向浏览器传输数据，数据的传输格式为Json，采用Http协议使用POST方式与服务器端通讯。浏览器收到服务器端数据使用Canvas元素和JavaScript 在网页上绘制测井综合、录井综合、油藏剖面等图形，并与前端UI框架共享一个组件管理器，方便组件之间的通讯并进行交互操作。由于图形绘制是基于浏览器方式，所以这种方法可以跨平台使用，对于智能手机和平板电脑，只要系统里安装支持Canvas浏览器就可以绘制图形[4]。
（一）Canvas基础绘图API封装 
在Canvas提供的图形绘制接口的基础上，通过对原生绘图方法的封装，为以后地质图形绘制打好基础。这项基础绘图类还可以使用ZRender、KineticJs等图形类库来完成，ZRender是轻量级Canvas类库，ZRender提供涵括了几乎所有Canvas方法并对它们进行了良好的封装，并提供简单易用的接口，让开发者轻而易举的实现自己想要的图形效果，比如直接使用Canvas去画贝塞尔曲线比较繁琐，使用ZRender.js时只需提供画布的两个对角线为起止点坐标，同时配置绘图画线颜stroke和线宽度lineWidth，就可以创建一个贝塞尔曲线实例。
基于H T M L5的油田地质图形数据可视化方法研究
黄    术    田文军    杨建楠
◆
信息系统工程 │ 2020.10.20
12

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。