一、烘托问题

（一）地图接口对接

同层烘托的要害点，前一篇 修改chromium内核，完成小程序的camera组件同层烘托（Android端）已经说明晰完成方向和思路，embed标签对应的区域关联了一个SurfaceTexture，咱们只需求把地图烘托到这个SurfaceTexture就行。现在市面上的常见地图SDK，腾讯的开放了接口，支持地图烘托到SurfaceTexture。下面代码是简单的创立地图例子。

通过MapRenderLayer创立地图
SurfaceTexture surface =new SurfaceTexture(TEXTURE_ID);
TencentMapOptions mapOptions = new TencentMapOptions();
mapOptions.setExtSurface(surface);
mapOptions.setExtSurfaceDimension(900, 900);
MapRenderLayer mapView = new MapRenderLayer(context, mapOptions);
parentView.addView(mapView);

（二）要害类SurfaceTexture和Surface

参阅一下Android官网文档Surface和SurfaceTexture

Surface是一个接口，供出产方与消耗方交流缓冲区。

SurfaceTexture是 Surface 和OpenGL ES (GLES)纹路的组合。SurfaceTexture实例用于提供输出到 GLES 纹路的接口。SurfaceTexture包括一个以运用为运用方的BufferQueue实例。当出产方将新的缓冲区排入行列时，onFrameAvailable()回调会通知运用。然后，运用调用updateTexImage()，这会开释先前占用的缓冲区，从行列中获取新缓冲区并履行EGL调用，从而使 GLES 可将此缓冲区作为外部纹路运用。

依据官网的文档说明和流程图，咱们把这段文字分红两半再来捋一下：

  1. SurfaceTexture 是 Surface 和 OpenGL ES (GLES) 纹路的组合。SurfaceTexture 实例用于提供输出到 GLES 纹路的接口。个人觉得下面可以这几行代码解释：

int[] glTextures = new int[1];
// 生成一个纹路id存在glTextures数组内
GLES20.glGenTextures(1, glTextures, 0);
SurfaceTexture surfaceTexture = new SurfaceTexture(glTextures[0]);
Surface surface = new Surface(surfaceTexture);

  1. SurfaceTexture 包括一个以运用为运用方的 BufferQueue 实例。当出产方将新的缓冲区排入行列时，onFrameAvailable() 回调会通知运用。然后，运用调用 updateTexImage()，这会开释先前占用的缓冲区，从行列中获取新缓冲区并履行 EGL 调用，从而使 GLES 可将此缓冲区作为外部纹路运用。

ChromiumCompositor运用SurfaceTexture组成地图画面数据，是消费侧。地图SDK向Surface内写入数据，是出产侧。当地图SDK写入数据到Surface内时，chromium运用SurfaceTexture注册的onFrameAvailable() 回调履行，它去获取最新的数据参与整个web页面的组成，最终显示在屏幕上。

（三）根据同层组件烘托数据的出产者/消费者示意图

修改chromium内核，实现小程序的Map组件同层渲染（Android端）

二、手势问题

（一）手势冲突的问题

众所周知，在Android端，网页是可以支持滑动及双指缩放的，而地图也刚好是需求响应处理这些手势，那么就遇到了一个费事的问题：

  1. 如果跳过web页面直接把事情派发给原生组件处理，则损坏了网页的滑动及缩放功能。
  2. 如果直接把事情派发给了web页面且Map组件没有机会响应手势，则损坏了地图的功能。

（二）手势处理的优先级及预期作用

为了让Map组件和web页面到达无缝融合的作用，所以Map组件的手势处理的优先级及规矩也应该像一个普通的web元素一样，不能损坏整个web规范。

应该有以下场景及预期作用， 假设给到一个Map组件在网页上且其它网页区域不处理事情。

  1. Map组件需求处理手势
    (1) 手势触发在其它网页区域时，网页应缩放或许滑动
    (2) 手势触发在Map组件区域时，地图内容应缩放或许滑动
  2. Map组件疏忽手势时 手势触发在任何区域时，网页应缩放或许滑动

（三）同层组件手势处理流程图：

通过一番研究，有两个要害点会影响手势事情的派发

  1. 是否注册了touch事情的监听
  2. 第一步注册时，passive是否设为了true

修改chromium内核，实现小程序的Map组件同层渲染（Android端）

三、做一个demo看看作用

四、下期预告（如果有）：

把Android原生的View作为一个同层组件烘托到网页的embed标签上。