Shihui dev (#798)

* 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

* feat: pointLayer/cylinder 圆柱兼容地球模式

* style: lint style

* feat: 修复 pointLayer/fill 在拾取是破面严重的情况

* style: lint style

* feat: 增加 arc 弧度调节

* feat: 增加 lineLayer/arc3d 兼容地球模式

* style: lint style

* feat: 增加地球图层 - 大气层

* style: lint style

* feat: 增加设置可视化层背景色的能力

* style: lint style

* feat: 增加地球外发光效果

* style: lint style

* feat: 允许用户不使用 layer 的 source 方法 - 地球模式下光晕图层不需要传数据

* style: lint style

* feat: 调整光晕的 shader 计算

* chore: update version 2.5.32 -> 2.5.33

* feat: 调整地球大气层的渲染层级

* style: lint style

* feat: 调整案例

* style: lint style

* chore: update version 2.5.34 -> 2.5.35

* feat: 增加地球图层的默认参数、调整部分代码

* style: lint style

lerna.json

@@ -14,7 +14,7 @@
       "message": "chore: publish"
     }
   },
-  "version": "2.5.33",
+  "version": "2.5.34",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "publishConfig": {

packages/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.5.33",
+  "version": "2.5.34",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,8 +25,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "^2.5.33",
+    "@antv/l7-core": "^2.5.34",
-    "@antv/l7-utils": "^2.5.33",
+    "@antv/l7-utils": "^2.5.34",
     "@babel/runtime": "^7.7.7",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-core",
-  "version": "2.5.33",
+  "version": "2.5.34",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,7 +24,7 @@
   "license": "ISC",
   "dependencies": {
     "@antv/async-hook": "^2.1.0",
-    "@antv/l7-utils": "^2.5.33",
+    "@antv/l7-utils": "^2.5.34",
     "@babel/runtime": "^7.7.7",
     "@mapbox/tiny-sdf": "^1.1.1",
     "ajv": "^6.10.2",

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/l7/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7",
-  "version": "2.5.33",
+  "version": "2.5.34",
   "description": "A Large-scale WebGL-powered Geospatial Data Visualization",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,12 +25,12 @@
   "author": "antv",
   "license": "MIT",
   "dependencies": {
-    "@antv/l7-component": "^2.5.33",
+    "@antv/l7-component": "^2.5.34",
-    "@antv/l7-core": "^2.5.33",
+    "@antv/l7-core": "^2.5.34",
-    "@antv/l7-layers": "^2.5.33",
+    "@antv/l7-layers": "^2.5.34",
-    "@antv/l7-maps": "^2.5.33",
+    "@antv/l7-maps": "^2.5.34",
-    "@antv/l7-scene": "^2.5.33",
+    "@antv/l7-scene": "^2.5.34",
-    "@antv/l7-utils": "^2.5.33",
+    "@antv/l7-utils": "^2.5.34",
     "@babel/runtime": "^7.7.7"
   },
   "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

packages/l7/src/version.ts

@@ -1,2 +1,2 @@
-const version = '2.5.33';
+const version = '2.5.34';
 export { version };

packages/layers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-layers",
-  "version": "2.5.33",
+  "version": "2.5.34",
   "description": "L7's collection of built-in layers",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,9 +24,9 @@
   "license": "ISC",
   "dependencies": {
     "@antv/async-hook": "^2.1.0",
-    "@antv/l7-core": "^2.5.33",
+    "@antv/l7-core": "^2.5.34",
-    "@antv/l7-source": "^2.5.33",
+    "@antv/l7-source": "^2.5.34",
-    "@antv/l7-utils": "^2.5.33",
+    "@antv/l7-utils": "^2.5.34",
     "@babel/runtime": "^7.7.7",
     "@mapbox/martini": "^0.2.0",
     "@turf/meta": "^6.0.2",

packages/map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-map",
-  "version": "2.5.33",
+  "version": "2.5.34",
   "description": "l7 map",
   "keywords": [],
   "author": "thinkinggis <lzx199065@gmail.com>",
@@ -37,7 +37,7 @@
   },
   "homepage": "https://github.com/antvis/L7#readme",
   "dependencies": {
-    "@antv/l7-utils": "^2.5.33",
+    "@antv/l7-utils": "^2.5.34",
     "@babel/runtime": "^7.7.7",
     "@mapbox/point-geometry": "^0.1.0",
     "@mapbox/unitbezier": "^0.0.0",

packages/maps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-maps",
-  "version": "2.5.33",
+  "version": "2.5.34",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -27,9 +27,9 @@
   "license": "ISC",
   "dependencies": {
     "@amap/amap-jsapi-loader": "^0.0.3",
-    "@antv/l7-core": "^2.5.33",
+    "@antv/l7-core": "^2.5.34",
-    "@antv/l7-map": "^2.5.33",
+    "@antv/l7-map": "^2.5.34",
-    "@antv/l7-utils": "^2.5.33",
+    "@antv/l7-utils": "^2.5.34",
     "@babel/runtime": "^7.7.7",
     "@types/amap-js-api": "^1.4.6",
     "@types/mapbox-gl": "^1.11.2",

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/renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-renderer",
-  "version": "2.5.33",
+  "version": "2.5.34",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,7 +26,7 @@
     "gl": "^4.4.0"
   },
   "dependencies": {
-    "@antv/l7-core": "^2.5.33",
+    "@antv/l7-core": "^2.5.34",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "l7regl": "^0.0.14",

packages/scene/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-scene",
-  "version": "2.5.33",
+  "version": "2.5.34",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,12 +23,12 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-component": "^2.5.33",
+    "@antv/l7-component": "^2.5.34",
-    "@antv/l7-core": "^2.5.33",
+    "@antv/l7-core": "^2.5.34",
-    "@antv/l7-layers": "^2.5.33",
+    "@antv/l7-layers": "^2.5.34",
-    "@antv/l7-maps": "^2.5.33",
+    "@antv/l7-maps": "^2.5.34",
-    "@antv/l7-renderer": "^2.5.33",
+    "@antv/l7-renderer": "^2.5.34",
-    "@antv/l7-utils": "^2.5.33",
+    "@antv/l7-utils": "^2.5.34",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "mapbox-gl": "^1.2.1",

packages/source/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-source",
-  "version": "2.5.33",
+  "version": "2.5.34",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,8 +26,8 @@
   "license": "ISC",
   "dependencies": {
     "@antv/async-hook": "^2.1.0",
-    "@antv/l7-core": "^2.5.33",
+    "@antv/l7-core": "^2.5.34",
-    "@antv/l7-utils": "^2.5.33",
+    "@antv/l7-utils": "^2.5.34",
     "@babel/runtime": "^7.7.7",
     "@mapbox/geojson-rewind": "^0.4.0",
     "@turf/helpers": "^6.1.4",

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);

packages/three/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-three",
-  "version": "2.5.33",
+  "version": "2.5.34",
   "description": "three for L7 ",
   "keywords": [
     "3D",
@@ -44,9 +44,9 @@
   },
   "homepage": "https://github.com/antvis/L7#readme",
   "dependencies": {
-    "@antv/l7-core": "^2.5.33",
+    "@antv/l7-core": "^2.5.34",
-    "@antv/l7-layers": "^2.5.33",
+    "@antv/l7-layers": "^2.5.34",
-    "@antv/l7-scene": "^2.5.33",
+    "@antv/l7-scene": "^2.5.34",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "reflect-metadata": "^0.1.13",

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-utils",
-  "version": "2.5.33",
+  "version": "2.5.34",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",

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('base')
-      .shape('fill')
       .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({
+      map: new Earth({}),
-        center: [120, 30],
-        pitch: 0,
-        zoom: 3,
-      }),
     });
 
     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, // 漫反射