feat: centet 增加padding 功能

docs/api/component/control.en.md

@@ -15,7 +15,7 @@ L7 目前支持 Control
 
 ## 构造函数
 
-#### option
+### option
 
 position: `string` 控件位置支持是个方位
 

docs/api/component/popup.en.md

@@ -12,6 +12,7 @@ order: 0
 Popup
 
 ```javascript
+const option = {};
 const popup = new L7.Popup(option);
 ```
 

docs/api/component/popup.zh.md

@@ -12,10 +12,11 @@ order: 0
 Popup
 
 ```javascript
+const option = {};
 const popup = new L7.Popup(option);
 ```
 
-#### option
+### option
 
 - closeButton
 - closeOnClick

package.json

@@ -29,7 +29,7 @@
     "@rollup/plugin-commonjs": "11.0.2",
     "@rollup/plugin-json": "^4.0.0",
     "@rollup/plugin-node-resolve": "^6.0.0",
-    "@storybook/react": "^5.1.9",
+    "@storybook/react": "^6.2.2",
     "@turf/turf": "^5.1.6",
     "@types/dat.gui": "^0.7.1",
     "@types/enzyme": "^3.1.14",
@@ -37,7 +37,7 @@
     "@types/gl": "^4.1.0",
     "@types/jest": "^25.2.1",
     "@types/node": "13.11.1",
-    "@types/storybook__react": "^4.0.2",
+    "@types/storybook__react": "^5.2.1",
     "@types/supercluster": "^5.0.1",
     "antd": "^4.12.3",
     "awesome-typescript-loader": "^5.2.1",
@@ -145,7 +145,7 @@
     "fix": "run-p -c 'lint:ts-* --fix'",
     "lint:css": "stylelint 'packages/**/*.js{,x}'",
     "lint:ts-prod": "tslint --fix --config tslint.prod.json 'packages/**/*.ts{,x}'",
-    "lint:ts-test": "tslint --fix --config tslint.test.json 'packages/**/*.{spec,story}.ts{,x}'",
+    "lint:ts-test": "tslint --fix --config tslint.json 'packages/**/*.{spec,story}.ts{,x}'",
     "lint:ts": "run-p -c lint:ts-*",
     "lint": "run-p -c lint:*",
     "commit": "git-cz",

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

@@ -51,7 +51,7 @@ export interface IMapService<RawMap = {}> {
   // get map params
   getType(): string;
   getZoom(): number;
-  getCenter(): ILngLat;
+  getCenter(option?: ICameraOptions): ILngLat;
   getPitch(): number;
   getRotation(): number;
   getBounds(): Bounds;
@@ -66,7 +66,7 @@ export interface IMapService<RawMap = {}> {
   panBy(pixel: Point): void;
   fitBounds(bound: Bounds, fitBoundsOptions?: unknown): void;
   setZoomAndCenter(zoom: number, center: Point): void;
-  setCenter(center: [number, number]): void;
+  setCenter(center: [number, number], option?: ICameraOptions): void;
   setPitch(pitch: number): void;
   setZoom(zoom: number): void;
   setMapStyle(style: any): void;
@@ -181,3 +181,14 @@ export interface IMapCamera {
   // 偏移原点，例如 P20 坐标系下
   offsetOrigin: [number, number];
 }
+export interface ICameraOptions {
+  padding:
+    | number
+    | [number, number, number, number]
+    | {
+        top?: number;
+        bottom?: number;
+        right?: number;
+        left?: number;
+      };
+}

packages/layers/package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@antv/async-hook": "^2.1.0",
     "@antv/l7-core": "2.3.9",
+    "@antv/l7-layers": "2.3.9",
     "@antv/l7-source": "2.3.9",
     "@antv/l7-utils": "2.3.9",
     "@babel/runtime": "^7.7.7",

packages/maps/src/amap/map.ts

@@ -5,6 +5,7 @@ import AMapLoader from '@amap/amap-jsapi-loader';
 import {
   Bounds,
   CoordinateSystem,
+  ICameraOptions,
   ICoordinateSystemService,
   IGlobalConfigService,
   ILngLat,
@@ -23,6 +24,7 @@ import { DOM } from '@antv/l7-utils';
 import { mat4, vec2, vec3 } from 'gl-matrix';
 import { inject, injectable } from 'inversify';
 import { IAMapEvent, IAMapInstance } from '../../typings/index';
+import { toPaddingOptions } from '../utils';
 import './logo.css';
 import { MapTheme } from './theme';
 import Viewport from './Viewport';
@@ -135,16 +137,46 @@ export default class AMapService
     return this.map.setZoom(zoom);
   }
 
-  public getCenter(): ILngLat {
+  public getCenter(options?: ICameraOptions): ILngLat {
+    if (options?.padding) {
+      const originCenter = this.getCenter();
+      const [w, h] = this.getSize();
+      const padding = toPaddingOptions(options.padding);
+      const px = this.lngLatToPixel([originCenter.lng, originCenter.lat]);
+      const offsetPx = [
+        (padding.right - padding.left) / 2,
+        (padding.bottom - padding.top) / 2,
+      ];
+
+      const newCenter = this.pixelToLngLat([
+        px.x - offsetPx[0],
+        px.y - offsetPx[1],
+      ]);
+      return newCenter;
+    }
     const center = this.map.getCenter();
     return {
       lng: center.getLng(),
       lat: center.getLat(),
     };
   }
-  public setCenter(lnglat: [number, number]): void {
+  public setCenter(lnglat: [number, number], options?: ICameraOptions): void {
+    if (options?.padding) {
+      const padding = toPaddingOptions(options.padding);
+      const px = this.lngLatToPixel(lnglat);
+      const offsetPx = [
+        (padding.right - padding.left) / 2,
+        (padding.bottom - padding.top) / 2,
+      ];
+      const newCenter = this.pixelToLngLat([
+        px.x + offsetPx[0],
+        px.y + offsetPx[1],
+      ]);
+      this.map.setCenter([newCenter.lng, newCenter.lat]);
+    } else {
       this.map.setCenter(lnglat);
     }
+  }
   public getPitch(): number {
     return this.map.getPitch();
   }

packages/maps/src/utils.ts

@@ -0,0 +1,49 @@
+export type IPadding =
+  | number
+  | [number, number, number, number]
+  | {
+      top?: number;
+      bottom?: number;
+      right?: number;
+      left?: number;
+    };
+
+export function toPaddingOptions(padding: IPadding = {}) {
+  const defaultPadding = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  };
+  if (typeof padding === 'number') {
+    return {
+      top: padding,
+      right: padding,
+      bottom: padding,
+      left: padding,
+    };
+  }
+  if (Array.isArray(padding)) {
+    if (padding.length === 4) {
+      return {
+        top: padding[0],
+        right: padding[1],
+        bottom: padding[2],
+        left: padding[3],
+      };
+    }
+    if (padding.length === 2) {
+      return {
+        top: padding[0],
+        right: padding[1],
+        bottom: padding[0],
+        left: padding[1],
+      };
+    }
+  }
+
+  return {
+    ...defaultPadding,
+    ...padding,
+  };
+}

packages/scene/package.json

@@ -27,6 +27,7 @@
     "@antv/l7-core": "2.3.9",
     "@antv/l7-maps": "2.3.9",
     "@antv/l7-renderer": "2.3.9",
+    "@antv/l7-layers": "2.3.9",
     "@antv/l7-utils": "2.3.9",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",

packages/scene/src/IMapController.ts

@@ -1,4 +1,11 @@
-import { Bounds, ILngLat, IPoint, IStatusOptions, Point } from '@antv/l7-core';
+import {
+  Bounds,
+  ICameraOptions,
+  ILngLat,
+  IPoint,
+  IStatusOptions,
+  Point,
+} from '@antv/l7-core';
 
 export default interface IMapController {
   /**
@@ -9,7 +16,7 @@ export default interface IMapController {
   /**
    * 中心点经纬度
    */
-  getCenter(): ILngLat;
+  getCenter(options?: ICameraOptions): ILngLat;
 
   /**
    * 仰角
@@ -64,7 +71,7 @@ export default interface IMapController {
   // control with raw map
   setRotation(rotation: number): void;
   setZoomAndCenter(zoom: number, center: Point): void;
-  setCenter(center: [number, number]): void;
+  setCenter(center: [number, number], options?: ICameraOptions): void;
   setPitch(pitch: number): void;
   setZoom(zoom: number): void;
   setMapStyle(style: any): void;

packages/scene/src/index.ts

@@ -3,6 +3,7 @@ import {
   Bounds,
   createLayerContainer,
   createSceneContainer,
+  ICameraOptions,
   IControl,
   IControlService,
   IFontService,
@@ -254,12 +255,12 @@ class Scene
     return this.mapService.getZoom();
   }
 
-  public getCenter(): ILngLat {
-    return this.mapService.getCenter();
+  public getCenter(options?: ICameraOptions): ILngLat {
+    return this.mapService.getCenter(options);
   }
 
-  public setCenter(center: [number, number]) {
-    return this.mapService.setCenter(center);
+  public setCenter(center: [number, number], options?: ICameraOptions) {
+    return this.mapService.setCenter(center, options);
   }
 
   public getPitch(): number {

stories/Layers/components/Point.tsx

@@ -29,7 +29,7 @@ export default class Point3D extends React.Component {
         .then((res) => res.text())
         .then((data) => {
           const pointLayer = new PointLayer({})
-            .source(data.slice(0,1000), {
+            .source(data.slice(0, 1000), {
               parser: {
                 type: 'csv',
                 x: 'Longitude',

stories/Map/components/mapCenter.tsx

@@ -0,0 +1,142 @@
+// @ts-ignore
+import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import * as React from 'react';
+
+export default class GaodeMapComponent extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [121.107846, 30.267069],
+        pitch: 0,
+        style: 'normal',
+        zoom: 11,
+        animateEnable: false,
+      }),
+    });
+
+    const layer = new PointLayer()
+      .source(
+        [
+          {
+            lng: 121.107846,
+            lat: 30.267069,
+          },
+        ],
+        {
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat',
+          },
+        },
+      )
+      .shape('circle')
+      .color('blue')
+      .size(10)
+      .style({
+        stroke: '#fff',
+        storkeWidth: 2,
+      });
+    scene.addLayer(layer);
+    scene.render();
+    this.scene = scene;
+
+    scene.on('loaded', () => {
+      const padding = {
+        top: 50,
+        right: 0,
+        bottom: 200,
+        left: 800,
+      };
+      // const px = scene.lngLatToPixel([center.lng, center.lat]);
+      // const offsetPx = [
+      //   (padding.right - padding.left) / 2,
+      //   (padding.bottom - padding.top) / 2,
+      // ];
+      scene.setCenter([121.107846, 30.267069], { padding });
+      // const newCenter = scene.pixelToLngLat([
+      //   px.x + offsetPx[0],
+      //   px.y + offsetPx[1],
+      // ]);
+      // @ts-ignore
+      // scene.setCenter();
+
+      // get originCenter
+
+      // const originCenter = scene.getCenter();
+      // const originPx = scene.lngLatToPixel([
+      //   originCenter.lng,
+      //   originCenter.lat,
+      // ]);
+      // const offsetPx2 = [
+      //   (-padding.right + padding.left) / 2,
+      //   (-padding.bottom + padding.top) / 2,
+      // ];
+      // const newCenter2 = scene.pixelToLngLat([
+      //   originPx.x - offsetPx[0],
+      //   originPx.y - offsetPx[1],
+      // ]);
+
+      // lngLatToContainer
+      // 获取当前地图像素坐标
+      // console.log(originCenter, center, newCenter2);
+      // console.log(w,h);
+    });
+  }
+
+  public render() {
+    return (
+      <>
+        <div
+          id="map"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '0px',
+            zIndex: 10,
+            background: '#fff',
+            height: '200px',
+            width: '100%',
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            top: '0px',
+            zIndex: 10,
+            background: '#f00',
+            height: '50px',
+            width: '100%',
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            left: '0px',
+            zIndex: 10,
+            background: '#ff0',
+            height: '100%',
+            width: '800px',
+          }}
+        />
+      </>
+    );
+  }
+}

stories/Map/map.stories.tsx

@@ -0,0 +1,6 @@
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import MapCenter from './components/mapCenter';
+
+// @ts-ignore
+storiesOf('地图方法', module).add('地图中心点', () => <MapCenter />);

tslint.test.json

@@ -1,9 +0,0 @@
-{
-  "extends": ["./tslint.json"],
-  "rules": {
-    "no-implicit-dependencies": [false, "dev"]
-  },
-  "linterOptions": {
-    "exclude": ["**/*.d.ts", "**/data/*.ts"]
-  }
-}