[发明专利]一种基于相机切换实现Web三维地图多视图显示的方法

权利要求书

1.一种基于相机切换实现Web三维地图多视图显示的方法，包括如下步骤：

步骤1，创建主视图、各分视图所需的网页div元素、画布和对象；

步骤2，进入帧循环后，修改绘制函数，在帧循环中添加分视图离屏绘制；

步骤3，从帧缓冲区对象读取绘制内容保存成图片，获取分视图画布的2D绘图上下文，将保存的图片绘制到2D绘图上下文，实现分视图显示；

步骤4，对各分视图进行步骤2和步骤3的操作，直到所有分视图显示完成。

2.根据权利要求1所述的方法，其特征在于，步骤1包括：

步骤1-1，创建主视图、各分视图所需的网页div元素和画布，并将画布挂载到div元素上，设置主视图和分视图div元素的高度、宽度、偏移；

步骤1-2，创建主视图及分视图所需的实例对象，所述实例对象包含：相机、屏幕控制事件、帧缓冲区、像素存储和鼠标控制相机对象。

3.根据权利要求2所述的方法，其特征在于，步骤2包括：

步骤2-1，切换当前相机对象为分视图相机对象，切换当前帧缓冲区为分视图缓冲区对象；

步骤2-2，通过监听分视图鼠标事件获取鼠标开始点的屏幕坐标(x1，y1)和结束点的屏幕坐标(x2，y2)，通过屏幕坐标转世界坐标函数计算出开始点的笛卡尔世界坐标P1(X1，Y1，Z1)和结束点的笛卡尔世界坐标P2(X2，Y2，Z2)，根据公式D＝P2-P1得到相机变化的方向向量D，通过求方向向量的长度得到相机变化的数量N；把相机变化的方向向量D和数量N参数传入相机对象平移translate、旋转rotate、缩放zoom变化函数中，计算出相机对象的位置position、向前向量direction、向上向量up、向右向量right，然后通过矩阵的computeView函数计算出视图矩阵view matrix，设置为WebGL着色器中当前使用的视图矩阵，执行WebGL系统离屏绘制，将结果保存在帧缓冲区对象中。

4.根据权利要求3所述的方法，其特征在于，步骤2-2中，所述矩阵computeView函数的计算方法：矩阵computeView函数的参数包括相机的位置向量position、向前向量direction、向上向量up、向右向量right；计算出来的视图矩阵数组索引为0、4、8的值分别等于向右向量right的世界坐标值，视图矩阵数组索引为1、5、9的值分别等于向上向量up的世界坐标值，视图矩阵数组索引为2、6、10的值分别等于向前向量direction的世界坐标值取负，视图矩阵数组索引为12的值等于向右向量right和位置向量position点积取负，视图矩阵数组索引为13的值等于向上向量up和位置向量position点积取负，视图矩阵数组索引为12的值等于向前向量direction和位置向量position点积。

5.根据权利要求4所述的方法，其特征在于，步骤2-2中，所述执行WebGL系统离屏绘制，是指在帧缓冲区中进行绘制的过程，具体包括：在默认情况下，WebGL在颜色缓冲区中进行绘图，绘制的结果图像是存储在颜色缓冲区中的，颜色缓冲区内容会直接显示到浏览器上；帧缓冲区能够用来代替颜色缓冲区，在帧缓冲区内绘制的结果图像会保存在帧缓冲区，不会直接显示到浏览器上。

6.根据权利要求5所述的方法，其特征在于，步骤3包括：

步骤3-1，通过主视图画布的getContext方法获取3D绘图上下文，根据主视图画布的宽度width像素值和高度height像素值创建width乘以height大小的Uint8Array对象，将Uint8Array对象作为参数传入3D绘图上下文的读取像素方法readPixels中，执行读取像素方法将帧缓冲区的内容读出来保存到Uint8Array对象中，最后创建以Uint8Array对象作为参数的图片ImageData对象，将Uint8Array对象内容保存成图片ImageData对象；

步骤3-2，通过分视图画布的getContext方法获取2D绘图上下文，将图片ImageData对象作为参数传入2D绘图上下文的绘制图片方法putImageData中，执行绘制图片方法将图片内容绘制并显示到分视图上。