From fd586c60abfc13b0ddcae8f81fae7b4a34791cdb Mon Sep 17 00:00:00 2001 From: "yuqi.pyq" Date: Thu, 21 Nov 2019 17:36:04 +0800 Subject: [PATCH] fix(layerservice): fix init bugs in layer service --- babel.config.js | 5 +++- build/rollup.config.js | 9 +++++- package.json | 3 ++ packages/component/src/index.ts | 4 +++ .../core/src/services/layer/ILayerService.ts | 1 + .../core/src/services/layer/LayerService.ts | 12 ++++---- .../core/src/services/scene/SceneService.ts | 7 +++-- packages/l7/package.json | 30 +++++++++++++++++++ packages/layers/src/core/BaseLayer.ts | 3 ++ 9 files changed, 63 insertions(+), 11 deletions(-) create mode 100644 packages/l7/package.json diff --git a/babel.config.js b/babel.config.js index 439b91afb5..5fd43d6eda 100644 --- a/babel.config.js +++ b/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', diff --git a/build/rollup.config.js b/build/rollup.config.js index cf07153724..439e7fa187 100644 --- a/build/rollup.config.js +++ b/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: { diff --git a/package.json b/package.json index 0bfd8c2720..53baa1b1c0 100644 --- a/package.json +++ b/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", diff --git a/packages/component/src/index.ts b/packages/component/src/index.ts index 21eaa07aae..e006447f0f 100644 --- a/packages/component/src/index.ts +++ b/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 }; diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index 16959dcdc3..7e3083985a 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/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; diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts index 9dafcc1356..a513f8e45f 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/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) => { - // register plugins in every layer - for (const plugin of layer.plugins) { - plugin.apply(layer); + if (!layer.inited) { + // register plugins in every layer + for (const plugin of layer.plugins) { + plugin.apply(layer); + } + layer.init(); } - layer.init(); }); } diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index 89d66acefa..f6fe22a312 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/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'); } diff --git a/packages/l7/package.json b/packages/l7/package.json new file mode 100644 index 0000000000..cdc4b1a794 --- /dev/null +++ b/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" + } +} diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index d429712f89..5f87665af7 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -69,6 +69,7 @@ export default class BaseLayer 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 extends EventEmitter public init() { this.hooks.init.call(); this.buildModels(); + + this.inited = true; return this; }