From 052f306faf80f723b6d2d2458f38c7b42ce1b65c Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Thu, 16 Jan 2020 18:22:38 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- babel.config.js | 1 + examples/gallery/animate/demo/world.js | 1 + examples/gallery/animate/demo/world2.js | 1 + package.json | 3 ++- packages/component/src/marker.ts | 2 +- .../src/services/config/IConfigService.ts | 2 +- .../core/src/services/layer/LayerService.ts | 6 +++++ packages/core/src/services/log/LogService.ts | 1 - packages/core/src/services/map/IMapService.ts | 2 +- .../core/src/services/scene/SceneService.ts | 3 ++- .../src/services/source/ISourceService.ts | 2 ++ packages/layers/src/core/BaseLayer.ts | 23 +++++++++++++++---- .../layers/src/plugins/DataSourcePlugin.ts | 7 ++++-- packages/maps/src/BaseMapWrapper.ts | 4 +--- packages/maps/src/amap/index.ts | 2 +- packages/scene/src/index.ts | 1 - packages/source/src/source.ts | 17 +++++++++++++- stories/Components/components/chart.tsx | 1 + stories/Layers/components/Point.tsx | 12 +++++++--- stories/MapAdaptor/components/MapInstance.tsx | 1 + stories/MapAdaptor/components/Mapbox.tsx | 2 +- .../MapAdaptor/components/amapInstance.tsx | 0 yarn.lock | 5 ++++ 23 files changed, 76 insertions(+), 23 deletions(-) create mode 100644 stories/MapAdaptor/components/amapInstance.tsx diff --git a/babel.config.js b/babel.config.js index d5df1bfabf..258f9904e7 100644 --- a/babel.config.js +++ b/babel.config.js @@ -16,6 +16,7 @@ module.exports = api => { plugins: [ '@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-nullish-coalescing-operator', + 'transform-inline-environment-variables', [ '@babel/plugin-proposal-decorators', { diff --git a/examples/gallery/animate/demo/world.js b/examples/gallery/animate/demo/world.js index 97118c1a26..eb23c049d6 100644 --- a/examples/gallery/animate/demo/world.js +++ b/examples/gallery/animate/demo/world.js @@ -77,6 +77,7 @@ Promise.all([ .color('#ff6b34') .shape('arc3d') .size(2) + .active(true) .animate({ interval: 2, trailLength: 2, diff --git a/examples/gallery/animate/demo/world2.js b/examples/gallery/animate/demo/world2.js index 35f81e1ead..5f94041bd1 100644 --- a/examples/gallery/animate/demo/world2.js +++ b/examples/gallery/animate/demo/world2.js @@ -80,6 +80,7 @@ Promise.all([ .color('#b97feb') .shape('arc3d') .size(2) + .active(true) .animate({ interval: 2, trailLength: 2, diff --git a/package.json b/package.json index 729a552860..d7dac06625 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "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-inline-environment-variables": "^0.4.3", "babel-plugin-transform-postcss": "^0.3.0", "babel-preset-gatsby": "^0.2.22", "babel-template": "^6.26.0", @@ -144,7 +145,7 @@ "test-live": "cross-env BABEL_ENV=test DEBUG_MODE=1 jest --watch packages/scene/__tests__/index.spec.ts ", "coveralls": "jest --coverage && cat ./tests/coverage/lcov.info | coveralls", "tsc": "tsc", - "watch": "yarn clean && lerna exec --parallel -- cross-env 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 -- cross-env BABEL_ENV=cjs NODE_ENV=production babel --watch src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments", "bundle": "cross-env BABEL_ENV=bundle node_modules/.bin/rollup -c ./build/rollup.config.js", "bundle:watch": "cross-env 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", diff --git a/packages/component/src/marker.ts b/packages/component/src/marker.ts index c4f8aa349d..5b1a8fca83 100644 --- a/packages/component/src/marker.ts +++ b/packages/component/src/marker.ts @@ -16,7 +16,7 @@ export interface IMarkerOption { export default class Marker extends EventEmitter { private markerOption: IMarkerOption; private defaultMarker: boolean; - private popup: IPopup; // TODO: POPup + private popup: IPopup; private mapsService: IMapService; private lngLat: ILngLat; private scene: Container; diff --git a/packages/core/src/services/config/IConfigService.ts b/packages/core/src/services/config/IConfigService.ts index 13296339b4..9b09e2a052 100644 --- a/packages/core/src/services/config/IConfigService.ts +++ b/packages/core/src/services/config/IConfigService.ts @@ -4,7 +4,7 @@ import { IMapWrapper } from '../map/IMapService'; import { IRenderConfig } from '../renderer/IRendererService'; export interface ISceneConfig extends IRenderConfig { - id: string; + id: string | HTMLDivElement; map: IMapWrapper; } diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts index 784465ff0c..2f85b75c28 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/packages/core/src/services/layer/LayerService.ts @@ -14,6 +14,8 @@ export default class LayerService implements ILayerService { private layerRenderID: number; + private sceneInited: boolean = false; + private animateInstanceCount: number = 0; private alreadyInRendering: boolean = false; @@ -25,10 +27,14 @@ export default class LayerService implements ILayerService { private readonly configService: IGlobalConfigService; public add(layer: ILayer) { + // if (this.sceneInited) { + // layer.init(); + // } this.layers.push(layer); } public initLayers() { + this.sceneInited = true; this.layers.forEach((layer) => { if (!layer.inited) { layer.init(); diff --git a/packages/core/src/services/log/LogService.ts b/packages/core/src/services/log/LogService.ts index e158a702f4..fd419c2200 100644 --- a/packages/core/src/services/log/LogService.ts +++ b/packages/core/src/services/log/LogService.ts @@ -3,7 +3,6 @@ import Probe, { Log } from 'probe.gl'; import { ILogService } from './ILogService'; const Logger = new Log({ id: 'L7' }).enable(false); - // // 只输出 debug 级别以上的日志信息 Logger.priority = 5; diff --git a/packages/core/src/services/map/IMapService.ts b/packages/core/src/services/map/IMapService.ts index 0fed5893e8..1cad47d771 100644 --- a/packages/core/src/services/map/IMapService.ts +++ b/packages/core/src/services/map/IMapService.ts @@ -13,7 +13,7 @@ export interface IPoint { export type MapStyle = string | { [key: string]: any }; export interface IMapWrapper { - setContainer(container: Container, id: string): void; + setContainer(container: Container, id: string | HTMLDivElement): void; } export interface IMapService { diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index dc1064a0f6..8ff100028d 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/packages/core/src/services/scene/SceneService.ts @@ -200,6 +200,7 @@ export default class Scene extends EventEmitter implements ISceneService { // FIXME: 初始化 marker 容器，可以放到 map 初始化方法中？ this.logger.info(' render inited'); + this.controlService.addControls(); this.emit('loaded'); this.inited = true; } @@ -208,7 +209,7 @@ export default class Scene extends EventEmitter implements ISceneService { this.layerService.initLayers(); this.layerService.renderLayers(); // 组件需要等待layer 初始化完成之后添加 - this.controlService.addControls(); + this.logger.debug(`scene ${this.id} render`); this.rendering = false; diff --git a/packages/core/src/services/source/ISourceService.ts b/packages/core/src/services/source/ISourceService.ts index 141ddee37a..74ecc54ec0 100644 --- a/packages/core/src/services/source/ISourceService.ts +++ b/packages/core/src/services/source/ISourceService.ts @@ -61,8 +61,10 @@ export interface ISource { data: IParserData; cluster: boolean; clusterOptions: Partial; + setData(data: any): void; updateClusterData(zoom: number): void; getFeatureById(id: number): unknown; + getFeatureId(field: string, value: any): number | undefined; getClusters(zoom: number): any; getClustersLeaves(id: number): any; } diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 57321311fc..8494eeef23 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -419,10 +419,14 @@ export default class BaseLayer extends EventEmitter } public setData(data: any, options?: ISourceCFG) { - this.sourceOption.data = data; - this.sourceOption.options = options; - this.hooks.init.call(); - this.buildModels(); + if (this.inited) { + this.layerSource.setData(data); + } else { + this.on('inited', () => { + this.layerSource.setData(data); + }); + } + return this; } public style( @@ -641,6 +645,8 @@ export default class BaseLayer extends EventEmitter public destroy() { this.hooks.beforeDestroy.call(); + // 清除sources事件 + this.layerSource.off('update', this.sourceEvent); // 清除所有属性以及关联的 vao this.styleAttributeService.clearAllAttributes(); @@ -673,11 +679,12 @@ export default class BaseLayer extends EventEmitter public setSource(source: Source) { this.layerSource = source; - const bounds = this.mapService.getBounds(); const zoom = this.mapService.getZoom(); if (this.layerSource.cluster) { this.layerSource.updateClusterData(zoom); } + // source 可能会复用，会在其它layer被修改 + this.layerSource.on('update', this.sourceEvent); } public getSource() { return this.layerSource; @@ -793,6 +800,12 @@ export default class BaseLayer extends EventEmitter protected getDefaultConfig() { return {}; } + + private sourceEvent = () => { + this.dataState.dataSourceNeedUpdate = true; + this.reRender(); + }; + private reRender() { if (this.inited) { this.layerService.renderLayers(); diff --git a/packages/layers/src/plugins/DataSourcePlugin.ts b/packages/layers/src/plugins/DataSourcePlugin.ts index 371fe51bb2..b9683f93b5 100644 --- a/packages/layers/src/plugins/DataSourcePlugin.ts +++ b/packages/layers/src/plugins/DataSourcePlugin.ts @@ -13,9 +13,12 @@ export default class DataSourcePlugin implements ILayerPlugin { this.updateClusterData(layer); }); - // 检测数据是不否需要更新 + // 检测数据不否需要更新 layer.hooks.beforeRenderData.tap('DataSourcePlugin', (flag) => { - return this.updateClusterData(layer); + const neeUpdate1 = this.updateClusterData(layer); + const neeUpdate2 = layer.dataState.dataSourceNeedUpdate; + layer.dataState.dataSourceNeedUpdate = false; + return neeUpdate1 || neeUpdate2; }); } diff --git a/packages/maps/src/BaseMapWrapper.ts b/packages/maps/src/BaseMapWrapper.ts index 3885a1d300..8dcb324465 100644 --- a/packages/maps/src/BaseMapWrapper.ts +++ b/packages/maps/src/BaseMapWrapper.ts @@ -8,7 +8,6 @@ import { TYPES, } from '@antv/l7-core'; import { Container } from 'inversify'; - export default class BaseMapWrapper implements IMapWrapper { @lazyInject(TYPES.ILogService) protected readonly logger: ILogService; @@ -23,7 +22,7 @@ export default class BaseMapWrapper implements IMapWrapper { } public setContainer(sceneContainer: Container, id: string) { - // 首先使用全局配置服务校验地图参数 + // // 首先使用全局配置服务校验地图参数 const { valid, errorText } = this.configService.validateMapConfig( this.config, ); @@ -32,7 +31,6 @@ export default class BaseMapWrapper implements IMapWrapper { this.logger.error(errorText || ''); return; } - // 绑定用户传入的原始地图参数 sceneContainer.bind>(TYPES.MapConfig).toConstantValue({ ...this.config, diff --git a/packages/maps/src/amap/index.ts b/packages/maps/src/amap/index.ts index 51db48ee19..5ba8b609be 100644 --- a/packages/maps/src/amap/index.ts +++ b/packages/maps/src/amap/index.ts @@ -260,7 +260,7 @@ export default class AMapService resolve(); } }; - if (!document.getElementById(AMAP_SCRIPT_ID)) { + if (!document.getElementById(AMAP_SCRIPT_ID) || !mapInstance) { // 异步加载高德地图 // @see https://lbs.amap.com/api/javascript-api/guide/abc/load // @ts-ignore diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index ba8bc2fac7..d57f3827ba 100644 --- a/packages/scene/src/index.ts +++ b/packages/scene/src/index.ts @@ -61,7 +61,6 @@ class Scene // 创建场景容器 const sceneContainer = createSceneContainer(); this.container = sceneContainer; - // 绑定地图服务 map.setContainer(sceneContainer, id); diff --git a/packages/source/src/source.ts b/packages/source/src/source.ts index b991dd0a55..c7db82343f 100644 --- a/packages/source/src/source.ts +++ b/packages/source/src/source.ts @@ -1,6 +1,7 @@ import { IClusterOptions, IMapService, + IParseDataItem, IParserCfg, IParserData, ISourceCFG, @@ -84,6 +85,13 @@ export default class Source extends EventEmitter { }); this.init(); } + + public setData(data: any) { + this.rawData = data; + this.originData = cloneDeep(data); + this.init(); + this.emit('update'); + } public getClusters(zoom: number): any { return this.clusterIndex.getClusters(this.extent, zoom); } @@ -128,7 +136,7 @@ export default class Source extends EventEmitter { } public getFeatureById(id: number): unknown { const { type = 'geojson' } = this.parser; - if (type === 'geojson') { + if (type === 'geojson' && !this.cluster) { return id < this.rawData.features.length ? this.rawData.features[id] : 'null'; @@ -137,6 +145,13 @@ export default class Source extends EventEmitter { } } + public getFeatureId(field: string, value: any): number | undefined { + const feature = this.data.dataArray.find((dataItem: IParseDataItem) => { + return dataItem[field] === name; + }); + return feature?._id; + } + private excuteParser(): void { const parser = this.parser; const type: string = parser.type || 'geojson'; diff --git a/stories/Components/components/chart.tsx b/stories/Components/components/chart.tsx index 095643fe4c..98a9bdb214 100644 --- a/stories/Components/components/chart.tsx +++ b/stories/Components/components/chart.tsx @@ -23,6 +23,7 @@ export default class ChartComponent extends React.Component { }); addChart(); scene.render(); + this.scene = scene; function addChart() { Promise.all([ fetch( diff --git a/stories/Layers/components/Point.tsx b/stories/Layers/components/Point.tsx index 6803927199..6cdba83922 100644 --- a/stories/Layers/components/Point.tsx +++ b/stories/Layers/components/Point.tsx @@ -35,16 +35,22 @@ export default class Point3D extends React.Component { // .scale('point_count', { // type: 'quantile', // }) - // .size('point_count', [5, 10, 15, 20, 25]) - .size(5) + .size('mag', [5, 10, 15, 20, 25]) .animate(false) .active(true) .color('yellow') .style({ - opacity: 1, + opacity: 0.5, strokeWidth: 1, }); scene.addLayer(pointLayer); + scene.on('loaded', () => { + const newData = { + type: 'FeatureCollection', + features: pointsData.features.slice(0, 100), + }; + pointLayer.setData(newData); + }); this.scene = scene; // }); } diff --git a/stories/MapAdaptor/components/MapInstance.tsx b/stories/MapAdaptor/components/MapInstance.tsx index 1251d5dd23..77f1410b67 100644 --- a/stories/MapAdaptor/components/MapInstance.tsx +++ b/stories/MapAdaptor/components/MapInstance.tsx @@ -25,6 +25,7 @@ export default class GaodeMapComponent extends React.Component { center: [116.397428, 39.90923], // 初始化地图中心点 }); const scene = new Scene({ + // @ts-ignore id: 'map', map: new GaodeMap({ mapInstance: map, diff --git a/stories/MapAdaptor/components/Mapbox.tsx b/stories/MapAdaptor/components/Mapbox.tsx index 0cdc21f1a8..8952842585 100644 --- a/stories/MapAdaptor/components/Mapbox.tsx +++ b/stories/MapAdaptor/components/Mapbox.tsx @@ -17,7 +17,7 @@ export default class MapboxComponent extends React.Component { const scene = new Scene({ id: 'map', map: new Mapbox({ - style: 'mapbox://styles/mapbox/streets-v9', + style: 'dark', center: [110.19382669582967, 30.258134], pitch: 0, zoom: 3, diff --git a/stories/MapAdaptor/components/amapInstance.tsx b/stories/MapAdaptor/components/amapInstance.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/yarn.lock b/yarn.lock index 2b6c263f10..7fa8a05eba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5335,6 +5335,11 @@ babel-plugin-transform-inline-consecutive-adds@^0.4.3: resolved "https://registry.npm.taobao.org/babel-plugin-transform-inline-consecutive-adds/download/babel-plugin-transform-inline-consecutive-adds-0.4.3.tgz#323d47a3ea63a83a7ac3c811ae8e6941faf2b0d1" integrity sha1-Mj1Ho+pjqDp6w8gRro5pQfrysNE= +babel-plugin-transform-inline-environment-variables@^0.4.3: + version "0.4.3" + resolved "https://registry.npmjs.org/babel-plugin-transform-inline-environment-variables/-/babel-plugin-transform-inline-environment-variables-0.4.3.tgz#a3b09883353be8b5e2336e3ff1ef8a5d93f9c489" + integrity sha1-o7CYgzU76LXiM24/8e+KXZP5xIk= + babel-plugin-transform-member-expression-literals@^6.9.4: version "6.9.4" resolved "https://registry.npm.taobao.org/babel-plugin-transform-member-expression-literals/download/babel-plugin-transform-member-expression-literals-6.9.4.tgz#37039c9a0c3313a39495faac2ff3a6b5b9d038bf"