fix: popup service init

.storybook/webpack.config.js

@@ -31,6 +31,10 @@ module.exports = ({ config }) => {
     test: /\.stories\.css?$/,
     use: ['style-loader', 'css-loader'],
   },
+  {
+    test: /\.stories\.svg$/,
+    loader: 'svg-inline-loader'
+  }
   );
 
   config.resolve.extensions.push('.ts', '.tsx', '.js', '.glsl');

package.json

@@ -103,6 +103,7 @@
     "stylelint-config-standard": "^18.2.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.3.2",
+    "svg-inline-loader": "^0.8.0",
     "ts-jest": "^24.0.2",
     "tslint": "^5.11.0",
     "tslint-config-prettier": "^1.15.0",

packages/core/src/inversify.config.ts

@@ -73,10 +73,10 @@ container
   .bind<IGlobalConfigService>(TYPES.IGlobalConfigService)
   .to(GlobalConfigService)
   .inSingletonScope();
-container
+// container
-  .bind<IIconService>(TYPES.IIconService)
+//   .bind<IIconService>(TYPES.IIconService)
-  .to(IconService)
+//   .to(IconService)
-  .inSingletonScope();
+//   .inSingletonScope();
 container
   .bind<IShaderModuleService>(TYPES.IShaderModuleService)
   .to(ShaderModuleService)
@@ -85,10 +85,10 @@ container
   .bind<ILogService>(TYPES.ILogService)
   .to(LogService)
   .inSingletonScope();
-container
+// container
-  .bind<IFontService>(TYPES.IFontService)
+//   .bind<IFontService>(TYPES.IFontService)
-  .to(FontService)
+//   .to(FontService)
-  .inSingletonScope();
+//   .inSingletonScope();
 
 // @see https://github.com/inversify/InversifyJS/blob/master/wiki/inheritance.md#what-can-i-do-when-my-base-class-is-provided-by-a-third-party-module
 decorate(injectable(), EventEmitter);
@@ -160,7 +160,6 @@ export function createSceneContainer() {
   sceneContainer
     .bind<string>(TYPES.SceneID)
     .toConstantValue(`${sceneIdCounter++}`);
-
   sceneContainer
     .bind<ILayerService>(TYPES.ILayerService)
     .to(LayerService)
@@ -189,6 +188,14 @@ export function createSceneContainer() {
     .bind<IMarkerService>(TYPES.IMarkerService)
     .to(MarkerService)
     .inSingletonScope();
+  sceneContainer
+    .bind<IIconService>(TYPES.IIconService)
+    .to(IconService)
+    .inSingletonScope();
+  sceneContainer
+    .bind<IFontService>(TYPES.IFontService)
+    .to(FontService)
+    .inSingletonScope();
 
   sceneContainer
     .bind<IPopupService>(TYPES.IPopupService)

packages/core/src/services/component/IPopupService.ts

@@ -15,5 +15,6 @@ export interface IPopupService {
   addPopup(popup: IPopup): void;
   removePopup(popup: IPopup): void;
   init(scene: Container): void;
+  initPopup(): void;
   destroy(): void;
 }

packages/core/src/services/component/PopupService.ts

@@ -7,6 +7,8 @@ import { IPopup, IPopupService } from './IPopupService';
 export default class PopupService implements IPopupService {
   private scene: Container;
   private popup: IPopup;
+  private mapsService: IMapService;
+  private unAddPopup: IPopup | null;
 
   public removePopup(popup: IPopup): void {
     popup.remove();
@@ -20,11 +22,22 @@ export default class PopupService implements IPopupService {
     if (this.popup) {
       this.popup.remove();
     }
-    popup.addTo(this.scene);
+    if (this.mapsService.map && this.mapsService.getMarkerContainer()) {
-    this.popup = popup;
+      popup.addTo(this.scene);
+      this.popup = popup;
+    } else {
+      this.unAddPopup = popup;
+    }
+  }
+  public initPopup() {
+    if (this.unAddPopup) {
+      this.addPopup(this.unAddPopup);
+      this.unAddPopup = null;
+    }
   }
 
   public init(scene: Container) {
     this.scene = scene;
+    this.mapsService = scene.get<IMapService>(TYPES.IMapService);
   }
 }

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

@@ -10,6 +10,7 @@ import { IIconService } from '../asset/IIconService';
 import { ICameraService, IViewport } from '../camera/ICameraService';
 import { IControlService } from '../component/IControlService';
 import { IMarkerService } from '../component/IMarkerService';
+import { IPopupService } from '../component/IPopupService';
 import { IGlobalConfigService, ISceneConfig } from '../config/IConfigService';
 import { ICoordinateSystemService } from '../coordinate/ICoordinateSystemService';
 import { IInteractionService } from '../interaction/IInteractionService';
@@ -69,6 +70,9 @@ export default class Scene extends EventEmitter implements ISceneService {
   @inject(TYPES.IMarkerService)
   private readonly markerService: IMarkerService;
 
+  @inject(TYPES.IPopupService)
+  private readonly popupService: IPopupService;
+
   /**
    * 是否首次渲染
    */
@@ -139,9 +143,11 @@ export default class Scene extends EventEmitter implements ISceneService {
       // 重新绑定非首次相机更新事件
       this.map.onCameraChanged(this.handleMapCameraChanged);
       this.map.addMarkerContainer();
+
       // 初始化未加载的marker;
       this.markerService.addMarkers();
       this.markerService.addMarkerLayers();
+      this.popupService.initPopup();
       // 地图初始化之后 才能初始化 container 上的交互
       this.interactionService.init();
       this.logger.debug(`map ${this.id} loaded`);

packages/layers/src/core/BaseLayer.ts

@@ -230,10 +230,11 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     this.configService.setLayerConfig(sceneId, this.id, {});
 
     // 全局容器服务
+
+    // 场景容器服务
     this.iconService = this.container.get<IIconService>(TYPES.IIconService);
     this.fontService = this.container.get<IFontService>(TYPES.IFontService);
 
-    // 场景容器服务
     this.rendererService = this.container.get<IRendererService>(
       TYPES.IRendererService,
     );

packages/layers/src/core/BaseModel.ts

@@ -32,16 +32,18 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
   @lazyInject(TYPES.IGlobalConfigService)
   protected readonly configService: IGlobalConfigService;
 
-  @lazyInject(TYPES.IIconService)
+  // @lazyInject(TYPES.IIconService)
-  protected readonly iconService: IIconService;
+  // protected readonly iconService: IIconService;
 
-  @lazyInject(TYPES.IFontService)
+  // @lazyInject(TYPES.IFontService)
-  protected readonly fontService: IFontService;
+  // protected readonly fontService: IFontService;
 
   @lazyInject(TYPES.IShaderModuleService)
   protected readonly shaderModuleService: IShaderModuleService;
 
   protected rendererService: IRendererService;
+  protected iconService: IIconService;
+  protected fontService: IFontService;
   protected styleAttributeService: IStyleAttributeService;
   protected mapService: IMapService;
   protected cameraService: ICameraService;
@@ -56,6 +58,12 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
       .getContainer()
       .get<IStyleAttributeService>(TYPES.IStyleAttributeService);
     this.mapService = layer.getContainer().get<IMapService>(TYPES.IMapService);
+    this.iconService = layer
+      .getContainer()
+      .get<IIconService>(TYPES.IIconService);
+    this.fontService = layer
+      .getContainer()
+      .get<IFontService>(TYPES.IFontService);
     this.cameraService = layer
       .getContainer()
       .get<ICameraService>(TYPES.ICameraService);

stories/MapAdaptor/Map.stories.tsx

@@ -7,6 +7,7 @@ import AMapinstance from './components/MapInstance';
 import Mixed from './components/Mixed';
 import MultiAMap from './components/MultiAMap';
 import MultiMapbox from './components/MultiMapbox';
+import MultiAMapLayer from './components/multiMaptest';
 // @ts-ignore
 import notes from './Map.md';
 // @ts-ignore
@@ -26,6 +27,9 @@ storiesOf('地图底图', module)
   .add('多个高德地图实例', () => <MultiAMap />, {
     notes: { markdown: notes },
   })
+  .add('多个高德图层', () => <MultiAMapLayer />, {
+    notes: { markdown: notes },
+  })
   .add('多个 Mapbox 实例', () => <MultiMapbox />, {
     notes: { markdown: notes },
   })

stories/MapAdaptor/components/MultiAMap.tsx

@@ -87,12 +87,12 @@ export default class MultiGaodeMap extends React.Component {
         opacity: 0.3,
         strokeWidth: 2,
       });
-    scene1.on('loaded', () => {
+    // scene1.on('loaded', () => {
-      scene1.addLayer(pointLayer);
+    scene1.addLayer(pointLayer);
-    });
+    // });
-    scene2.on('loaded', () => {
+    // scene2.on('loaded', () => {
-      scene2.addLayer(pointLayer2);
+    scene2.addLayer(pointLayer2);
-    });
+    // });
 
     this.scene1 = scene1;
     this.scene2 = scene2;

stories/MapAdaptor/components/image/icon.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 58 (84663) - https://sketch.com -->
+    <title>cloth</title>
+    <desc>Created with Sketch.</desc>
+    <g id="cloth" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-2-Copy-21">
+            <circle id="Oval" fill="#26BEBA" cx="19" cy="19" r="19"></circle>
+            <circle id="Oval-Copy" fill="#F7FFFF" cx="19" cy="19" r="16"></circle>
+            <g id="Group-12" transform="translate(10.000000, 9.000000)" fill="#26BEBA">
+                <path d="M12.91,6.00427273 L12.9103448,19 L9.43448276,19 L9.434,9.48627273 L12.91,6.00427273 Z M4.965,5.47627273 L8.441,8.95827273 L8.44137931,19 L4.96551724,19 L4.965,5.47627273 Z M17.8758621,2.48727273 L17.8758621,19 L13.9034483,19 L13.903,5.00927273 L16.421,2.48727273 L17.8758621,2.48727273 Z M1.98,2.48727273 L3.972,4.48227273 L3.97241379,19 L-1.59872116e-14,19 L-1.59872116e-14,2.48727273 L1.98,2.48727273 Z M12.9206807,-1.80522264e-13 L15.0273712,2.11052089 L9.05841469,8.0903301 L9.003,8.035 L8.9482669,8.0903301 L2.97931034,2.11052089 L5.08600089,-5.65991698e-13 L9.003,3.924 L12.9206807,-1.80522264e-13 Z M11.4735522,6.66133815e-16 L8.97732484,2.50131221 L6.48055222,6.66133815e-16 L11.4735522,6.66133815e-16 Z" id="形状结合"></path>
+            </g>
+        </g>
+    </g>
+</svg>

stories/MapAdaptor/components/multiMaptest.tsx

@@ -0,0 +1,120 @@
+// @ts-ignore
+import { PointLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+// import imageIcon from './image/icon.svg';
+
+export default class MultiGaodeMap extends React.Component {
+  private scene1: Scene;
+  private scene2: Scene;
+
+  public componentWillUnmount() {
+    this.scene1.destroy();
+    this.scene2.destroy();
+  }
+
+  public async componentDidMount() {
+    const data = {
+      schoolGps: [120.46970867, 27.25603049],
+      dataObs: {
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'Point',
+              coordinates: [120.46753644, 27.22434614],
+            },
+          },
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'Point',
+              coordinates: [120.48454783, 27.25587721],
+            },
+          },
+        ],
+      },
+      dataObs2: {
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'Point',
+              coordinates: [120.47067657, 27.26350309],
+            },
+          },
+        ],
+      },
+    };
+    const scene1 = new Scene({
+      id: 'map1',
+      map: new GaodeMap({
+        center: data.schoolGps as [number, number],
+        zoom: 12,
+        style: 'light',
+      }),
+    });
+    scene1.addImage(
+      '02',
+      'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',
+    );
+    const scene2 = new Scene({
+      id: 'map2',
+      map: new GaodeMap({
+        center: data.schoolGps as [number, number],
+        zoom: 12,
+        style: 'dark',
+      }),
+    });
+    scene2.addImage(
+      '02',
+      'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KFyuTZxN6wYAAAAAAAAAAABkARQnAQ',
+    );
+    const imageLayer1 = new PointLayer()
+      .source(data.dataObs)
+      .shape('02')
+      .size(12);
+
+    const imageLayer2 = new PointLayer()
+      .source(data.dataObs2)
+      .shape('02')
+      .size(12);
+    scene1.addLayer(imageLayer1);
+    scene2.addLayer(imageLayer2);
+
+    this.scene1 = scene1;
+    this.scene2 = scene2;
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map1"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: '50%',
+            bottom: 0,
+          }}
+        />
+        <div
+          id="map2"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: '50%',
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </>
+    );
+  }
+}

yarn.lock

@@ -8330,7 +8330,7 @@ detect-indent@^5.0.0:
   resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
   integrity sha1-OHHMCmoALow+Wzz38zYmRnXwa50=
 
-detect-libc@^1.0.2, detect-libc@^1.0.3:
+detect-libc@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
   integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
@@ -12535,7 +12535,7 @@ i18next@^19.0.0:
   dependencies:
     "@babel/runtime" "^7.3.1"
 
-iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -14782,7 +14782,7 @@ loader-utils@1.2.3, loader-utils@^1.0.0, loader-utils@^1.0.1, loader-utils@^1.0.
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
-loader-utils@^0.2.16:
+loader-utils@^0.2.11, loader-utils@^0.2.16:
   version "0.2.17"
   resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
   integrity sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=
@@ -16092,15 +16092,6 @@ nearley@^2.7.10:
     randexp "0.4.6"
     semver "^5.4.1"
 
-needle@^2.2.1:
-  version "2.4.0"
-  resolved "https://registry.npmjs.org/needle/-/needle-2.4.0.tgz#6833e74975c444642590e15a750288c5f939b57c"
-  integrity sha512-4Hnwzr3mi5L97hMYeNl8wRW/Onhy4nUKR/lVemJ8gJedxxUyBLm9kkrDColJvoSfwi0jCNhD+xCdOtiGDQiRZg==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -16303,22 +16294,6 @@ node-object-hash@^2.0.0:
   resolved "https://registry.npmjs.org/node-object-hash/-/node-object-hash-2.0.0.tgz#9971fcdb7d254f05016bd9ccf508352bee11116b"
   integrity sha512-VZR0zroAusy1ETZMZiGeLkdu50LGjG5U1KHZqTruqtTyQ2wfWhHG2Ow4nsUbfTFGlaREgNHcCWoM/OzEm6p+NQ==
 
-node-pre-gyp@*:
-  version "0.14.0"
-  resolved "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
-  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4.4.2"
-
 node-releases@^1.1.29, node-releases@^1.1.44:
   version "1.1.45"
   resolved "https://registry.npmjs.org/node-releases/-/node-releases-1.1.45.tgz#4cf7e9175d71b1317f15ffd68ce63bce1d53e9f2"
@@ -16504,7 +16479,7 @@ npm-package-arg@^5.1.2:
     semver "^5.1.0"
     validate-npm-package-name "^3.0.0"
 
-npm-packlist@^1.1.6, npm-packlist@^1.4.4:
+npm-packlist@^1.4.4:
   version "1.4.7"
   resolved "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.7.tgz#9e954365a06b80b18111ea900945af4f88ed4848"
   integrity sha512-vAj7dIkp5NhieaGZxBJB8fF4R0078rqsmhJcAfXZ6O7JJhjhPK96n5Ry1oZcfLXgfun0GWTZPOxaEyqv8GBykQ==
@@ -16565,7 +16540,7 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1, npmlog@^4.0.2, npmlog@^4.1.2:
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1, npmlog@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -21101,6 +21076,11 @@ simple-get@^3.0.3, simple-get@^3.1.0:
     once "^1.3.1"
     simple-concat "^1.0.0"
 
+simple-html-tokenizer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz#05c2eec579ffffe145a030ac26cfea61b980fabe"
+  integrity sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4=
+
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
@@ -22256,6 +22236,15 @@ supports-color@^5.3.0, supports-color@^5.4.0:
   dependencies:
     has-flag "^3.0.0"
 
+svg-inline-loader@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.npmjs.org/svg-inline-loader/-/svg-inline-loader-0.8.0.tgz#7e9d905d80d0b4e68d2df21afcd08ee9e9a3ea6e"
+  integrity sha512-rynplY2eXFrdNomL1FvyTFQlP+dx0WqbzHglmNtA9M4IHRC3no2aPAl3ny9lUpJzFzFMZfWRK5YIclNU+FRePA==
+  dependencies:
+    loader-utils "^0.2.11"
+    object-assign "^4.0.1"
+    simple-html-tokenizer "^0.1.1"
+
 svg-parser@^2.0.0:
   version "2.0.3"
   resolved "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.3.tgz#a38f2e4e5442986f7ecb554c11f1411cfcf8c2b9"
@@ -22414,7 +22403,7 @@ tar@^2.0.0:
     fstream "^1.0.12"
     inherits "2"
 
-tar@^4.4.10, tar@^4.4.12, tar@^4.4.2, tar@^4.4.8:
+tar@^4.4.10, tar@^4.4.12, tar@^4.4.8:
   version "4.4.13"
   resolved "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
   integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==