docs(distict): demo of district (#945)

examples/choropleth/administrative/demo/china-city.ts

@@ -1,70 +1,80 @@
+import { Scene, Mapbox } from '@antv/l7';
 import { Choropleth } from '@antv/l7plot';
 
-fetch(
+const scene = new Scene({
-  `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
+  id: 'map',
-)
+  map: new Mapbox({
-  .then((response) => response.json())
+    style: 'blank',
-  .then((list) => {
+    center: [120.19382669582967, 30.258134],
-    const data = list
+    zoom: 3,
-      .filter(({ level }) => level === 'city')
+    pitch: 0,
-      .map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
+  }),
+});
 
-    new Choropleth('map', {
+scene.on('loaded', () => {
-      map: {
+  fetch(
-        type: 'mapbox',
+    `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
-        style: 'blank',
+  )
-        center: [120.19382669582967, 30.258134],
+    .then((response) => response.json())
-        zoom: 3,
+    .then((list) => {
-        pitch: 0,
+      const data = list
-      },
+        .filter(({ level }) => level === 'city')
-      source: {
+        .map((item) =>
-        data: data,
+          Object.assign({}, item, { value: Math.random() * 5000 }),
-        joinBy: {
+        );
-          sourceField: 'adcode',
+
-          geoField: 'adcode',
+      const choropleth = new Choropleth({
+        source: {
+          data: data,
+          joinBy: {
+            sourceField: 'adcode',
+            geoField: 'adcode',
+          },
+        },
+        viewLevel: {
+          level: 'country',
+          adcode: 100000,
+          granularity: 'city',
+        },
+        autoFit: true,
+        color: {
+          field: 'value',
+          value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
+          scale: { type: 'quantize' },
         },
-      },
-      viewLevel: {
-        level: 'country',
-        adcode: 100000,
-        granularity: 'city',
-      },
-      autoFit: true,
-      color: {
-        field: 'value',
-        value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
-        scale: { type: 'quantize' },
-      },
-      style: {
-        opacity: 1,
-        stroke: '#ccc',
-        lineWidth: 0.6,
-        lineOpacity: 1,
-      },
-      label: {
-        visible: true,
-        field: 'name',
         style: {
-          fill: '#000',
+          opacity: 1,
-          opacity: 0.8,
+          stroke: '#ccc',
-          fontSize: 10,
+          lineWidth: 0.6,
-          stroke: '#fff',
+          lineOpacity: 1,
-          strokeWidth: 1.5,
-          textAllowOverlap: false,
-          padding: [5, 5],
         },
-      },
+        label: {
-      state: {
+          visible: true,
-        active: { stroke: 'black', lineWidth: 1 },
+          field: 'name',
-      },
+          style: {
-      tooltip: {
+            fill: '#000',
-        items: ['name', 'adcode', 'value'],
+            opacity: 0.8,
-      },
+            fontSize: 10,
-      zoom: {
+            stroke: '#fff',
-        position: 'bottomright',
+            strokeWidth: 1.5,
-      },
+            textAllowOverlap: false,
-      legend: {
+            padding: [5, 5],
-        position: 'bottomleft',
+          },
-      },
+        },
+        state: {
+          active: { stroke: 'black', lineWidth: 1 },
+        },
+        tooltip: {
+          items: ['name', 'adcode', 'value'],
+        },
+        zoom: {
+          position: 'bottomright',
+        },
+        legend: {
+          position: 'bottomleft',
+        },
+      });
+
+      choropleth.addToScene(scene);
     });
-  });
+});

examples/choropleth/administrative/demo/hangzhou-city.ts

@@ -1,69 +1,81 @@
+import { Scene, Mapbox } from '@antv/l7';
 import { Choropleth } from '@antv/l7plot';
 
-fetch(
+const scene = new Scene({
-  `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
+  id: 'map',
-)
+  map: new Mapbox({
-  .then((response) => response.json())
+    style: 'blank',
-  .then((list) => {
+    center: [120.19382669582967, 30.258134],
-    const data = list
+    zoom: 3,
-      .filter(({ level, parent }) => level === 'district' && parent === 330100)
+    pitch: 0,
-      .map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
+  }),
+});
 
-    new Choropleth('map', {
+scene.on('loaded', () => {
-      map: {
+  fetch(
-        type: 'mapbox',
+    `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
-        style: 'blank',
+  )
-        center: [120.19382669582967, 30.258134],
+    .then((response) => response.json())
-        zoom: 3,
+    .then((list) => {
-        pitch: 0,
+      const data = list
-      },
+        .filter(
-      source: {
+          ({ level, parent }) => level === 'district' && parent === 330100,
-        data: data,
+        )
-        joinBy: {
+        .map((item) =>
-          sourceField: 'adcode',
+          Object.assign({}, item, { value: Math.random() * 5000 }),
-          geoField: 'adcode',
+        );
+
+      const choropleth = new Choropleth({
+        source: {
+          data: data,
+          joinBy: {
+            sourceField: 'adcode',
+            geoField: 'adcode',
+          },
+        },
+        viewLevel: {
+          level: 'city',
+          adcode: 330100,
+        },
+        autoFit: true,
+        color: {
+          field: 'value',
+          value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
+          scale: { type: 'quantize' },
         },
-      },
-      viewLevel: {
-        level: 'city',
-        adcode: 330100,
-      },
-      autoFit: true,
-      color: {
-        field: 'value',
-        value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
-        scale: { type: 'quantize' },
-      },
-      style: {
-        opacity: 1,
-        stroke: '#ccc',
-        lineWidth: 0.6,
-        lineOpacity: 1,
-      },
-      label: {
-        visible: true,
-        field: 'name',
         style: {
-          fill: '#000',
+          opacity: 1,
-          opacity: 0.8,
+          stroke: '#ccc',
-          fontSize: 10,
+          lineWidth: 0.6,
-          stroke: '#fff',
+          lineOpacity: 1,
-          strokeWidth: 1.5,
-          textAllowOverlap: false,
-          padding: [5, 5],
         },
-      },
+        label: {
-      state: {
+          visible: true,
-        active: { stroke: 'black', lineWidth: 1 },
+          field: 'name',
-      },
+          style: {
-      tooltip: {
+            fill: '#000',
-        items: ['name', 'adcode', 'value'],
+            opacity: 0.8,
-      },
+            fontSize: 10,
-      zoom: {
+            stroke: '#fff',
-        position: 'bottomright',
+            strokeWidth: 1.5,
-      },
+            textAllowOverlap: false,
-      legend: {
+            padding: [5, 5],
-        position: 'bottomleft',
+          },
-      },
+        },
+        state: {
+          active: { stroke: 'black', lineWidth: 1 },
+        },
+        tooltip: {
+          items: ['name', 'adcode', 'value'],
+        },
+        zoom: {
+          position: 'bottomright',
+        },
+        legend: {
+          position: 'bottomleft',
+        },
+      });
+
+      choropleth.addToScene(scene);
     });
-  });
+});

examples/choropleth/administrative/demo/world-map.ts

@@ -1,13 +1,17 @@
+import { Scene, Mapbox } from '@antv/l7';
 import { Choropleth } from '@antv/l7plot';
 
-new Choropleth('map', {
+const scene = new Scene({
-  map: {
+  id: 'map',
-    type: 'mapbox',
+  map: new Mapbox({
     style: 'blank',
     center: [120.19382669582967, 30.258134],
     zoom: 3,
     pitch: 0,
-  },
+  }),
+});
+
+const choropleth = new Choropleth({
   source: {
     data: [],
     joinBy: {
@@ -61,3 +65,7 @@ new Choropleth('map', {
     position: 'bottomleft',
   },
 });
+
+scene.on('loaded', () => {
+  choropleth.addToScene(scene);
+});

examples/choropleth/administrative/demo/xihu-district.ts

@@ -1,13 +1,17 @@
+import { Scene, Mapbox } from '@antv/l7';
 import { Choropleth } from '@antv/l7plot';
 
-new Choropleth('map', {
+const scene = new Scene({
-  map: {
+  id: 'map',
-    type: 'mapbox',
+  map: new Mapbox({
     style: 'blank',
     center: [120.19382669582967, 30.258134],
     zoom: 3,
     pitch: 0,
-  },
+  }),
+});
+
+const choropleth = new Choropleth({
   source: {
     data: [{ adcode: 330106, value: 200 }],
     joinBy: {
@@ -57,3 +61,7 @@ new Choropleth('map', {
     position: 'bottomleft',
   },
 });
+
+scene.on('loaded', () => {
+  choropleth.addToScene(scene);
+});

examples/choropleth/administrative/demo/zhejiang-province-district.ts

@@ -1,70 +1,80 @@
+import { Scene, Mapbox } from '@antv/l7';
 import { Choropleth } from '@antv/l7plot';
 
-fetch(
+const scene = new Scene({
-  `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
+  id: 'map',
-)
+  map: new Mapbox({
-  .then((response) => response.json())
+    style: 'blank',
-  .then((list) => {
+    center: [120.19382669582967, 30.258134],
-    const data = list
+    zoom: 3,
-      .filter(({ level }) => level === 'district')
+    pitch: 0,
-      .map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
+  }),
+});
 
-    new Choropleth('map', {
+scene.on('loaded', () => {
-      map: {
+  fetch(
-        type: 'mapbox',
+    `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
-        style: 'blank',
+  )
-        center: [120.19382669582967, 30.258134],
+    .then((response) => response.json())
-        zoom: 3,
+    .then((list) => {
-        pitch: 0,
+      const data = list
-      },
+        .filter(({ level }) => level === 'district')
-      source: {
+        .map((item) =>
-        data: data,
+          Object.assign({}, item, { value: Math.random() * 5000 }),
-        joinBy: {
+        );
-          sourceField: 'adcode',
+
-          geoField: 'adcode',
+      const choropleth = new Choropleth({
+        source: {
+          data: data,
+          joinBy: {
+            sourceField: 'adcode',
+            geoField: 'adcode',
+          },
+        },
+        viewLevel: {
+          level: 'province',
+          adcode: 330000,
+          granularity: 'district',
+        },
+        autoFit: true,
+        color: {
+          field: 'value',
+          value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
+          scale: { type: 'quantize' },
         },
-      },
-      viewLevel: {
-        level: 'province',
-        adcode: 330000,
-        granularity: 'district',
-      },
-      autoFit: true,
-      color: {
-        field: 'value',
-        value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
-        scale: { type: 'quantize' },
-      },
-      style: {
-        opacity: 1,
-        stroke: '#ccc',
-        lineWidth: 0.6,
-        lineOpacity: 1,
-      },
-      label: {
-        visible: true,
-        field: 'name',
         style: {
-          fill: '#000',
+          opacity: 1,
-          opacity: 0.8,
+          stroke: '#ccc',
-          fontSize: 10,
+          lineWidth: 0.6,
-          stroke: '#fff',
+          lineOpacity: 1,
-          strokeWidth: 1.5,
-          textAllowOverlap: false,
-          padding: [5, 5],
         },
-      },
+        label: {
-      state: {
+          visible: true,
-        active: { stroke: 'black', lineWidth: 1 },
+          field: 'name',
-      },
+          style: {
-      tooltip: {
+            fill: '#000',
-        items: ['name', 'adcode', 'value'],
+            opacity: 0.8,
-      },
+            fontSize: 10,
-      zoom: {
+            stroke: '#fff',
-        position: 'bottomright',
+            strokeWidth: 1.5,
-      },
+            textAllowOverlap: false,
-      legend: {
+            padding: [5, 5],
-        position: 'bottomleft',
+          },
-      },
+        },
+        state: {
+          active: { stroke: 'black', lineWidth: 1 },
+        },
+        tooltip: {
+          items: ['name', 'adcode', 'value'],
+        },
+        zoom: {
+          position: 'bottomright',
+        },
+        legend: {
+          position: 'bottomleft',
+        },
+      });
+
+      choropleth.addToScene(scene);
     });
-  });
+});

examples/choropleth/administrative/demo/zhejiang-province.ts

@@ -1,69 +1,79 @@
+import { Scene, Mapbox } from '@antv/l7';
 import { Choropleth } from '@antv/l7plot';
 
-fetch(
+const scene = new Scene({
-  `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
+  id: 'map',
-)
+  map: new Mapbox({
-  .then((response) => response.json())
+    style: 'blank',
-  .then((list) => {
+    center: [120.19382669582967, 30.258134],
-    const data = list
+    zoom: 3,
-      .filter(({ level, parent }) => level === 'city' && parent === 330000)
+    pitch: 0,
-      .map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
+  }),
+});
 
-    new Choropleth('map', {
+scene.on('loaded', () => {
-      map: {
+  fetch(
-        type: 'mapbox',
+    `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
-        style: 'blank',
+  )
-        center: [120.19382669582967, 30.258134],
+    .then((response) => response.json())
-        zoom: 3,
+    .then((list) => {
-        pitch: 0,
+      const data = list
-      },
+        .filter(({ level, parent }) => level === 'city' && parent === 330000)
-      source: {
+        .map((item) =>
-        data: data,
+          Object.assign({}, item, { value: Math.random() * 5000 }),
-        joinBy: {
+        );
-          sourceField: 'adcode',
+
-          geoField: 'adcode',
+      const choropleth = new Choropleth({
+        source: {
+          data: data,
+          joinBy: {
+            sourceField: 'adcode',
+            geoField: 'adcode',
+          },
+        },
+        viewLevel: {
+          level: 'province',
+          adcode: 330000,
+        },
+        autoFit: true,
+        color: {
+          field: 'value',
+          value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
+          scale: { type: 'quantize' },
         },
-      },
-      viewLevel: {
-        level: 'province',
-        adcode: 330000,
-      },
-      autoFit: true,
-      color: {
-        field: 'value',
-        value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
-        scale: { type: 'quantize' },
-      },
-      style: {
-        opacity: 1,
-        stroke: '#ccc',
-        lineWidth: 0.6,
-        lineOpacity: 1,
-      },
-      label: {
-        visible: true,
-        field: 'name',
         style: {
-          fill: '#000',
+          opacity: 1,
-          opacity: 0.8,
+          stroke: '#ccc',
-          fontSize: 10,
+          lineWidth: 0.6,
-          stroke: '#fff',
+          lineOpacity: 1,
-          strokeWidth: 1.5,
-          textAllowOverlap: false,
-          padding: [5, 5],
         },
-      },
+        label: {
-      state: {
+          visible: true,
-        active: { stroke: 'black', lineWidth: 1 },
+          field: 'name',
-      },
+          style: {
-      tooltip: {
+            fill: '#000',
-        items: ['name', 'adcode', 'value'],
+            opacity: 0.8,
-      },
+            fontSize: 10,
-      zoom: {
+            stroke: '#fff',
-        position: 'bottomright',
+            strokeWidth: 1.5,
-      },
+            textAllowOverlap: false,
-      legend: {
+            padding: [5, 5],
-        position: 'bottomleft',
+          },
-      },
+        },
+        state: {
+          active: { stroke: 'black', lineWidth: 1 },
+        },
+        tooltip: {
+          items: ['name', 'adcode', 'value'],
+        },
+        zoom: {
+          position: 'bottomright',
+        },
+        legend: {
+          position: 'bottomleft',
+        },
+      });
+
+      choropleth.addToScene(scene);
     });
-  });
+});

examples/choropleth/drill/demo/drill-callback.ts

@@ -1,5 +1,16 @@
+import { Scene, Mapbox } from '@antv/l7';
 import { Choropleth } from '@antv/l7plot';
 
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'blank',
+    center: [120.19382669582967, 30.258134],
+    zoom: 3,
+    pitch: 0,
+  }),
+});
+
 fetch(
   `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
 )
@@ -17,14 +28,7 @@ fetch(
       .filter(({ level }) => level === 'district')
       .map((item) => Object.assign({}, item, { value: Math.random() * 1000 }));
 
-    new Choropleth('map', {
+    const choropleth = new Choropleth({
-      map: {
-        type: 'mapbox',
-        style: 'blank',
-        center: [120.19382669582967, 30.258134],
-        zoom: 3,
-        pitch: 0,
-      },
       source: {
         data: data,
         joinBy: {
@@ -109,4 +113,12 @@ fetch(
         position: 'bottomleft',
       },
     });
+
+    if (scene.loaded) {
+      choropleth.addToScene(scene);
+    } else {
+      scene.on('loaded', () => {
+        choropleth.addToScene(scene);
+      });
+    }
   });

examples/choropleth/drill/demo/drill-intercept.ts

@@ -1,5 +1,16 @@
+import { Scene, Mapbox } from '@antv/l7';
 import { Choropleth } from '@antv/l7plot';
 
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'blank',
+    center: [120.19382669582967, 30.258134],
+    zoom: 3,
+    pitch: 0,
+  }),
+});
+
 fetch(
   `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
 )
@@ -17,14 +28,7 @@ fetch(
       .filter(({ level }) => level === 'district')
       .map((item) => Object.assign({}, item, { value: Math.random() * 1000 }));
 
-    new Choropleth('map', {
+    const choropleth = new Choropleth({
-      map: {
-        type: 'mapbox',
-        style: 'blank',
-        center: [120.19382669582967, 30.258134],
-        zoom: 3,
-        pitch: 0,
-      },
       source: {
         data: data,
         joinBy: {
@@ -99,4 +103,12 @@ fetch(
         position: 'bottomleft',
       },
     });
+
+    if (scene.loaded) {
+      choropleth.addToScene(scene);
+    } else {
+      scene.on('loaded', () => {
+        choropleth.addToScene(scene);
+      });
+    }
   });

examples/choropleth/drill/demo/order-drill.ts

@@ -1,5 +1,16 @@
+import { Scene, Mapbox } from '@antv/l7';
 import { Choropleth } from '@antv/l7plot';
 
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'blank',
+    center: [120.19382669582967, 30.258134],
+    zoom: 3,
+    pitch: 0,
+  }),
+});
+
 fetch(
   `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
 )
@@ -17,14 +28,7 @@ fetch(
       .filter(({ level }) => level === 'district')
       .map((item) => Object.assign({}, item, { value: Math.random() * 1000 }));
 
-    new Choropleth('map', {
+    const choropleth = new Choropleth({
-      map: {
-        type: 'mapbox',
-        style: 'blank',
-        center: [120.19382669582967, 30.258134],
-        zoom: 3,
-        pitch: 0,
-      },
       source: {
         data: data,
         joinBy: {
@@ -94,4 +98,12 @@ fetch(
         position: 'bottomleft',
       },
     });
+
+    if (scene.loaded) {
+      choropleth.addToScene(scene);
+    } else {
+      scene.on('loaded', () => {
+        choropleth.addToScene(scene);
+      });
+    }
   });

examples/choropleth/drill/demo/unorder-drill.ts

@@ -1,5 +1,16 @@
+import { Scene, Mapbox } from '@antv/l7';
 import { Choropleth } from '@antv/l7plot';
 
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'blank',
+    center: [120.19382669582967, 30.258134],
+    zoom: 3,
+    pitch: 0,
+  }),
+});
+
 fetch(
   `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`,
 )
@@ -13,14 +24,7 @@ fetch(
       .filter(({ level }) => level === 'district')
       .map((item) => Object.assign({}, item, { value: Math.random() * 1000 }));
 
-    new Choropleth('map', {
+    const choropleth = new Choropleth({
-      map: {
-        type: 'mapbox',
-        style: 'blank',
-        center: [120.19382669582967, 30.258134],
-        zoom: 3,
-        pitch: 0,
-      },
       source: {
         data: data,
         joinBy: {
@@ -87,4 +91,12 @@ fetch(
         position: 'bottomleft',
       },
     });
+
+    if (scene.loaded) {
+      choropleth.addToScene(scene);
+    } else {
+      scene.on('loaded', () => {
+        choropleth.addToScene(scene);
+      });
+    }
   });

packages/scene/src/index.ts

@@ -51,9 +51,6 @@ import IPostProcessingPassPluggable from './IPostProcessingPassPluggable';
  */
 class Scene
   implements IPostProcessingPassPluggable, IMapController, ILayerManager {
-  public get map() {
-    return this.mapService.map;
-  }
   private sceneService: ISceneService;
   private mapService: IMapService<unknown>;
   private controlService: IControlService;
@@ -111,6 +108,15 @@ class Scene
       this.initControl();
     }
   }
+
+  public get map() {
+    return this.mapService.map;
+  }
+
+  public get loaded() {
+    return this.sceneService.loaded;
+  }
+
   public getServiceContainer(): Container {
     return this.container;
   }