From bf4313678501ec9c96da43de87b3b8dbf7be4c18 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Sun, 24 Nov 2019 20:59:58 +0800 Subject: [PATCH] fix(map): amap contanier creat new amap div --- babel.config.js | 4 +-- gatsby-browser.js | 2 +- package.json | 1 + .../core/src/services/scene/SceneService.ts | 4 +-- packages/core/src/utils/dom.ts | 10 ++++--- packages/l7/.gitignore | 3 +++ packages/maps/src/amap/index.ts | 26 +++++++++++++++---- packages/scene/src/index.ts | 2 +- 8 files changed, 37 insertions(+), 15 deletions(-) create mode 100644 packages/l7/.gitignore diff --git a/babel.config.js b/babel.config.js index ca6abef2c6..94bf9d8dd1 100644 --- a/babel.config.js +++ b/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', diff --git a/gatsby-browser.js b/gatsby-browser.js index 6e6d46584a..acbf35756f 100644 --- a/gatsby-browser.js +++ b/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'); diff --git a/package.json b/package.json index 27508ff1c3..56e8b08014 100644 --- a/package.json +++ b/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" }, diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index f6fe22a312..248c019efa 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/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; } // 尝试初始化未初始化的图层 diff --git a/packages/core/src/utils/dom.ts b/packages/core/src/utils/dom.ts index 35b543e7ce..94093c13f7 100644 --- a/packages/core/src/utils/dom.ts +++ b/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 += ` diff --git a/packages/l7/.gitignore b/packages/l7/.gitignore new file mode 100644 index 0000000000..49c199b6ab --- /dev/null +++ b/packages/l7/.gitignore @@ -0,0 +1,3 @@ +lib +es +dist diff --git a/packages/maps/src/amap/index.ts b/packages/maps/src/amap/index.ts index cc715e0a1a..c5e57c6bee 100644 --- a/packages/maps/src/amap/index.ts +++ b/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; + } } diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index 8cd3bead9f..e70febb258 100644 --- a/packages/scene/src/index.ts +++ b/packages/scene/src/index.ts @@ -110,7 +110,7 @@ class Scene { // 初始化 scene this.sceneService.init(config); - // 初始化组件 + // 初始化组件 TODO: render 初始化完成之后 this.initControl(); }