fix: 开放设置偏移坐标系等级

packages/core/src/services/map/IMapService.ts

@@ -150,6 +150,8 @@ export interface IMapConfig<RawMap = {}> {
 
   offsetCoordinate?: boolean;
 
+  offsetZoom?: number;
+
   [key: string]: any;
 }
 

packages/maps/src/amap/map.ts

@@ -425,9 +425,10 @@ export default class AMapService
         center: [lng, lat],
         offsetOrigin: [position.x, position.y],
       });
+      const { offsetZoom = LNGLAT_OFFSET_ZOOM_THRESHOLD } = this.config;
 
       // set coordinate system
-      if (this.viewport.getZoom() > LNGLAT_OFFSET_ZOOM_THRESHOLD) {
+      if (this.viewport.getZoom() > offsetZoom) {
         this.coordinateSystemService.setCoordinateSystem(
           CoordinateSystem.P20_OFFSET,
         );

stories/Layers/Layers.stories.tsx

@@ -16,6 +16,7 @@ import HexagonLayerDemo from './components/hexagon';
 import HighLight from './components/highlight';
 import LineLayer from './components/Line';
 import LineAnimate from './components/lineAnimate';
+import OffsetTest from './components/offsetTest';
 import PointDemo from './components/Point';
 import Point3D from './components/Point3D';
 import PointImage from './components/PointImage';
@@ -51,6 +52,6 @@ storiesOf('图层', module)
   .add('网格热力图2', () => <GridTest />)
   .add('栅格', () => <RasterLayerDemo />)
   .add('图片', () => <ImageLayerDemo />)
-  .add('网格测试', () => <GridTest />)
+  .add('网格测试', () => <OffsetTest />)
   .add('图层高亮', () => <HighLight />)
   .add('世界地图', () => <WorldDemo />);

stories/Layers/components/offsetTest.tsx

@@ -0,0 +1,81 @@
+// @ts-ignore
+import {
+  Layers,
+  LineLayer,
+  PointLayer,
+  PolygonLayer,
+  Scale,
+  Scene,
+  Zoom,
+} from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+import data from '../data/hexagon';
+
+export default class World extends React.Component {
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+
+    const scene = new Scene({
+      id: 'map',
+      logoVisible: false,
+      map: new GaodeMap({
+        offsetZoom: 5,
+        style: 'normal',
+        center: [110.19382669582967, 30.258134],
+        pitch: 0,
+        zoom: 5,
+      }),
+    });
+    this.scene = scene;
+    const layer = new PolygonLayer({
+      name: '01',
+      autoFit: true,
+    });
+
+    const layer2 = new PolygonLayer({
+      name: '01',
+      autoFit: true,
+    });
+
+    layer
+      .source(data.geo_data)
+      .color( '#CF1D49')
+      .shape('line')
+      .size(1)
+      .select(true)
+      .style({
+        opacity: 0.8,
+      });
+      layer2
+      .source(data.geo_data)
+      .color( '#CF1')
+      .shape('fill')
+      .select(true)
+      .style({
+        opacity: 0.3,
+      });
+    scene.addLayer(layer);
+    scene.addLayer(layer2);
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}