fix: font 加载逻辑，添加font 加载完成事件 (#1364)

* fix: 文件名大小写

* fix: font load 逻辑

* fix: font 加载问题

dev-demos/features/point/demos/iconfont.tsx

@@ -19,12 +19,10 @@ export default () => {
       // 指定 iconfont 字体文件
       const fontPath =
         '//at.alicdn.com/t/font_2534097_fcae9o2mxbv.woff2?t=1622200439140';
-      // 全局添加资源
+    
-      scene.addFontFace(fontFamily, fontPath);
-      // 全局添加 iconfont 字段的映射;
-      scene.addIconFont('icon1', '');
       
       scene.on('loaded', () => {
+        scene.once('fontloaded',(e)=>{
           const imageLayer = new PointLayer()
           .source(
             [
@@ -45,7 +43,7 @@ export default () => {
               },
             },
           )
-          .color('#44ff00')
+          .color('#f00')
           .shape('icon', 'text')
           .size(30)
           .style({
@@ -57,7 +55,22 @@ export default () => {
             iconfont: true,
             textAllowOverlap: true,
           });
+      
             scene.addLayer(imageLayer);
+          // }
+          
+        })
+
+ 
+        scene.addFontFace(fontFamily, fontPath);     
+        scene.addIconFont('icon1', '');
+   
+          // 全局添加资源
+
+      // 全局添加 iconfont 字段的映射;
+
+        
+       
       });
 
     }, []);

dev-demos/features/tile/hillshade.md

@@ -1,3 +1,3 @@
 ### Raster - HillShade
 山体阴影
-<code src="./rasterData/hillShade.tsx"></code>
+<code src="./rasterData/hillshade.tsx"></code>

packages/core/src/services/asset/FontService.ts

@@ -1,5 +1,6 @@
 import { $window, LRUCache } from '@antv/l7-utils';
 import { injectable } from 'inversify';
+import { EventEmitter } from 'eventemitter3';
 import TinySDF from 'l7-tiny-sdf';
 import 'reflect-metadata';
 import { buildMapping } from '../../utils/font_util';
@@ -60,7 +61,7 @@ function populateAlphaChannel(alphaChannel: number[], imageData: ImageData) {
 }
 
 @injectable()
-export default class FontService implements IFontService {
+export default class FontService extends EventEmitter implements IFontService {
   public get scale() {
     return HEIGHT_SCALE;
   }
@@ -137,7 +138,6 @@ export default class FontService implements IFontService {
       ...this.fontOptions,
       ...option,
     };
-    // const oldKey = this.key;
     this.key = this.getKey();
 
     const charSet = this.getNewChars(this.key, this.fontOptions.characterSet);
@@ -157,7 +157,43 @@ export default class FontService implements IFontService {
     // update cache
     this.cache.set(this.key, fontAtlas);
   }
+  /**
+   * 用户自定义添加第三方字体 （用户使用 layer/point/text/iconfont 的前提需要加载第三方字体文件）
+   * @param fontFamily
+   * @param fontPath
+   */
+   public addFontFace(fontFamily: string, fontPath: string): void {
+    const style = document.createElement('style');
+    style.type = 'text/css';
+    style.innerText = `
+        @font-face{
+            font-family: '${fontFamily}';
+            src: url('${fontPath}') format('woff2'),
+            url('${fontPath}') format('woff'),
+            url('${fontPath}') format('truetype');
+        }`;
+    document.getElementsByTagName('head')[0].appendChild(style);
+    style.onload=()=>{
+      if ( document.fonts) {
+        try {
+          // @ts-ignore
+        document.fonts.load(`24px ${fontFamily}`, 'L7text');
+        document.fonts.ready.then(()=>{
+          this.emit('fontloaded',{
+            fontFamily
+          })
+        })
       
+        } catch (e) {
+          console.warn('当前环境不支持 document.fonts !');
+          console.warn('当前环境不支持 iconfont !');
+          console.warn(e);
+        }
+      }
+
+    }
+    
+  }
   public destroy(): void {
     this.cache.clear();
     this.iconFontMap.clear();

packages/core/src/services/asset/IFontService.ts

@@ -1,3 +1,4 @@
+import EventEmitter from 'eventemitter3';
 export interface IFontOptions {
   fontFamily: string;
   fontWeight: string;
@@ -47,7 +48,9 @@ export interface IIconFontGlyph {
   unicode: string;
   [key: string]: any;
 }
-export interface IFontService {
+export interface IFontService extends EventEmitter {
+  // on(event: string, fn: EventEmitter.ListenerFn, context?: any): this;
+  // off(event: string, fn: EventEmitter.ListenerFn, context?: any): this;
   mapping: IFontMapping;
   iconFontMap: Map<string, string>;
   fontAtlas: IFontAtlas;
@@ -56,6 +59,7 @@ export interface IFontService {
   init(): void;
   addIconGlyphs(glyphs: IIconFontGlyph[]): void;
   addIconFont(name: string, fontUnicode: string): void;
+  addFontFace(fontname: string, fontpath: string): void;
   getIconFontKey(name: string): string;
   getGlyph(name: string): string;
   setFontOptions(option: Partial<IFontOptions>): void;

packages/core/src/services/asset/IIconService.ts

@@ -20,10 +20,10 @@ export interface IIcon {
 export interface IICONMap {
   [key: string]: IIconValue;
 }
-export interface IIconService {
+export interface IIconService extends EventEmitter { 
   canvasHeight: number;
-  on(event: string, fn: EventEmitter.ListenerFn, context?: any): this;
+  // on(event: string, fn: EventEmitter.ListenerFn, context?: any): this;
-  off(event: string, fn: EventEmitter.ListenerFn, context?: any): this;
+  // off(event: string, fn: EventEmitter.ListenerFn, context?: any): this;
   init(): void;
   addImage(id: string, image: IImage): void;
   addImageMini(id: string, image: IImage, sceneService?: ISceneService): void;

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

@@ -1,14 +1,13 @@
 import { ISceneConfig } from '../config/IConfigService';
 import { ILayer } from '../layer/ILayerService';
+import EventEmitter from 'eventemitter3';
 
-export interface ISceneService {
+export interface ISceneService extends EventEmitter {
   destroyed: boolean;
   loaded: boolean;
-  fontFamily: string;
+  // on(type: string, handle: (...args: any[]) => void): void;
-  loadFont: boolean;
+  // once(type: string, handle: (...args: any[]) => void): void;
-  on(type: string, handle: (...args: any[]) => void): void;
+  // off(type: string, handle: (...args: any[]) => void): void;
-  once(type: string, handle: (...args: any[]) => void): void;
-  off(type: string, handle: (...args: any[]) => void): void;
   removeAllListeners(event?: string): this;
   init(config: ISceneConfig): void;
   initMiniScene(config: ISceneConfig): void;
@@ -26,6 +25,7 @@ export interface ISceneService {
 // scene 事件
 export const SceneEventList: string[] = [
   'loaded',
+  'fontloaded',
   'maploaded',
   'resize',
   'destroy',

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

@@ -35,10 +35,7 @@ export default class Scene extends EventEmitter implements ISceneService {
   public destroyed: boolean = false;
 
   public loaded: boolean = false;
-  // loadFont 判断用户当前是否添加自定义字体
+
-  public loadFont: boolean = false;
-  // fontFamily 用户当前自己添加的字体的名称
-  public fontFamily: string = '';
 
   @inject(TYPES.SceneID)
   private readonly id: string;
@@ -135,6 +132,7 @@ export default class Scene extends EventEmitter implements ISceneService {
     // 字体资源
     this.fontService.init();
   
+
     /**
      * 初始化底图
      */
@@ -316,17 +314,6 @@ export default class Scene extends EventEmitter implements ISceneService {
       if (this.destroyed) {
         this.destroy();
       }
-      // @ts-ignore
-      if (this.loadFont && document.fonts) {
-        try {
-          // @ts-ignore
-          await document.fonts.load(`24px ${this.fontFamily}`, 'L7text');
-        } catch (e) {
-          console.warn('当前环境不支持 document.fonts !');
-          console.warn('当前环境不支持 iconfont !');
-          console.warn(e);
-        }
-      }
 
       // FIXME: 初始化 marker 容器，可以放到 map 初始化方法中？
       this.layerService.initLayers();
@@ -350,18 +337,7 @@ export default class Scene extends EventEmitter implements ISceneService {
    * @param fontPath
    */
   public addFontFace(fontFamily: string, fontPath: string): void {
-    this.fontFamily = fontFamily;
+    this.fontService.addFontFace(fontFamily,fontPath)
-    const style = document.createElement('style');
-    style.type = 'text/css';
-    style.innerText = `
-        @font-face{
-            font-family: '${fontFamily}';
-            src: url('${fontPath}') format('woff2'),
-            url('${fontPath}') format('woff'),
-            url('${fontPath}') format('truetype');
-        }`;
-    document.getElementsByTagName('head')[0].appendChild(style);
-    this.loadFont = true;
   }
 
   public getSceneContainer(): HTMLDivElement {

packages/scene/src/index.ts

@@ -251,6 +251,7 @@ class Scene
    * @param name
    */
   public addIconFont(name: string, fontUnicode: string): void {
+   
     this.fontService.addIconFont(name, fontUnicode);
   }
 
@@ -265,7 +266,10 @@ class Scene
    * @param fontPath
    */
   public addFontFace(fontFamily: string, fontPath: string): void {
-    this.sceneService.addFontFace(fontFamily, fontPath);
+    this.fontService.once('fontloaded', (e)=>{
+      this.emit('fontloaded',e)
+    });
+    this.fontService.addFontFace(fontFamily, fontPath);
   }
 
   public addImage(id: string, img: IImage) {
@@ -274,7 +278,6 @@ class Scene
     } else {
       this.iconService.addImageMini(id, img, this.sceneService);
     }
-    // this.iconService.addImage(id, img);
   }
 
   public hasImage(id: string) {
@@ -334,6 +337,12 @@ class Scene
       ? this.mapService.once(type, handle)
       : this.sceneService.once(type, handle);
   }
+  public emit(type: string, handle: (...args: any[]) => void): void {
+    SceneEventList.indexOf(type) === -1
+      ? this.mapService.on(type, handle)
+      : this.sceneService.emit(type, handle);
+  }
+
 
   public off(type: string, handle: (...args: any[]) => void): void {
     SceneEventList.indexOf(type) === -1