fix(layerservice): fix init bugs in layer service

babel.config.js

@@ -91,6 +91,9 @@ module.exports = api => {
           ]
         }
       ],
+      isCDNBundle ? {} : [
+        'transform-import-styles',
+      ],
       [
         // @see https://github.com/babel/babel/issues/8741#issuecomment-509041135
         'const-enum',
@@ -101,7 +104,7 @@ module.exports = api => {
       // 按需引用 @see https://github.com/lodash/babel-plugin-lodash
       'lodash',
       // 内联 WebGL 常量 @see https://www.npmjs.com/package/babel-plugin-inline-webgl-constants
-      isCDNBundle ? 'inline-webgl-constants' : {}
+      // isCDNBundle ? 'inline-webgl-constants' : {}
     ],
     ignore: [
       'node_modules',

build/rollup.config.js

@@ -7,6 +7,8 @@ import { terser } from "rollup-plugin-terser";
 import analyze from 'rollup-plugin-analyzer';
 import babel from 'rollup-plugin-babel';
 import glsl from './rollup-plugin-glsl';
+import postcss from 'rollup-plugin-postcss';
+import url from 'postcss-url';
 
 function resolveFile(filePath) {
   return path.join(__dirname, '..', filePath)
@@ -16,7 +18,7 @@ module.exports = [
   {
     input: resolveFile('build/bundle.ts'),
     output: {
-      file: resolveFile('dist/bundle.js'),
+      file: resolveFile('packages/l7/dist/bundle.js'),
       format: 'umd',
       name: 'L7',
       globals: {
@@ -49,6 +51,11 @@ module.exports = [
         true,
       ),
       json(),
+      postcss({
+        plugins: [
+          url({ url: 'inline' }),
+        ],
+      }),
       // @see https://github.com/rollup/rollup-plugin-node-resolve#using-with-rollup-plugin-commonjs
       commonjs({
         namedExports: {

package.json

@@ -42,6 +42,7 @@
     "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-inline-webgl-constants": "^1.0.1",
     "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-transform-import-styles": "^0.0.11",
     "babel-plugin-transform-postcss": "^0.3.0",
     "babel-preset-gatsby": "^0.2.20",
     "clean-webpack-plugin": "^0.1.19",
@@ -73,6 +74,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^7.0.18",
     "postcss-plugin": "^1.0.0",
+    "postcss-url": "^8.0.0",
     "prettier": "^1.19.1",
     "raw-loader": "^1.0.0",
     "react": "^16.8.6",
@@ -85,6 +87,7 @@
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-terser": "^5.1.2",
     "rollup-pluginutils": "^2.8.2",
     "sass-loader": "^7.1.0",

packages/component/src/index.ts

@@ -6,4 +6,8 @@ import Zoom from './control/zoom';
 import Marker from './marker';
 import Popup from './popup';
 
+// 引入样式
+// TODO: 使用 Less 或者 Sass，每个组件单独引用自身样式
+import './css/l7.css';
+
 export { Control, Logo, Scale, Zoom, Layers, Marker, Popup };

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

@@ -51,6 +51,7 @@ export interface IPickedFeature {
 export interface ILayer {
   id: string; // 一个场景中同一类型 Layer 可能存在多个
   name: string; // 代表 Layer 的类型
+  inited: boolean; // 是否初始化完成
   visible: boolean;
   zIndex: number;
   minZoom: number;

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

@@ -24,17 +24,17 @@ export default class LayerService implements ILayerService {
 
   public add(layer: ILayer) {
     this.layers.push(layer);
-    this.initPlugin(layer);
-    layer.init();
   }
 
   public initLayers() {
     this.layers.forEach((layer) => {
+      if (!layer.inited) {
         // register plugins in every layer
         for (const plugin of layer.plugins) {
           plugin.apply(layer);
         }
         layer.init();
+      }
     });
   }
 

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

@@ -119,9 +119,6 @@ export default class Scene extends EventEmitter implements ISceneService {
       // 重新绑定非首次相机更新事件
       this.map.onCameraChanged(this.handleMapCameraChanged);
       this.logger.info('map loaded');
-
-      // scene 创建完成自动调用render 方法
-      this.render();
     });
 
     /**
@@ -155,6 +152,8 @@ export default class Scene extends EventEmitter implements ISceneService {
   public addLayer(layer: ILayer) {
     this.logger.info(`add layer ${layer.name}`);
     this.layerService.add(layer);
+    // scene 创建完成自动调用render 方法
+    this.render();
   }
 
   public async render() {
@@ -169,6 +168,8 @@ export default class Scene extends EventEmitter implements ISceneService {
       this.emit('loaded');
     }
 
+    // 尝试初始化未初始化的图层
+    this.layerService.initLayers();
     this.layerService.renderLayers();
     this.logger.info('render');
   }

packages/l7/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@antv/l7",
+  "version": "2.0.0-beta.4",
+  "description": "A Large-scale WebGL-powered Geospatial Data Visualization",
+  "main": "dist/bundle.js",
+  "sideEffects": true,
+  "files": [
+    "dist",
+    "lib",
+    "es",
+    "README.md"
+  ],
+  "scripts": {
+    "tsc": "tsc --project tsconfig.build.json",
+    "clean": "rimraf dist; rimraf es; rimraf lib;",
+    "build": "run-p build:*",
+    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
+  },
+  "author": "xiaoiver",
+  "license": "ISC",
+  "gitHead": "0563f357f3a07c099bf1ffa9350e6fa3c88353ae",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@antv/l7": "2.0.0-beta.4"
+  }
+}

packages/layers/src/core/BaseLayer.ts

@@ -69,6 +69,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   public zIndex: number = 0;
   public minZoom: number;
   public maxZoom: number;
+  public inited: boolean = false;
 
   // 生命周期钩子
   public hooks = {
@@ -179,6 +180,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   public init() {
     this.hooks.init.call();
     this.buildModels();
+
+    this.inited = true;
     return this;
   }