fix(map): amap contanier creat new amap div

babel.config.js

@@ -5,7 +5,6 @@ module.exports = api => {
   const isCommonJS = api.env('cjs');
   const isESModule = api.env('esm');
   const isTest = api.env('test');
-
   if (process.env.GATSBY === 'true') { //
     return {
       presets: [
@@ -55,8 +54,7 @@ module.exports = api => {
           development: isCommonJS
         }
       ],
-      '@babel/preset-typescript',
-      'babel-preset-gatsby'
+      '@babel/preset-typescript'
     ],
     plugins: [
       '@babel/plugin-proposal-optional-chaining',

gatsby-browser.js

@@ -6,4 +6,4 @@ require('./packages/component/src/css/l7.css');
 // window.layers = require('./packages/layers/src');
 // window.component = require('./packages/component/src');
 window.g2 = require('@antv/g2');
-window.l7 = require("@antv/l7");
+window.l7 = require('@antv/l7');

package.json

@@ -141,6 +141,7 @@
     "build:declarations": "lerna exec --stream --no-bail 'tsc --project ./tsconfig.build.json'",
     "watch": "yarn clean && lerna exec --parallel 'BABEL_ENV=cjs babel --watch src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments'",
     "bundle": "BABEL_ENV=bundle node_modules/.bin/rollup -c ./build/rollup.config.js",
+    "bundle:watch": "BABEL_ENV=bundle node_modules/.bin/rollup -c ./build/rollup.config.js --watch", 
     "glsl-minify": "node_modules/.bin/glsl-minifier -i ./build/example.frag -o ./build/example.min.frag",
     "clean": "lerna run clean"
   },

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

@@ -142,7 +142,6 @@ export default class Scene extends EventEmitter implements ISceneService {
 
       this.logger.info('renderer loaded');
     });
-
     // TODO：init worker, fontAtlas...
 
     // 执行异步并行初始化任务
@@ -160,12 +159,13 @@ export default class Scene extends EventEmitter implements ISceneService {
     // 首次初始化，或者地图的容器被强制销毁的需要重新初始化
     if (!this.inited) {
       // 还未初始化完成需要等待
+
       await this.initPromise;
       // 初始化 marker 容器 TODO: 可以放到 map 初始化方法中？
       this.map.addMarkerContainer();
       this.logger.info(' render inited');
-      this.inited = true;
       this.emit('loaded');
+      this.inited = true;
     }
 
     // 尝试初始化未初始化的图层

packages/core/src/utils/dom.ts

@@ -1,8 +1,12 @@
 const docStyle = window.document.documentElement.style;
 type ELType = HTMLElement | SVGElement;
-export function createRendererContainer(domId: string): HTMLDivElement | null {
-  const $wrapper = document.getElementById(domId);
-
+export function createRendererContainer(
+  domId: string | HTMLDivElement,
+): HTMLDivElement | null {
+  let $wrapper = domId as HTMLDivElement;
+  if (typeof domId === 'string') {
+    $wrapper = document.getElementById(domId) as HTMLDivElement;
+  }
   if ($wrapper) {
     const $container = document.createElement('div');
     $container.style.cssText += `

packages/l7/.gitignore

@@ -0,0 +1,3 @@
+lib
+es
+dist

packages/maps/src/amap/index.ts

@@ -189,18 +189,17 @@ export default class AMapService implements IMapService {
       token = AMAP_API_KEY,
       ...rest
     } = mapConfig;
+    // 高德地图创建独立的container；
 
-    this.$mapContainer = document.getElementById(id);
-
-    // this.eventEmitter = container.get(TYPES.IEventEmitter);
-
+    // @ts-ignore
+    this.$mapContainer = this.creatAmapContainer(id);
     // tslint:disable-next-line:typedef
     await new Promise((resolve) => {
       // 异步加载高德地图
       // @see https://lbs.amap.com/api/javascript-api/guide/abc/load
       window.onload = (): void => {
         // @ts-ignore
-        this.map = new AMap.Map(id, {
+        this.map = new AMap.Map(this.$mapContainer, {
           mapStyle: this.getMapStyle(style),
           zooms: [minZoom, maxZoom],
           viewMode: '3D',
@@ -293,4 +292,21 @@ export default class AMapService implements IMapService {
   private getMapStyle(name: string) {
     return MapTheme[name] ? MapTheme[name] : name;
   }
+  private creatAmapContainer(id: string | HTMLDivElement) {
+    let $wrapper = id as HTMLDivElement;
+    if (typeof id === 'string') {
+      $wrapper = document.getElementById(id) as HTMLDivElement;
+    }
+    const $amapdiv = document.createElement('div');
+    $amapdiv.style.cssText += `
+      position: absolute;
+      top: 0;
+      z-index:2;
+      height: 100%;
+      width: 100%;
+    `;
+    $amapdiv.id = 'l7_amap_div';
+    $wrapper.appendChild($amapdiv);
+    return $amapdiv;
+  }
 }

packages/scene/src/index.ts

@@ -110,7 +110,7 @@ class Scene {
 
     // 初始化 scene
     this.sceneService.init(config);
-    // 初始化组件
+    // 初始化组件 TODO:  render 初始化完成之后
     this.initControl();
   }