Shihui dev (#788)

* feat: add getModelMatrix into viewport

* feat: 新增地球模式 （初步构建）

* feat: 完善地球交互

* style: lint style

* feat: 调整地球图层缩放的方向

* style: lint style

* feat: 增加地球模式的 pointLayer/fill 图层

* style: lint style

* feat: 增加地球、太阳的简单运动系统，优化部分代码结构

* fix: 修复时间点击出错

* style: lint style

* fix: 修复地图 panBy 方法参数错误

* style: lint style

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

@@ -65,7 +65,7 @@ export interface IMapService<RawMap = {}> {
   zoomIn(option?: any, eventData?: any): void;
   zoomOut(option?: any, eventData?: any): void;
   panTo(p: Point): void;
-  panBy(pixel: Point): void;
+  panBy(x: number, y: number): void;
   fitBounds(bound: Bounds, fitBoundsOptions?: unknown): void;
   setZoomAndCenter(zoom: number, center: Point): void;
   setCenter(center: [number, number], option?: ICameraOptions): void;

packages/maps/src/amap/map.ts

@@ -229,17 +229,21 @@ export default class AMapService
   public panTo(p: [number, number]): void {
     this.map.panTo(p);
   }
-  public panBy(pixel: [number, number]): void {
+
-    this.map.panTo(pixel);
+  public panBy(x: number = 0, y: number = 0): void {
+    this.map.panBy(x, y);
   }
+
   public fitBounds(extent: Bounds): void {
     this.map.setBounds(
       new AMap.Bounds([extent[0][0], extent[0][1], extent[1][0], extent[1][1]]),
     );
   }
+
   public setZoomAndCenter(zoom: number, center: [number, number]): void {
     this.map.setZoomAndCenter(zoom, center);
   }
+
   public setMapStyle(style: string): void {
     this.map.setMapStyle(this.getMapStyle(style));
   }

packages/maps/src/amap2/map.ts

@@ -306,8 +306,8 @@ export default class AMapService
   public panTo(p: [number, number]): void {
     this.map.panTo(p);
   }
-  public panBy(pixel: [number, number]): void {
+  public panBy(x: number = 0, y: number = 0): void {
-    this.map.panTo(pixel);
+    this.map.panBy(x, y);
   }
   public fitBounds(extent: Bounds): void {
     this.map.setBounds(

packages/maps/src/earth/map.ts

@@ -157,8 +157,8 @@ export default class L7MapService implements IMapService<Map> {
     this.map.panTo(p);
   }
 
-  public panBy(pixel: [number, number]): void {
+  public panBy(x: number = 0, y: number = 0): void {
-    this.panTo(pixel);
+    this.panTo([x, y]);
   }
 
   public fitBounds(bound: Bounds, fitBoundsOptions?: any): void {

packages/maps/src/map/map.ts

@@ -155,8 +155,8 @@ export default class L7MapService implements IMapService<Map> {
     this.map.panTo(p);
   }
 
-  public panBy(pixel: [number, number]): void {
+  public panBy(x: number = 0, y: number = 0): void {
-    this.panTo(pixel);
+    this.panTo([x, y]);
   }
 
   public fitBounds(bound: Bounds, fitBoundsOptions?: any): void {

packages/maps/src/mapbox/map.ts

@@ -162,8 +162,8 @@ export default class MapboxService
     this.map.panTo(p);
   }
 
-  public panBy(pixel: [number, number]): void {
+  public panBy(x: number, y: number): void {
-    this.panTo(pixel);
+    this.panTo([x, y]);
   }
 
   public fitBounds(bound: Bounds, fitBoundsOptions?: unknown): void {

packages/scene/src/IMapController.ts

@@ -51,7 +51,7 @@ export default interface IMapController {
   /**
    * 地图平移到指定点 `[x, y]`
    */
-  panBy(pixel: Point): void;
+  panBy(x: number, y: number): void;
 
   /**
    * 调整地图适合指定区域

packages/scene/src/index.ts

@@ -323,8 +323,8 @@ class Scene
     this.mapService.panTo(p);
   }
 
-  public panBy(pixel: Point): void {
+  public panBy(x: number, y: number): void {
-    this.mapService.panBy(pixel);
+    this.mapService.panBy(x, y);
   }
 
   public getContainer() {

stories/Map/components/mapCenter.tsx

@@ -1,5 +1,5 @@
 // @ts-ignore
-import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7';
+import { PointLayer, Scene } from '@antv/l7';
 import { GaodeMap } from '@antv/l7-maps';
 import * as React from 'react';
 
@@ -65,44 +65,9 @@ export default class GaodeMapComponent extends React.Component {
     scene.render();
     this.scene = scene;
 
-    scene.on('loaded', () => {
+    setTimeout(() => {
-      // const padding = {
+      console.log(this.scene.panBy(10, 10));
-      //   top: 50,
+    }, 1000);
-      //   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() {
@@ -118,36 +83,6 @@ export default class GaodeMapComponent extends React.Component {
             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',
-          }}
-        /> */}
       </>
     );
   }