Web Worker 在 WebGL 地图引擎中的实践|第一期

Web Worker 在 WebGL 地图引擎中的实践|第一期  作者：J

【Web Worker 扫盲】

Web Worker 对于前端开发人员来说一定不陌生，即使没有在实际项目中使用过，那么也一定有所了解。Web Worker 是为了解决 JavaScript 在浏览器环境中没有多线程的问题。支持 Web Worker 的浏览器会额外提供一个 JavaScript Runtime 供 Web Worker 使用。需要注意的是在 Web Worker 中不能使用和访问 DOM 元素，也访问不到 Window 对象。它的最佳使用场景是执行一些开销较大的数据处理或计算任务。

Web Worker 使用起来非常简单，在“主线程”中执行如下操作即可创建一个 Worker 实例，通过监听 onmessage 事件获取消息，通过 postMessage 发送消息：

var worker = new Worker('worker.js');
worker.onmessage = function (e) {
  
    var data = e.data;
}
worker.postMessage(['message']);

worker.js 中的代码如下：

self.onmessage = function(e) {
  
    var messages = e.data;
    var workerResult = {};
    // do something
    ...
    postMessage(workerResult);
}

“主线程”和Worker 之间通过 postMessage 发送消息，通过监听 onmessage 事件来接收消息，从而实现二者的通信。

【为什么使用 Web Worker】

在对 Web Worker 进行了简单扫盲之后，接下来说说为什么要在 WebGL 地图引擎中使用它。熟悉 WebGL 或者 OpenGL 的会知道，不论多么复杂的图形或模型，最终都是由若干三角形组成，地图也不例外。地图上表示绿地、水系的面以及各种道路最终都需要通过三角形来描述，所以在绘制之前我们需要对原始数据进行如下加工：

 

线的处理过程示意：