fix(map): amap contanier creat new amap div

This commit is contained in:
thinkinggis 2019-11-24 20:59:58 +08:00
parent 7f791a1952
commit a34a18e685
8 changed files with 37 additions and 15 deletions

View File

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

View File

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

View File

@ -141,6 +141,7 @@
"build:declarations": "lerna exec --stream --no-bail 'tsc --project ./tsconfig.build.json'", "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'", "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": "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", "glsl-minify": "node_modules/.bin/glsl-minifier -i ./build/example.frag -o ./build/example.min.frag",
"clean": "lerna run clean" "clean": "lerna run clean"
}, },

View File

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

View File

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

3
packages/l7/.gitignore vendored Normal file
View File

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

View File

@ -189,18 +189,17 @@ export default class AMapService implements IMapService {
token = AMAP_API_KEY, token = AMAP_API_KEY,
...rest ...rest
} = mapConfig; } = mapConfig;
// 高德地图创建独立的container
this.$mapContainer = document.getElementById(id); // @ts-ignore
this.$mapContainer = this.creatAmapContainer(id);
// this.eventEmitter = container.get(TYPES.IEventEmitter);
// tslint:disable-next-line:typedef // tslint:disable-next-line:typedef
await new Promise((resolve) => { await new Promise((resolve) => {
// 异步加载高德地图 // 异步加载高德地图
// @see https://lbs.amap.com/api/javascript-api/guide/abc/load // @see https://lbs.amap.com/api/javascript-api/guide/abc/load
window.onload = (): void => { window.onload = (): void => {
// @ts-ignore // @ts-ignore
this.map = new AMap.Map(id, { this.map = new AMap.Map(this.$mapContainer, {
mapStyle: this.getMapStyle(style), mapStyle: this.getMapStyle(style),
zooms: [minZoom, maxZoom], zooms: [minZoom, maxZoom],
viewMode: '3D', viewMode: '3D',
@ -293,4 +292,21 @@ export default class AMapService implements IMapService {
private getMapStyle(name: string) { private getMapStyle(name: string) {
return MapTheme[name] ? MapTheme[name] : name; 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;
}
} }

View File

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