From f89b9b2c2c2cccc6758bb4a1993a779a1b426896 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Mon, 20 Jan 2020 12:14:49 +0800 Subject: [PATCH] fix: popup service init --- .storybook/webpack.config.js | 4 + package.json | 1 + packages/core/src/inversify.config.ts | 25 ++-- .../src/services/component/IPopupService.ts | 1 + .../src/services/component/PopupService.ts | 17 ++- .../core/src/services/scene/SceneService.ts | 6 + packages/layers/src/core/BaseLayer.ts | 3 +- packages/layers/src/core/BaseModel.ts | 16 ++- stories/MapAdaptor/Map.stories.tsx | 4 + stories/MapAdaptor/components/MultiAMap.tsx | 12 +- stories/MapAdaptor/components/image/icon.svg | 15 +++ .../MapAdaptor/components/multiMaptest.tsx | 120 ++++++++++++++++++ yarn.lock | 51 +++----- 13 files changed, 222 insertions(+), 53 deletions(-) create mode 100644 stories/MapAdaptor/components/image/icon.svg create mode 100644 stories/MapAdaptor/components/multiMaptest.tsx diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index a6d68c08d1..718ea05366 100644 --- a/.storybook/webpack.config.js +++ b/.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'); diff --git a/package.json b/package.json index 7cd3690df6..78e7ccf6a1 100644 --- a/package.json +++ b/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", diff --git a/packages/core/src/inversify.config.ts b/packages/core/src/inversify.config.ts index 9c1f0f18f6..6e97dea9f4 100644 --- a/packages/core/src/inversify.config.ts +++ b/packages/core/src/inversify.config.ts @@ -73,10 +73,10 @@ container .bind(TYPES.IGlobalConfigService) .to(GlobalConfigService) .inSingletonScope(); -container - .bind(TYPES.IIconService) - .to(IconService) - .inSingletonScope(); +// container +// .bind(TYPES.IIconService) +// .to(IconService) +// .inSingletonScope(); container .bind(TYPES.IShaderModuleService) .to(ShaderModuleService) @@ -85,10 +85,10 @@ container .bind(TYPES.ILogService) .to(LogService) .inSingletonScope(); -container - .bind(TYPES.IFontService) - .to(FontService) - .inSingletonScope(); +// container +// .bind(TYPES.IFontService) +// .to(FontService) +// .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(TYPES.SceneID) .toConstantValue(`${sceneIdCounter++}`); - sceneContainer .bind(TYPES.ILayerService) .to(LayerService) @@ -189,6 +188,14 @@ export function createSceneContainer() { .bind(TYPES.IMarkerService) .to(MarkerService) .inSingletonScope(); + sceneContainer + .bind(TYPES.IIconService) + .to(IconService) + .inSingletonScope(); + sceneContainer + .bind(TYPES.IFontService) + .to(FontService) + .inSingletonScope(); sceneContainer .bind(TYPES.IPopupService) diff --git a/packages/core/src/services/component/IPopupService.ts b/packages/core/src/services/component/IPopupService.ts index 271650185c..d0f208099c 100644 --- a/packages/core/src/services/component/IPopupService.ts +++ b/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; } diff --git a/packages/core/src/services/component/PopupService.ts b/packages/core/src/services/component/PopupService.ts index 49080d4179..f5ceb32d85 100644 --- a/packages/core/src/services/component/PopupService.ts +++ b/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); - this.popup = popup; + if (this.mapsService.map && this.mapsService.getMarkerContainer()) { + 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(TYPES.IMapService); } } diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index 006f46230e..94c4426411 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/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`); diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 85d5e58fdb..b902419d14 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -230,10 +230,11 @@ export default class BaseLayer extends EventEmitter this.configService.setLayerConfig(sceneId, this.id, {}); // 全局容器服务 + + // 场景容器服务 this.iconService = this.container.get(TYPES.IIconService); this.fontService = this.container.get(TYPES.IFontService); - // 场景容器服务 this.rendererService = this.container.get( TYPES.IRendererService, ); diff --git a/packages/layers/src/core/BaseModel.ts b/packages/layers/src/core/BaseModel.ts index f81c28e342..79dd167b5a 100644 --- a/packages/layers/src/core/BaseModel.ts +++ b/packages/layers/src/core/BaseModel.ts @@ -32,16 +32,18 @@ export default class BaseModel @lazyInject(TYPES.IGlobalConfigService) protected readonly configService: IGlobalConfigService; - @lazyInject(TYPES.IIconService) - protected readonly iconService: IIconService; + // @lazyInject(TYPES.IIconService) + // protected readonly iconService: IIconService; - @lazyInject(TYPES.IFontService) - protected readonly fontService: IFontService; + // @lazyInject(TYPES.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 .getContainer() .get(TYPES.IStyleAttributeService); this.mapService = layer.getContainer().get(TYPES.IMapService); + this.iconService = layer + .getContainer() + .get(TYPES.IIconService); + this.fontService = layer + .getContainer() + .get(TYPES.IFontService); this.cameraService = layer .getContainer() .get(TYPES.ICameraService); diff --git a/stories/MapAdaptor/Map.stories.tsx b/stories/MapAdaptor/Map.stories.tsx index 6fb447d6a1..06c87128ca 100644 --- a/stories/MapAdaptor/Map.stories.tsx +++ b/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('多个高德地图实例', () => , { notes: { markdown: notes }, }) + .add('多个高德图层', () => , { + notes: { markdown: notes }, + }) .add('多个 Mapbox 实例', () => , { notes: { markdown: notes }, }) diff --git a/stories/MapAdaptor/components/MultiAMap.tsx b/stories/MapAdaptor/components/MultiAMap.tsx index 73837a61af..837f13c4a6 100644 --- a/stories/MapAdaptor/components/MultiAMap.tsx +++ b/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.addLayer(pointLayer); - }); - scene2.on('loaded', () => { - scene2.addLayer(pointLayer2); - }); + // scene1.on('loaded', () => { + scene1.addLayer(pointLayer); + // }); + // scene2.on('loaded', () => { + scene2.addLayer(pointLayer2); + // }); this.scene1 = scene1; this.scene2 = scene2; diff --git a/stories/MapAdaptor/components/image/icon.svg b/stories/MapAdaptor/components/image/icon.svg new file mode 100644 index 0000000000..7f8381ee61 --- /dev/null +++ b/stories/MapAdaptor/components/image/icon.svg @@ -0,0 +1,15 @@ + + + + cloth + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/stories/MapAdaptor/components/multiMaptest.tsx b/stories/MapAdaptor/components/multiMaptest.tsx new file mode 100644 index 0000000000..04220e3630 --- /dev/null +++ b/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 ( + <> +
+
+ + ); + } +} diff --git a/yarn.lock b/yarn.lock index a318065296..61914ee679 100644 --- a/yarn.lock +++ b/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==