p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: popup service init

This commit is contained in:
thinkinggis 2020-01-20 12:14:49 +08:00
parent 20f35d4559
commit aabb45159b
13 changed files with 222 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.storybook/webpack.config.js
View File

@ -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');

1
package.json
View File

@ -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",

25
packages/core/src/inversify.config.ts
View File

@ -73,10 +73,10 @@ container
.bind<IGlobalConfigService>(TYPES.IGlobalConfigService)
.to(GlobalConfigService)
.inSingletonScope();
container
.bind<IIconService>(TYPES.IIconService)
.to(IconService)
.inSingletonScope();
// container
// .bind<IIconService>(TYPES.IIconService)
// .to(IconService)
// .inSingletonScope();
container
.bind<IShaderModuleService>(TYPES.IShaderModuleService)
.to(ShaderModuleService)
@ -85,10 +85,10 @@ container
.bind<ILogService>(TYPES.ILogService)
.to(LogService)
.inSingletonScope();
container
.bind<IFontService>(TYPES.IFontService)
.to(FontService)
.inSingletonScope();
// container
// .bind<IFontService>(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<string>(TYPES.SceneID)
.toConstantValue(`${sceneIdCounter++}`);
sceneContainer
.bind<ILayerService>(TYPES.ILayerService)
.to(LayerService)
@ -189,6 +188,14 @@ export function createSceneContainer() {
.bind<IMarkerService>(TYPES.IMarkerService)
.to(MarkerService)
.inSingletonScope();
sceneContainer
.bind<IIconService>(TYPES.IIconService)
.to(IconService)
.inSingletonScope();
sceneContainer
.bind<IFontService>(TYPES.IFontService)
.to(FontService)
.inSingletonScope();
sceneContainer
.bind<IPopupService>(TYPES.IPopupService)

1
packages/core/src/services/component/IPopupService.ts
View File

@ -15,5 +15,6 @@ export interface IPopupService {
addPopup(popup: IPopup): void;
removePopup(popup: IPopup): void;
init(scene: Container): void;
initPopup(): void;
destroy(): void;
}

17
packages/core/src/services/component/PopupService.ts
View File

@ -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<IMapService>(TYPES.IMapService);
}
}

6
packages/core/src/services/scene/SceneService.ts
View File

@ -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`);

3
packages/layers/src/core/BaseLayer.ts
View File

@ -230,10 +230,11 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
this.configService.setLayerConfig(sceneId, this.id, {});
// 全局容器服务
// 场景容器服务
this.iconService = this.container.get<IIconService>(TYPES.IIconService);
this.fontService = this.container.get<IFontService>(TYPES.IFontService);
// 场景容器服务
this.rendererService = this.container.get<IRendererService>(
TYPES.IRendererService,
);

16
packages/layers/src/core/BaseModel.ts
View File

@ -32,16 +32,18 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
@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<ChildLayerStyleOptions = {}>
.getContainer()
.get<IStyleAttributeService>(TYPES.IStyleAttributeService);
this.mapService = layer.getContainer().get<IMapService>(TYPES.IMapService);
this.iconService = layer
.getContainer()
.get<IIconService>(TYPES.IIconService);
this.fontService = layer
.getContainer()
.get<IFontService>(TYPES.IFontService);
this.cameraService = layer
.getContainer()
.get<ICameraService>(TYPES.ICameraService);

4
stories/MapAdaptor/Map.stories.tsx
View File

@ -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('多个高德地图实例', () => <MultiAMap />, {
notes: { markdown: notes },
})
.add('多个高德图层', () => <MultiAMapLayer />, {
notes: { markdown: notes },
})
.add('多个 Mapbox 实例', () => <MultiMapbox />, {
notes: { markdown: notes },
})

12
stories/MapAdaptor/components/MultiAMap.tsx
View File

@ -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;

15
stories/MapAdaptor/components/image/icon.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 58 (84663) - https://sketch.com -->
<title>cloth</title>
<desc>Created with Sketch.</desc>
<g id="cloth" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-2-Copy-21">
<circle id="Oval" fill="#26BEBA" cx="19" cy="19" r="19"></circle>
<circle id="Oval-Copy" fill="#F7FFFF" cx="19" cy="19" r="16"></circle>
<g id="Group-12" transform="translate(10.000000, 9.000000)" fill="#26BEBA">
<path d="M12.91,6.00427273 L12.9103448,19 L9.43448276,19 L9.434,9.48627273 L12.91,6.00427273 Z M4.965,5.47627273 L8.441,8.95827273 L8.44137931,19 L4.96551724,19 L4.965,5.47627273 Z M17.8758621,2.48727273 L17.8758621,19 L13.9034483,19 L13.903,5.00927273 L16.421,2.48727273 L17.8758621,2.48727273 Z M1.98,2.48727273 L3.972,4.48227273 L3.97241379,19 L-1.59872116e-14,19 L-1.59872116e-14,2.48727273 L1.98,2.48727273 Z M12.9206807,-1.80522264e-13 L15.0273712,2.11052089 L9.05841469,8.0903301 L9.003,8.035 L8.9482669,8.0903301 L2.97931034,2.11052089 L5.08600089,-5.65991698e-13 L9.003,3.924 L12.9206807,-1.80522264e-13 Z M11.4735522,6.66133815e-16 L8.97732484,2.50131221 L6.48055222,6.66133815e-16 L11.4735522,6.66133815e-16 Z" id="形状结合"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

120
stories/MapAdaptor/components/multiMaptest.tsx Normal file
View File

@ -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 (
<>
<div
id="map1"
style={{
position: 'absolute',
top: 0,
left: 0,
right: '50%',
bottom: 0,
}}
/>
<div
id="map2"
style={{
position: 'absolute',
top: 0,
left: '50%',
right: 0,
bottom: 0,
}}
/>
</>
);
}
}

51
yarn.lock
View File

@ -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==