Merge branch 'master' of https://github.com/antvis/L7

packages/maps/src/amap/map.ts

@@ -142,7 +142,8 @@ export default class AMapService
   }
 
   public setZoom(zoom: number): void {
-    return this.map.setZoom(zoom);
+    // 统一设置 Mapbox 缩放等级
+    return this.map.setZoom(zoom + 1);
   }
 
   public getCenter(options?: ICameraOptions): ILngLat {
@@ -359,13 +360,18 @@ export default class AMapService
           this.$mapContainer = this.creatAmapContainer(
             id as string | HTMLDivElement,
           );
-
-          const map = new AMap.Map(this.$mapContainer, {
+          const mapConstructorOptions = {
             mapStyle: this.getMapStyle(style as string),
             zooms: [minZoom, maxZoom],
             viewMode: '3D',
             ...rest,
-          });
+          };
+          if (mapConstructorOptions.zoom) {
+            // TODO: 高德地图在相同大小下需要比 MapBox 多一个 zoom 层级
+            mapConstructorOptions.zoom += 1;
+          }
+          // @ts-ignore
+          const map = new AMap.Map(this.$mapContainer, mapConstructorOptions);
           // 监听地图相机事件
           map.on('camerachange', this.handleCameraChanged);
           // @ts-ignore

packages/maps/src/amap2/map.ts

@@ -207,11 +207,13 @@ export default class AMapService
     return 'amap2';
   }
   public getZoom(): number {
-    return this.map.getZoom();
+    // 统一返回 Mapbox 缩放等级
+    return this.map.getZoom() - 1;
   }
 
   public setZoom(zoom: number): void {
-    return this.map.setZoom(zoom);
+    // 统一设置 Mapbox 缩放等级
+    return this.map.setZoom(zoom + 1);
   }
 
   public getCenter(options?: ICameraOptions): ILngLat {
@@ -445,12 +447,18 @@ export default class AMapService
           this.$mapContainer = this.creatAmapContainer(
             id as string | HTMLDivElement,
           );
-          const map = new AMap.Map(this.$mapContainer, {
+          const mapConstructorOptions = {
             mapStyle: this.getMapStyle(style as string),
             zooms: [minZoom, maxZoom],
             viewMode: '3D',
             ...rest,
-          });
+          };
+          if (mapConstructorOptions.zoom) {
+            // TODO: 高德地图在相同大小下需要比 MapBox 多一个 zoom 层级
+            mapConstructorOptions.zoom += 1;
+          }
+          // @ts-ignore
+          const map = new AMap.Map(this.$mapContainer, mapConstructorOptions);
           // @ts-ignore
           this.map = map;
           // 在使用 map.customCoords 的时候必须使用

stories/React/React.stories.tsx

@@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import GaodeMapScene from './components/Scene';
 import WorldMap from './components/world';
+import WorldLayer from './components/worldLayer';
 import WorldExtrueMap from './components/world_ncov';
 import WorldBubbleMap from './components/world_ncov_bubble';
 import WorldBubbleAnimateMap from './components/world_ncov_bubble_animate';
@@ -11,6 +12,7 @@ import WorldFillMap from './components/world_ncov_fill';
 // @ts-ignore
 storiesOf('React', module).add('高德地图', () => <GaodeMapScene />);
 storiesOf('React', module).add('世界地图', () => <WorldMap />);
+storiesOf('React', module).add('WorldLayer', () => <WorldLayer />);
 storiesOf('React', module).add('疫情地图-填充图', () => <WorldFillMap />);
 storiesOf('React', module).add('疫情地图-气泡图', () => <WorldBubbleMap />);
 storiesOf('React', module).add('疫情地图-3D柱图', () => <WorldColumnMap />);

stories/React/components/worldLayer.tsx

@@ -0,0 +1,81 @@
+import { Scene } from '@antv/l7';
+import { WorldLayer } from '@antv/l7-district';
+import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class Country extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMapV2({
+        pitch: 0,
+        style: 'dark',
+        center: [116.2825, 39.9],
+        // zoom: 0,
+        zoom: 3,
+        // minZoom: 0,
+        maxZoom: 24,
+      }),
+    });
+    scene.on('loaded', () => {
+      const Layer = new WorldLayer(scene, {
+        autoFit: false,
+        data: [],
+        geoDataLevel: 2,
+        joinBy: ['SOC', 'SOC'],
+        fill: {
+          color: {
+            field: 'NAME_CHN',
+            values: ['rgba(1.0, 0.0, 0.0, 0.5)'],
+          },
+        },
+        stroke: '#ccc',
+        label: {
+          enable: true,
+          textAllowOverlap: false,
+          field: 'NAME_ENG',
+          padding: [5, 5],
+        },
+        popup: {
+          // enable: true,
+          enable: false,
+          Html: (props) => {
+            return `<span>${props.NAME_CHN}</span>`;
+          },
+        },
+      });
+      // @ts-ignore
+      // window.onresize = () => Layer.fillLayer.fitBounds()
+
+      // scene.setZoom(4)
+      // console.log(scene.getZoom())
+      setTimeout(() => {
+        console.log('***', scene.getZoom());
+      }, 1500);
+    });
+
+    this.scene = scene;
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}

stories/customMap/components/Map.tsx

@@ -107,6 +107,7 @@ export default class ScaleComponent extends React.Component {
 
         const layer = new PolygonLayer({
           name: '01',
+          autoFit: true,
         })
           .source(data)
           .size('name', [0, 10000, 50000, 30000, 100000])
@@ -124,6 +125,8 @@ export default class ScaleComponent extends React.Component {
             opacity: 1.0,
           });
         scene.addLayer(layer);
+
+        window.onresize = () => layer.fitBounds();
       });
 
     scene.on('loaded', () => {