fix(component): fix marker

examples/point/chart/demo/bar.js

@@ -11,10 +11,10 @@ const scene = new Scene({
     zoom: 4.19
   })
 });
+addChart();
 scene.render();
-scene.on('loaded', () => {
+
-  addChart();
+
-});
 function addChart() {
   fetch(
     'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
@@ -67,14 +67,14 @@ function addChart() {
           .color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
           .opacity(1);
         chart.render();
-        new Marker({
+        const marker = new Marker({
           element: el
         })
           .setLnglat({
             lng: item.coordinates[0],
             lat: item.coordinates[1]
-          })
+          });
-          .addTo(scene);
+        scene.addMarker(marker);
       });
     });
 }

examples/point/chart/demo/chart.js

@@ -11,10 +11,9 @@ const scene = new Scene({
     zoom: 4.19
   })
 });
+addChart();
 scene.render();
-scene.on('loaded', () => {
+
-  addChart();
-});
 function addChart() {
   fetch(
     'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
@@ -89,14 +88,14 @@ function addChart() {
           .color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
           .shape('sliceShape');
         chart.render();
-        new Marker({
+        const marker = new Marker({
           element: el
         })
           .setLnglat({
             lng: item.coordinates[0],
             lat: item.coordinates[1]
-          })
+          });
-          .addTo(scene);
+        scene.addMarker(marker);
       });
     });
 }

examples/point/chart/demo/ring.js

@@ -44,16 +44,14 @@ const scene = new Scene({
     zoom: 3.802
   })
 });
-scene.render();
+Promise.all([
-scene.on('loaded', () => {
-  Promise.all([
   fetch(
     'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json'
   ).then(d => d.json()),
   fetch(
     'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'
   ).then(d => d.json())
-  ]).then(function onLoad([ center, population ]) {
+]).then(function onLoad([ center, population ]) {
   const popobj = {};
   population.forEach(element => {
     popobj[element.Code] =
@@ -101,12 +99,11 @@ scene.on('loaded', () => {
       .color('type', [ '#5CCEA1', '#5B8FF9' ])
       .opacity(1);
     chart.render();
-      new Marker({ element: el })
+    const marker = new Marker({ element: el })
       .setLnglat({
         lng: coord[0],
         lat: coord[1]
-        })
-        .addTo(scene);
       });
+    scene.addMarker(marker);
   });
 });

examples/point/marker/demo/marker.js

@@ -10,10 +10,9 @@ const scene = new Scene({
     zoom: 4
   })
 });
+addMarkers();
 scene.render();
-scene.on('loaded', () => {
+
-  addMarkers();
-});
 
 function addMarkers() {
   fetch(
@@ -28,11 +27,11 @@ function addMarkers() {
         el.textContent = nodes[i].v + '℃';
         el.style.background = getColor(nodes[i].v);
         el.style.borderColor = getColor(nodes[i].v);
-        new Marker({
+        const marker = new Marker({
           element: el
         })
-          .setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y })
+          .setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y });
-          .addTo(scene);
+        scene.addMarker(marker);
       }
     });
 }

examples/tutorial/marker/demo/amap.js

@@ -1,8 +1,8 @@
 import { Scene, Marker, Popup } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
+import { Mapbox } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
-  map: new GaodeMap({
+  map: new Mapbox({
     style: 'light',
     pitch: 0,
     center: [ 121.4316962, 31.26082325 ],

packages/component/package.json

@@ -33,7 +33,7 @@
     "inversify-logging": "^0.2.1",
     "load-styles": "^2.0.0"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }

packages/core/package.json

@@ -43,7 +43,7 @@
     "@types/lodash": "^4.14.138",
     "@types/viewport-mercator-project": "^6.1.0"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }

packages/core/src/services/component/MarkerService.ts

@@ -11,11 +11,11 @@ export default class MarkerService implements IMarkerService {
   private markers: IMarker[] = [];
   private unAddMarkers: IMarker[] = [];
   public addMarker(marker: IMarker): void {
-    if (!this.mapsService.map) {
+    if (!this.mapsService.map && this.mapsService.getMarkerContainer()) {
-      this.unAddMarkers.push(marker);
-    } else {
       this.markers.push(marker);
       marker.addTo(this.scene);
+    } else {
+      this.unAddMarkers.push(marker);
     }
   }
   public addMarkers(): void {

packages/l7/package.json

@@ -29,7 +29,7 @@
     "@antv/l7-maps": "^2.0.0-beta.11",
     "@antv/l7-scene": "^2.0.0-beta.11"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }

packages/layers/package.json

@@ -49,7 +49,7 @@
     "@types/gl-matrix": "^2.4.5",
     "@types/lodash": "^4.14.138"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }

packages/maps/package.json

@@ -36,7 +36,7 @@
     "@types/mapbox-gl": "^0.54.3",
     "@types/viewport-mercator-project": "^6.1.0"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }

packages/renderer/package.json

@@ -30,7 +30,7 @@
     "reflect-metadata": "^0.1.13",
     "regl": "^1.3.11"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }

packages/scene/package.json

@@ -32,7 +32,7 @@
     "mapbox-gl": "^1.2.1",
     "reflect-metadata": "^0.1.13"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }

packages/source/package.json

@@ -49,7 +49,7 @@
     "@types/lodash": "^4.14.138",
     "@types/viewport-mercator-project": "^6.1.0"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }

packages/utils/package.json

@@ -36,7 +36,7 @@
     "@types/gl-matrix": "^2.4.5",
     "@types/lodash": "^4.14.138"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }

stories/Components/components/Marker.tsx

@@ -1,6 +1,6 @@
 // @ts-ignore
 import { Marker, PolygonLayer, Scene } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
+import { Mapbox, GaodeMap } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class MarkerComponent extends React.Component {
@@ -18,7 +18,7 @@ export default class MarkerComponent 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,
@@ -43,14 +43,12 @@ export default class MarkerComponent extends React.Component {
         opacity: 0.3,
       });
     scene.addLayer(layer);
-    scene.on('loaded', () => {
+    const marker = new Marker().setLnglat({
-      new Marker()
-        .setLnglat({
       lng: 120.19382669582967,
       lat: 30.258134,
-        })
-        .addTo(scene);
     });
+
+    scene.addMarker(marker);
   }
 
   public render() {

stories/Components/components/Popup.tsx

@@ -43,17 +43,16 @@ export default class PopupComponent extends React.Component {
         opacity: 0.3,
       });
     scene.addLayer(layer);
-    scene.on('loaded', () => {
+    const popup = new Popup({
-      new Popup({
       offsets: [0, 20],
     })
       .setLnglat({
         lng: 120.19382669582967,
         lat: 30.258134,
       })
-        .setText('hello')
+      .setText('hello');
-        .addTo(scene);
+    scene.addPopup(popup);
-    });
+
   }
 
   public render() {

stories/Components/components/Scale.tsx

@@ -43,10 +43,9 @@ export default class ScaleComponent extends React.Component {
         opacity: 0.3,
       });
     scene.addLayer(layer);
-    scene.on('loaded', () => {
+
     const scaleControl = new Scale();
     scene.addControl(scaleControl);
-    });
   }
 
   public render() {

stories/Components/components/Zoom.tsx

@@ -44,12 +44,10 @@ export default class ZoomComponent extends React.Component {
         opacity: 0.3,
       });
     scene.addLayer(layer);
-    scene.on('loaded', () => {
     const zoomControl = new Zoom({
       position: 'bottomright',
     });
     scene.addControl(zoomControl);
-    });
   }
 
   public render() {