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

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

@@ -106,7 +106,85 @@ export interface IMapService<RawMap = {}> {
         }
       | undefined,
   ): void;
-  clearColor?(): void;
+}
+
+export interface IEarthService<RawMap = {}> {
+  version?: string;
+  map: RawMap;
+  bgColor: string;
+  setBgColor(color: string): void;
+  init(): void;
+  initViewPort?(): void;
+  destroy(): void;
+  onCameraChanged(callback: (viewport: IViewport) => void): void;
+  // init map
+  addMarkerContainer(): void;
+  getMarkerContainer(): HTMLElement;
+  // MapEvent // 定义事件类型
+
+  on(type: string, handler: (...args: any[]) => void): void;
+  off(type: string, handler: (...args: any[]) => void): void;
+  once(type: string, handler: (...args: any[]) => void): void;
+  // get dom
+  getContainer(): HTMLElement | null;
+  getSize(): [number, number];
+  // get map status method
+  getMinZoom(): number;
+  getMaxZoom(): number;
+  // get map params
+  getType(): string;
+  getZoom(): number;
+  getCenter(option?: ICameraOptions): ILngLat;
+  getPitch(): number;
+  getRotation(): number;
+  getBounds(): Bounds;
+  getMapContainer(): HTMLElement | null;
+  getMapCanvasContainer(): HTMLElement;
+
+  // control with raw map
+  setRotation(rotation: number): void;
+  zoomIn(option?: any, eventData?: any): void;
+  zoomOut(option?: any, eventData?: any): void;
+  panTo(p: 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;
+  setPitch(pitch: number): void;
+  setZoom(zoom: number): void;
+  setMapStyle(style: any): void;
+  setMapStatus(option: Partial<IStatusOptions>): void;
+
+  // coordinates methods
+  pixelToLngLat(pixel: Point): ILngLat;
+  lngLatToPixel(lnglat: Point): IPoint;
+  containerToLngLat(pixel: Point): ILngLat;
+  lngLatToContainer(lnglat: Point): IPoint;
+  lngLatToMercator(lnglat: [number, number], altitude: number): IMercator;
+  getModelMatrix(
+    lnglat: [number, number],
+    altitude: number,
+    rotate: [number, number, number],
+    scale: [number, number, number],
+    origin: IMercator,
+  ): number[];
+  lngLatToCoord?(lnglat: [number, number]): [number, number];
+  lngLatToCoords?(
+    lnglatArray: number[][][] | number[][],
+  ): number[][][] | number[][] | number[][][] | number[][];
+  // lngLatToCoords?(lnglatArray: any): any;
+  getCustomCoordCenter?(): [number, number];
+  exportMap(type: 'jpg' | 'png'): string;
+
+  // 地球模式下的地图方法/属性
+  rotateY?(
+    option:
+      | {
+          force?: boolean;
+          reg?: number;
+        }
+      | undefined,
+  ): void;
 }
 
 export const MapServiceEvent = ['mapload'];

packages/maps/src/earth/Viewport.ts

@@ -2,6 +2,11 @@ import { IMapCamera, IViewport } from '@antv/l7-core';
 import { mat4, vec3 } from 'gl-matrix';
 import WebMercatorViewport from 'viewport-mercator-project';
 
+export interface IEarthCamera {
+  viewportHeight: number;
+  viewportWidth: number;
+}
+
 export default class Viewport implements IViewport {
   // TODO: 初始化相机的姿态 看向地球
   private xzReg: number = -Math.PI * 0.6;
@@ -21,7 +26,7 @@ export default class Viewport implements IViewport {
   private ViewProjectionMatrixUncentered: mat4 = mat4.create();
   private viewUncenteredMatrix: mat4 = mat4.create();
 
-  public syncWithMapCamera(mapCamera: Partial<IMapCamera>) {
+  public syncWithMapCamera(mapCamera: Partial<IEarthCamera>) {
     const { viewportHeight = 1, viewportWidth = 1 } = mapCamera;
     const aspect = viewportWidth / viewportHeight;
     const near = 0.1;

packages/maps/src/earth/map.ts

@@ -5,13 +5,12 @@ import {
   Bounds,
   CoordinateSystem,
   ICoordinateSystemService,
+  IEarthService,
   IGlobalConfigService,
   ILngLat,
   IMapConfig,
-  IMapService,
   IMercator,
   IPoint,
-  IRendererService,
   IStatusOptions,
   IViewport,
   MapServiceEvent,
@@ -39,7 +38,7 @@ const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12;
  * AMapService
  */
 @injectable()
-export default class L7MapService implements IMapService<Map> {
+export default class L7EarthService implements IEarthService<Map> {
   public version: string = Version.GLOBEL;
   public map: Map;
 
@@ -55,9 +54,6 @@ export default class L7MapService implements IMapService<Map> {
   @inject(TYPES.ICoordinateSystemService)
   private readonly coordinateSystemService: ICoordinateSystemService;
 
-  @inject(TYPES.IRendererService)
-  private readonly renderService: IRendererService;
-
   @inject(TYPES.IEventEmitter)
   private eventEmitter: any;
   private viewport: Viewport;
@@ -332,23 +328,14 @@ export default class L7MapService implements IMapService<Map> {
       this.viewport.rotateY(reg);
 
       this.viewport.syncWithMapCamera({
-        bearing: this.map.getBearing(),
         viewportHeight: this.map.transform.height,
-        pitch: this.map.getPitch(),
         viewportWidth: this.map.transform.width,
-        zoom: this.map.getZoom(),
-        // mapbox 中固定相机高度为 viewport 高度的 1.5 倍
-        cameraHeight: 0,
       });
 
       this.cameraChangedCallback(this.viewport);
     }
   }
 
-  public clearColor() {
-    this.renderService.clear({ color: [0.0, 0.0, 0.0, 1.0] });
-  }
-
   private handleCameraChanged = (e: any) => {
     const DELAY_TIME = 2000;
     this.handleCameraChanging = true;
@@ -389,13 +376,8 @@ export default class L7MapService implements IMapService<Map> {
 
     // resync
     this.viewport.syncWithMapCamera({
-      bearing: this.map.getBearing(),
       viewportHeight: this.map.transform.height,
-      pitch: this.map.getPitch(),
       viewportWidth: this.map.transform.width,
-      zoom: this.map.getZoom(),
-      // mapbox 中固定相机高度为 viewport 高度的 1.5 倍
-      cameraHeight: 0,
     });
     // set coordinate system
     if (

packages/source/src/parser/image.ts

@@ -7,7 +7,8 @@ export default function image(
   data: string | string[],
   cfg: IImageCfg,
 ): IParserData {
-  const { extent } = cfg;
+  // TODO: 为 extent 赋默认值
+  const { extent = [121.168, 30.2828, 121.384, 30.4219] } = cfg;
   const images = new Promise((resolve) => {
     loadData(data, (res: any) => {
       resolve(res);

stories/customMap/components/earth.tsx

@@ -385,43 +385,17 @@ export default class ScaleComponent extends React.Component {
       // .animate(true)
       .active(true);
 
-    // scene.addLayer(pointlayer);
-
-    // let pointlayer = new PointLayer()
-    //   .source(
-    //     [
-    //       {
-    //         lng: 120,
-    //         lat: 30,
-    //       },
-    //     ],
-    //     {
-    //       parser: {
-    //         type: 'json',
-    //         x: 'lng',
-    //         y: 'lat',
-    //       },
-    //     },
-    //   )
-    //   .shape('circle')
-    //   .color('rgba(255, 0, 0, 1.0)')
-    //   .size(200);
-
     const earthlayer = new EarthLayer()
       .source(
         'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
         {
           parser: {
             type: 'image',
-            extent: [121.168, 30.2828, 121.384, 30.4219],
           },
         },
       )
-      .color('#2E8AE6')
-      .shape('fill')
+      .shape('base')
       .style({
-        opacity: 1.0,
-        radius: 40,
         globelOtions: {
           ambientRatio: 0.6, // 环境光
           diffuseRatio: 0.4, // 漫反射

stories/customMap/components/earth2.tsx

@@ -14,11 +14,7 @@ export default class ScaleComponent extends React.Component {
   public async componentDidMount() {
     const scene = new Scene({
       id: 'map',
-      map: new Earth({
-        center: [120, 30],
-        pitch: 0,
-        zoom: 3,
-      }),
+      map: new Earth({}),
     });
 
     scene.setBgColor('#333');
@@ -70,16 +66,11 @@ export default class ScaleComponent extends React.Component {
         {
           parser: {
             type: 'image',
-            extent: [121.168, 30.2828, 121.384, 30.4219],
           },
         },
       )
-      // .color('#2E8AE6')
-      .color('#f00')
       .shape('fill')
       .style({
-        opacity: 1.0,
-        radius: 40,
         globelOtions: {
           ambientRatio: 0.6, // 环境光
           diffuseRatio: 0.4, // 漫反射