Shihui dev (#819)

* feat: 增加小程序环境判断、替换 regl -> l7regl

* style: code style

* feat(新增工程配置): 新增小程序工程配置

* feat: 支持小程序环境中传入 canvas 实例用于渲染、兼容 L7 原有代码

* style: code style

* feat: 小程序不需要对 classList 操作（真机也没有 classList 属性）

* style: code style

* feat: 对 docStyle、devicePixelRatio 以及部分 dom 的兼容

* style: code style

* feat: 小程序兼容 window.perframce.now requestAnimationFrame

* feat: 新增工程配置

* feat: 新增工程配置

* feat: 兼容动画减弱以及部分的 dom 处理

* style: code style

* feat: 替换 mapbox/tiny-sdf -> l7-tiny-sdf

* style: code style

* feat: 兼容操作

* style: code style

* style: demo code

* feat: change version

* feat: mini code

* feat: 小程序兼容

* feat: 合并mini-adapter

* feat: 合并mini-adapter

* feat: 新增tag

* feat: 增加 imageData 兼容

* style: code style by lint

* feat: 修改版本号

* feat: 新增mini6 beta版本

* feat: 去除原adapter

* feat: 修改版本号

* feat: 升级版本

* feat: 修改版本引用

* style: code style

* feat: 小程序兼容requestAnimationFrame

* feat: 小程序兼容requestAnimationFrame

* style: maps -> mini

* feat: update mini version

* feat: 修改 webgl 扩展名称的大小写、使之可以与 l7regl 配合，兼容小程序环境

* feat: 用适配的 requestAnimateFrame 替换 setInterval

* feat: 修改 L7 - mini 版本、修改 adapter 中 screen、devicePixelRadio 关于 isMini 的取值

* feat: 修复小程序环境中 getMapTouches 的取值

* feat: 地图联动部分改造

* feat: 增加地图联动

* feat: 修复新增小程序地图联动

* feat: 增加小程序地图联动

* style: lint style

* style: handle merge conflict

* feat: 增加有无底图模式的参数控制、修复与小程序地图联动时的 bug

* style: lint style

* feat: 扩展小程序地图联动传递参数

* style: lint style

* chore: update L7Mini version 2.5.8 - mini16 -> 2.5.8 - mini17

* feat: 增加小程序可视化交互注册监听时上下文绑定

* style: lint style

* chore: update L7Mini version 2.5.8mini17 -> 2.5.8mini18

* chore: update L7Mini version 2.5.8mini18 -> 2.5.8mini19

* chore: update L7Mini version 2.5.8mini20 -> 2.5.8mini21

* feat: add performance demo

* style: lint style

* style: lint style

* feat: add getModelMatrix into viewport

* feat: 新增地球模式 （初步构建）

* feat: 完善地球交互

* style: lint style

* feat: 调整地球图层缩放的方向

* style: lint style

* feat: 增加地球模式的 pointLayer/fill 图层

* style: lint style

* feat: 增加地球、太阳的简单运动系统，优化部分代码结构

* fix: 修复时间点击出错

* style: lint style

* fix: 修复地图 panBy 方法参数错误

* style: lint style

* feat: pointLayer/cylinder 圆柱兼容地球模式

* style: lint style

* feat: 修复 pointLayer/fill 在拾取是破面严重的情况

* style: lint style

* feat: 增加 arc 弧度调节

* feat: 增加 lineLayer/arc3d 兼容地球模式

* style: lint style

* feat: 增加地球图层 - 大气层

* style: lint style

* feat: 增加设置可视化层背景色的能力

* style: lint style

* feat: 增加地球外发光效果

* style: lint style

* feat: 允许用户不使用 layer 的 source 方法 - 地球模式下光晕图层不需要传数据

* style: lint style

* feat: 调整光晕的 shader 计算

* feat: 调整地球大气层的渲染层级

* style: lint style

* feat: 调整案例

* style: lint style

* feat: 增加地球图层的默认参数、调整部分代码

* style: lint style

* feat: imageTile developinging

* style: lint style

* feat: 新增图片瓦片地图

* fix: 修复 amap2 新增样式导致的 marker 失效

* feat: 修复 amap2 的 amap-maps 新增 z-index=0; 引发的marker 显示层级失效

* feat: amap2 的 amap-maps 新增 z-index=0; 样式，让 marker 中 zIndex 失效

* style: lint style

* feat: 补全瓦片地图中的类型引用

* style: lint style

* feat: 取消 earthmap 的 hash 模块

* feat: 调整 L7Mini 版本

* feat: 合并图片瓦片图层

* feat: 增加 imageLayer 的对小程序的兼容

* style: lint style

* feat: 修改小程序分支版本

* feat: 更新 l7regl 依赖（补充对支付宝小程序 image 对象的类型判断）

* feat: 增加 demo

* style: lint style

* feat: 修复 varying 传递 float 总数在部分终端设备 ios13 上突破限制的问题

* feat: add stoty demo

* style: lint style

* feat: 调整 aspace demo

* feat: 调整 aspace demo

* style: lint style

* feat: 调整 demo

* feat: 补充依赖

* feat: 新增 arcmini layer，增加拖拽时的拾取优化（地图拖拽时取消拾取）

* feat: 增加注释

* feat: 剔除地图拖拽时多余的 shader 计算

* style: lint style

* feat: 暂时取消拖拽时 shader 的过滤处理

* style: lint style

* feat: 合并 mi nimini

* feat: add l7hammerjs

* feat: 增加 l7hammerjs 声明

* feat: update version

* feat: merge shihui_dev

* feat: 去除多余依赖

* feat: 小程序合并 master 无报错版本

* feat: 修改 demo

* style: lint style

* feat: change l7hammerjs

* feat: remove test hammerjs

* chore: update verison and get enable branch 2.5.37-mini19

* chore: update version 2.5.37-mini19 -> 2.5.37-mini20 enabled

* feat: 去除 hammerjs 的类型定义 - l7hammerjs

* style: lint style

* feat: 增加类型定义 @antv/l7-maps/lib/map/

* feat: 调整类型定义

* feat: 调整类型定义文件

* feat: change typing

* feat: 增加图层渲染列表 layerList 更新图层渲染排序计算 去除夺取 renderTest

* style: lint style

Co-authored-by: zhongwu <xingya.sxy@alibaba-inc.com>

build/rollup-plugin-miniapp.js

@@ -0,0 +1,47 @@
+import inject from '@rollup/plugin-inject';
+import modify from '@rollup/plugin-modify';
+
+const module = '@oasis-engine/miniprogram-adapter ';
+
+function register(name) {
+  return [module, name];
+}
+
+function resolveFile(filePath) {
+  return path.join(__dirname, '..', filePath);
+}
+
+const adapterArray = [
+  'window',
+  'atob',
+  'devicePixelRatio',
+  'document',
+  'Element',
+  'Event',
+  'EventTarget',
+  'HTMLCanvasElement',
+  'HTMLElement',
+  'HTMLMediaElement',
+  'HTMLVideoElement',
+  'Image',
+  'navigator',
+  'Node',
+  'requestAnimationFrame',
+  'cancelAnimationFrame',
+  'screen',
+  'XMLHttpRequest',
+  'performance',
+];
+const adapterVars = {};
+
+adapterArray.forEach((name) => {
+  adapterVars[name] = register(name);
+});
+
+export default [
+  inject(adapterVars),
+  modify({
+    find: /^@antv\/l7-(.*)/,
+    replacement: resolveFile('packages/$1/src'),
+  }),
+];

packages/core/src/services/interaction/PickingService.ts

@@ -162,8 +162,7 @@ export default class PickingService implements IPickingService {
     }
     this.alreadyInPicking = true;
     await this.pickingLayers(target);
-    // TODO: 触发图层更新渲染，同时传递更新类型
-    this.layerService.renderLayers('picking');
+    this.layerService.renderLayers();
     this.alreadyInPicking = false;
   }
 

packages/core/src/services/layer/ILayerService.ts

@@ -382,7 +382,7 @@ export interface ILayerService {
   getLayerByName(name: string): ILayer | undefined;
   remove(layer: ILayer, parentLayer?: ILayer): void;
   removeAllLayers(): void;
-  updateRenderOrder(): void;
+  updateLayerRenderList(): void;
   renderLayers(type?: string): void;
   getOESTextureFloat(): boolean;
   isMapDragging(): boolean;

packages/core/src/services/layer/LayerService.ts

@@ -17,16 +17,14 @@ export default class LayerService implements ILayerService {
 
   private layers: ILayer[] = [];
 
+  private layerList: ILayer[] = [];
+
   private layerRenderID: number;
 
   private sceneInited: boolean = false;
 
   private animateInstanceCount: number = 0;
 
-  private lastRenderType: string;
-
-  private lastPickRenderTime: number;
-
   @inject(TYPES.IRendererService)
   private readonly renderService: IRendererService;
 
@@ -41,6 +39,7 @@ export default class LayerService implements ILayerService {
       layer.init();
     }
     this.layers.push(layer);
+    this.updateLayerRenderList();
   }
 
   public initLayers() {
@@ -50,6 +49,7 @@ export default class LayerService implements ILayerService {
         layer.init();
       }
     });
+    this.updateLayerRenderList();
   }
 
   public getLayers(): ILayer[] {
@@ -77,7 +77,7 @@ export default class LayerService implements ILayerService {
         this.layers.splice(layerIndex, 1);
       }
     }
-
+    this.updateLayerRenderList();
     layer.emit('remove', null);
     layer.destroy();
     this.renderLayers();
@@ -87,46 +87,42 @@ export default class LayerService implements ILayerService {
     this.destroy();
   }
 
-  public renderLayers(renderType?: string) {
-    // TODO: 每次渲染的时候都需要进行渲染判断，判断是否进行渲染
-    // 没有传递 type 参数时默认触发的是地图事件，优先级最高，直接渲染
-    if (!this.renderTest(renderType)) {
-      return;
-    }
-
+  public renderLayers() {
     if (this.alreadyInRendering) {
       return;
     }
     this.alreadyInRendering = true;
     this.clear();
-    this.updateRenderOrder();
 
+    this.layerList.forEach((layer) => {
+      layer.hooks.beforeRenderData.call();
+      layer.hooks.beforeRender.call();
+      layer.render();
+      layer.hooks.afterRender.call();
+    });
+    this.alreadyInRendering = false;
+  }
+
+  public updateLayerRenderList() {
+    // TODO: 每次更新都是从 layers 重新构建
+    this.layerList = [];
     this.layers
       .filter((layer) => layer.inited)
       .filter((layer) => layer.isVisible())
       .forEach((layer) => {
+        this.layerList.push(layer);
+
         // Tip: 渲染 layer 的子图层 默认 layerChildren 为空数组 表示没有子图层 目前只有 ImageTileLayer 有子图层
-        renderLayerEvent(layer.layerChildren);
-        renderLayerEvent([layer]);
+        layer.layerChildren
+          .filter((childlayer) => childlayer.inited)
+          .filter((childlayer) => childlayer.isVisible())
+          .forEach((childlayer) => {
+            this.layerList.push(childlayer);
+          });
       });
-    this.alreadyInRendering = false;
 
-    function renderLayerEvent(layers: ILayer[]) {
-      layers
-        .filter((layer) => layer.inited)
-        .filter((layer) => layer.isVisible())
-        .forEach((layer) => {
-          // trigger hooks
-          layer.hooks.beforeRenderData.call();
-          layer.hooks.beforeRender.call();
-          layer.render();
-          layer.hooks.afterRender.call();
-        });
-    }
-  }
-
-  public updateRenderOrder() {
-    this.layers.sort((pre: ILayer, next: ILayer) => {
+    // 根据 zIndex 对渲染顺序进行排序
+    this.layerList.sort((pre: ILayer, next: ILayer) => {
       return pre.zIndex - next.zIndex;
     });
   }
@@ -141,6 +137,7 @@ export default class LayerService implements ILayerService {
       layer.destroy();
     });
     this.layers = [];
+    this.layerList = [];
     this.renderLayers();
   }
 
@@ -172,56 +169,6 @@ export default class LayerService implements ILayerService {
     this.layerRenderID = requestAnimationFrame(this.runRender.bind(this));
   }
 
-  // 渲染检测
-  private renderTest(renderType: string | undefined): boolean {
-    const now = new Date().getTime();
-    const betweenPickRenderTime = now - this.lastPickRenderTime;
-    if (renderType === 'picking') {
-      this.lastPickRenderTime = new Date().getTime();
-    }
-
-    // 继续渲染事件
-    if (renderType) {
-      switch (renderType) {
-        case 'picking':
-          // return false;
-          //  TODO: picking 类型的渲染事件
-          //  若是上次触发为地图触发的渲染，则认为是地图事件与拾取事件在同时触发，放弃此次渲染
-          if (
-            this.lastRenderType === 'mapRender' ||
-            this.lastRenderType === 'animate'
-          ) {
-            this.lastRenderType = 'picking';
-            // 如果上一次触发的事件在 48 ms 以上，则这一次不放弃触发
-            if (betweenPickRenderTime > 48) {
-              return true;
-            } else {
-              return false;
-            }
-          } else {
-            this.lastRenderType = 'picking';
-            return true;
-          }
-        case 'animate':
-          // return false;
-          if (this.lastRenderType === 'mapRender') {
-            this.lastRenderType = 'animate';
-            return false;
-          } else {
-            this.lastRenderType = 'animate';
-            return true;
-          }
-        case 'mapRender':
-          this.lastRenderType = 'mapRender';
-          return true;
-        default:
-          return true;
-      }
-      // TODO: 地图触发的渲染优先级最高，动画其次，拾取最次
-    }
-    return true;
-  }
-
   private clear() {
     const color = rgb2arr(this.mapService.bgColor) as [
       number,

packages/core/src/services/scene/ISceneService.ts

@@ -15,7 +15,7 @@ export interface ISceneService {
   initMiniScene(config: IMapConfig & IRenderConfig): void;
   addLayer(layer: ILayer): void;
   getSceneConfig(): Partial<ISceneConfig>;
-  render(type?: string): void;
+  render(): void;
   getSceneContainer(): HTMLDivElement;
   getMarkerContainer(): HTMLElement;
   exportPng(type?: 'png' | 'jpg'): string;

packages/core/src/services/scene/SceneService.ts

@@ -298,7 +298,7 @@ export default class Scene extends EventEmitter implements ISceneService {
     this.render();
   }
 
-  public async render(renderType?: string) {
+  public async render() {
     if (this.rendering || this.destroyed) {
       return;
     }
@@ -325,7 +325,7 @@ export default class Scene extends EventEmitter implements ISceneService {
     }
 
     // 尝试初始化未初始化的图层
-    this.layerService.renderLayers(renderType);
+    this.layerService.renderLayers();
 
     // 组件需要等待layer 初始化完成之后添加
     this.rendering = false;
@@ -457,7 +457,7 @@ export default class Scene extends EventEmitter implements ISceneService {
 
   private handleMapCameraChanged = (viewport: IViewport) => {
     this.cameraService.update(viewport);
-    this.render('mapRender');
+    this.render();
   };
 
   private addSceneEvent(target: IInteractionTarget) {

packages/layers/package.json

@@ -23,7 +23,6 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/async-hook": "^2.1.0",
     "@antv/geo-coord": "^1.0.8",
     "@antv/l7-core": "^2.5.43",
     "@antv/l7-source": "^2.5.43",

packages/layers/src/core/BaseLayer.ts

@@ -667,7 +667,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   }
   public setIndex(index: number): ILayer {
     this.zIndex = index;
-    this.layerService.updateRenderOrder();
+    this.layerService.updateLayerRenderList();
+    this.layerService.renderLayers();
     return this;
   }
 

packages/layers/src/plugins/LayerStylePlugin.ts

@@ -1,5 +1,4 @@
 import { ILayer, ILayerPlugin, IMapService, TYPES } from '@antv/l7-core';
-import { encodePickingColor, rgb2arr } from '@antv/l7-utils';
 import { injectable } from 'inversify';
 import 'reflect-metadata';
 /**