From 327ef700d57b0ddbaea143298b585b8fe36b5c69 Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Tue, 2 Nov 2021 18:03:12 +0800 Subject: [PATCH] Shihui dev (#819) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- build/rollup-plugin-miniapp.js | 47 ++++++++ .../services/interaction/PickingService.ts | 3 +- .../core/src/services/layer/ILayerService.ts | 2 +- .../core/src/services/layer/LayerService.ts | 111 +++++------------- .../core/src/services/scene/ISceneService.ts | 2 +- .../core/src/services/scene/SceneService.ts | 6 +- packages/layers/package.json | 1 - packages/layers/src/core/BaseLayer.ts | 3 +- .../layers/src/plugins/LayerStylePlugin.ts | 1 - 9 files changed, 84 insertions(+), 92 deletions(-) create mode 100644 build/rollup-plugin-miniapp.js diff --git a/build/rollup-plugin-miniapp.js b/build/rollup-plugin-miniapp.js new file mode 100644 index 0000000000..26180f910a --- /dev/null +++ b/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'), + }), +]; diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts index e385275fb5..a5f0be27ad 100644 --- a/packages/core/src/services/interaction/PickingService.ts +++ b/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; } diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index c266eaba61..afec8fcfb2 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/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; diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts index 2bbc5ca7ee..f3ef21a8e3 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/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, diff --git a/packages/core/src/services/scene/ISceneService.ts b/packages/core/src/services/scene/ISceneService.ts index b35551e25e..44866963a0 100644 --- a/packages/core/src/services/scene/ISceneService.ts +++ b/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; - render(type?: string): void; + render(): void; getSceneContainer(): HTMLDivElement; getMarkerContainer(): HTMLElement; exportPng(type?: 'png' | 'jpg'): string; diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index bc145fdadf..d0a57caf96 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/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) { diff --git a/packages/layers/package.json b/packages/layers/package.json index bc22dca19b..34cc66bbb0 100644 --- a/packages/layers/package.json +++ b/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", diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 49d8bf3a75..754579e8b3 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -667,7 +667,8 @@ export default class BaseLayer extends EventEmitter } public setIndex(index: number): ILayer { this.zIndex = index; - this.layerService.updateRenderOrder(); + this.layerService.updateLayerRenderList(); + this.layerService.renderLayers(); return this; } diff --git a/packages/layers/src/plugins/LayerStylePlugin.ts b/packages/layers/src/plugins/LayerStylePlugin.ts index aa02a8b6df..b68e317995 100644 --- a/packages/layers/src/plugins/LayerStylePlugin.ts +++ b/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'; /**