fix: amap repeat js load

docs/tutorial/data.en.md

@@ -55,7 +55,7 @@ GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支
 }
 ```
 
-## 地理统计分析工具
+#### 全国行政区划GeoJON 支持省市县维度 
 [turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库
 
 ## 在线工具

docs/tutorial/data.zh.md

@@ -66,8 +66,8 @@ GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支
 
 ## 数据资源
 
-#### 全国行政区划边界 
+#### 全国行政区划GeoJON 支持省市县维度 
-[支持 geojson, svg下载](http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4)
+[geojson, svg下载](http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4)
 
 #### HighCharts 全球行政区划数据集
 

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

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';
-
+console.log(process.env.NODE_ENV)
-const Logger = new Log({ id: 'L7' }).enable(false);
+const Logger = new Log({ id: 'L7' }).enable(true);
 // // 只输出 debug 级别以上的日志信息
 Logger.priority = 5;
 

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`);
     });
 
     /**

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);
+          map.on('camerachange', this.handleCameraChanged);
+          // @ts-ignore
+          this.map = map;
+          setTimeout(() => {
             resolve();
+          }, 10);
         }
       };
-      if (!document.getElementById(AMAP_SCRIPT_ID) || !mapInstance) {
+      if (!amapLoaded && !mapInstance) {
-        // 异步加载高德地图
+        if (token === AMAP_API_KEY) {
-        // @see https://lbs.amap.com/api/javascript-api/guide/abc/load
+          this.logger.warn(this.configService.getSceneWarninfo('MapToken'));
-        // @ts-ignore
+        }
-        window.initAMap = (): void => {
         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);
+    });
+  }
 }

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) {
+    function animateMarker(timestamp: number) {
-    //   layer.setData(pointOnCircle(timestamp / 1000));
+      layer.setData(pointOnCircle(timestamp / 1000));
-    //   scene.render();
+      scene.render();
-    //   requestAnimationFrame(animateMarker);
+      requestAnimationFrame(animateMarker);
-    // }
+    }
     // layer.on('inited', () => {
-    //   animateMarker(0);
+    animateMarker(0);
     // });
   }
 

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],
+        center: [121.435159, 31.256971],
-        pitch: 0,
+        zoom: 14.89,
         style: 'light',
-        zoom: 3,
       }),
     });
     const scene2 = new Scene({
       id: 'map2',
       map: new GaodeMap({
-        center: [110.19382669582967, 50.258134],
+        center: [121.435159, 31.256971],
-        pitch: 0,
+        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;
   }