From 7300c1aa6235bfb1e04d02713c0a5dfd266b3fd6 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Sun, 19 Jan 2020 19:40:25 +0800 Subject: [PATCH] fix: amap repeat js load --- docs/tutorial/data.en.md | 2 +- docs/tutorial/data.zh.md | 4 +- package.json | 2 +- packages/core/src/services/log/LogService.ts | 4 +- .../core/src/services/scene/SceneService.ts | 2 +- packages/maps/src/amap/index.ts | 54 +++++++------ stories/Layers/components/data_update.tsx | 12 +-- stories/MapAdaptor/components/MultiAMap.tsx | 76 +++++++++++++++++-- 8 files changed, 112 insertions(+), 44 deletions(-) diff --git a/docs/tutorial/data.en.md b/docs/tutorial/data.en.md index 483c3af048..45470c92aa 100644 --- a/docs/tutorial/data.en.md +++ b/docs/tutorial/data.en.md @@ -55,7 +55,7 @@ GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支 } ``` -## 地理统计分析工具 +#### 全国行政区划GeoJON 支持省市县维度  [turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库 ## 在线工具 diff --git a/docs/tutorial/data.zh.md b/docs/tutorial/data.zh.md index ac63abf260..7860943c6e 100644 --- a/docs/tutorial/data.zh.md +++ b/docs/tutorial/data.zh.md @@ -66,8 +66,8 @@ GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支 ## 数据资源 -#### 全国行政区划边界  -[支持 geojson, svg下载](http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4) +#### 全国行政区划GeoJON 支持省市县维度  +[geojson, svg下载](http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4) #### HighCharts 全球行政区划数据集 diff --git a/package.json b/package.json index 7f39d1369f..7cd3690df6 100644 --- a/package.json +++ b/package.json @@ -145,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 NODE_ENV=production 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 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/core/src/services/log/LogService.ts b/packages/core/src/services/log/LogService.ts index fd419c2200..533e2d2145 100644 --- a/packages/core/src/services/log/LogService.ts +++ b/packages/core/src/services/log/LogService.ts @@ -1,8 +1,8 @@ import { injectable } from 'inversify'; import Probe, { Log } from 'probe.gl'; import { ILogService } from './ILogService'; - -const Logger = new Log({ id: 'L7' }).enable(false); +console.log(process.env.NODE_ENV) +const Logger = new Log({ id: 'L7' }).enable(true); // // 只输出 debug 级别以上的日志信息 Logger.priority = 5; diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index 52ef208091..006f46230e 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/packages/core/src/services/scene/SceneService.ts @@ -144,7 +144,7 @@ export default class Scene extends EventEmitter implements ISceneService { this.markerService.addMarkerLayers(); // 地图初始化之后 才能初始化 container 上的交互 this.interactionService.init(); - this.logger.debug('map loaded'); + this.logger.debug(`map ${this.id} loaded`); }); /** diff --git a/packages/maps/src/amap/index.ts b/packages/maps/src/amap/index.ts index be812bff53..ef143e776d 100644 --- a/packages/maps/src/amap/index.ts +++ b/packages/maps/src/amap/index.ts @@ -248,43 +248,40 @@ export default class AMapService this.$mapContainer = this.creatAmapContainer( id as string | HTMLDivElement, ); - // @ts-ignore - this.map = new AMap.Map(this.$mapContainer, { + + const map = new AMap.Map(this.$mapContainer, { mapStyle: this.getMapStyle(style as string), zooms: [minZoom, maxZoom], viewMode: '3D', ...rest, }); // 监听地图相机事件 - this.map.on('camerachange', this.handleCameraChanged); - resolve(); + map.on('camerachange', this.handleCameraChanged); + // @ts-ignore + this.map = map; + setTimeout(() => { + resolve(); + }, 10); } }; - if (!document.getElementById(AMAP_SCRIPT_ID) || !mapInstance) { - // 异步加载高德地图 - // @see https://lbs.amap.com/api/javascript-api/guide/abc/load - // @ts-ignore - window.initAMap = (): void => { - amapLoaded = true; + if (!amapLoaded && !mapInstance) { + if (token === AMAP_API_KEY) { + this.logger.warn(this.configService.getSceneWarninfo('MapToken')); + } + amapLoaded = true; + this.loadAMapScript( + `https://webapi.amap.com/maps?v=${AMAP_VERSION}&key=${token}&plugin=Map3D${plugin.join( + ',', + )}`, + ).then(() => { resolveMap(); if (pendingResolveQueue.length) { pendingResolveQueue.forEach((r) => r()); pendingResolveQueue = []; } - }; - if (token === AMAP_API_KEY) { - this.logger.warn(this.configService.getSceneWarninfo('MapToken')); - } - const url: string = `https://webapi.amap.com/maps?v=${AMAP_VERSION}&key=${token}&plugin=Map3D${plugin.join( - ',', - )}&callback=initAMap`; - const $jsapi = document.createElement('script'); - $jsapi.id = AMAP_SCRIPT_ID; - $jsapi.charset = 'utf-8'; - $jsapi.src = url; - document.head.appendChild($jsapi); + }); } else { - if (amapLoaded || mapInstance) { + if ((amapLoaded && window.AMap) || mapInstance) { resolveMap(); } else { pendingResolveQueue.push(resolveMap); @@ -381,4 +378,15 @@ export default class AMapService $wrapper.appendChild($amapdiv); return $amapdiv; } + private loadAMapScript(src: string) { + return new Promise((resolve, reject) => { + const script = document.createElement('script'); + script.src = src; + script.onload = () => { + resolve(); + }; + script.onerror = reject; + document.head.appendChild(script); + }); + } } diff --git a/stories/Layers/components/data_update.tsx b/stories/Layers/components/data_update.tsx index 4325d7a105..1610e537b8 100644 --- a/stories/Layers/components/data_update.tsx +++ b/stories/Layers/components/data_update.tsx @@ -55,13 +55,13 @@ export default class DataUpdate extends React.Component { scene.addLayer(layer); layer.setData(pointOnCircle(1000)); scene.render(); - // function animateMarker(timestamp: number) { - // layer.setData(pointOnCircle(timestamp / 1000)); - // scene.render(); - // requestAnimationFrame(animateMarker); - // } + function animateMarker(timestamp: number) { + layer.setData(pointOnCircle(timestamp / 1000)); + scene.render(); + requestAnimationFrame(animateMarker); + } // layer.on('inited', () => { - // animateMarker(0); + animateMarker(0); // }); } diff --git a/stories/MapAdaptor/components/MultiAMap.tsx b/stories/MapAdaptor/components/MultiAMap.tsx index 45cbe6cdc8..73837a61af 100644 --- a/stories/MapAdaptor/components/MultiAMap.tsx +++ b/stories/MapAdaptor/components/MultiAMap.tsx @@ -1,5 +1,5 @@ // @ts-ignore -import { Scene } from '@antv/l7'; +import { PointLayer, Scene } from '@antv/l7'; import { GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; @@ -14,26 +14,86 @@ export default class MultiGaodeMap extends React.Component { public async componentDidMount() { const response = await fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', + 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', ); + const data = await response.json(); const scene1 = new Scene({ id: 'map1', map: new GaodeMap({ - center: [110.19382669582967, 50.258134], - pitch: 0, + center: [121.435159, 31.256971], + zoom: 14.89, style: 'light', - zoom: 3, }), }); const scene2 = new Scene({ id: 'map2', map: new GaodeMap({ - center: [110.19382669582967, 50.258134], - pitch: 0, + center: [121.435159, 31.256971], + zoom: 14.89, style: 'dark', - zoom: 3, }), }); + + const pointLayer = new PointLayer({}) + .source(data, { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude', + }, + }) + .shape('name', [ + 'circle', + 'triangle', + 'square', + 'pentagon', + 'hexagon', + 'octogon', + 'hexagram', + 'rhombus', + 'vesica', + ]) + .size('unit_price', [10, 25]) + .active(true) + .color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452']) + .style({ + opacity: 0.3, + strokeWidth: 2, + }); + + const pointLayer2 = new PointLayer({}) + .source(data, { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude', + }, + }) + .shape('name', [ + 'circle', + 'triangle', + 'square', + 'pentagon', + 'hexagon', + 'octogon', + 'hexagram', + 'rhombus', + 'vesica', + ]) + .size('unit_price', [10, 25]) + .active(true) + .color('#5B8FF9') + .style({ + opacity: 0.3, + strokeWidth: 2, + }); + scene1.on('loaded', () => { + scene1.addLayer(pointLayer); + }); + scene2.on('loaded', () => { + scene2.addLayer(pointLayer2); + }); + this.scene1 = scene1; this.scene2 = scene2; }