Merge pull request #777 from antvis/shihui_dev

Shihui dev

lerna.json

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

packages/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.5.23",
+  "version": "2.5.24",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,8 +25,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "^2.5.23",
+    "@antv/l7-core": "^2.5.24",
-    "@antv/l7-utils": "^2.5.23",
+    "@antv/l7-utils": "^2.5.24",
     "@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.23",
+  "version": "2.5.24",
   "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.23",
+    "@antv/l7-utils": "^2.5.24",
     "@babel/runtime": "^7.7.7",
     "@mapbox/tiny-sdf": "^1.1.1",
     "ajv": "^6.10.2",

packages/core/src/services/layer/ILayerService.ts

@@ -1,6 +1,7 @@
 // @ts-ignore
 import { SyncBailHook, SyncHook, SyncWaterfallHook } from '@antv/async-hook';
 import { Container } from 'inversify';
+import { AnimationMixer, Matrix4, Object3D } from 'three';
 import Clock from '../../utils/clock';
 import { ISceneConfig } from '../config/IConfigService';
 import { IMapService } from '../map/IMapService';
@@ -30,6 +31,7 @@ import {
   StyleAttributeOption,
   Triangulation,
 } from './IStyleAttributeService';
+
 // import {
 //   IStyleAttributeUpdateOptions,
 //   StyleAttributeField,
@@ -85,6 +87,8 @@ export interface IActiveOption {
   color: string | number[];
 }
 
+type ILngLat = [number, number];
+
 export interface ILayer {
   id: string; // 一个场景中同一类型 Layer 可能存在多个
   type: string; // 代表 Layer 的类型
@@ -213,6 +217,41 @@ export interface ILayer {
   updateLayerConfig(configToUpdate: Partial<ILayerConfig | unknown>): void;
   setAnimateStartTime(): void;
   getLayerAnimateTime(): number;
+
+  /**
+   * threejs 适配兼容相关的方法
+   * @param lnglat
+   * @param altitude
+   * @param rotation
+   * @param scale
+   */
+
+  // 获取对应地图的经纬度模型矩阵
+  getModelMatrix?(
+    lnglat: ILngLat,
+    altitude: number,
+    rotation: [number, number, number],
+    scale: [number, number, number],
+  ): Matrix4;
+
+  // 获取对应地图的经纬度平移矩阵
+  // getTranslateMatrix(lnglat: ILngLat, altitude?: number): Matrix4;
+
+  // 设置模型对应地图在经纬度和高度方向的平移
+  applyObjectLngLat?(
+    object: Object3D,
+    lnglat: ILngLat,
+    altitude?: number,
+  ): void;
+
+  // 根据经纬度设置模型对应地图的平移
+  setObjectLngLat?(object: Object3D, lnglat: ILngLat, altitude?: number): void;
+
+  // 返回物体在场景中的经纬度
+  getObjectLngLat?(object: Object3D): ILngLat;
+
+  // 增加加载模型的动画混合器
+  addAnimateMixer?(mixer: AnimationMixer): void;
 }
 
 /**

packages/l7/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7",
-  "version": "2.5.23",
+  "version": "2.5.24",
   "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.23",
+    "@antv/l7-component": "^2.5.24",
-    "@antv/l7-core": "^2.5.23",
+    "@antv/l7-core": "^2.5.24",
-    "@antv/l7-layers": "^2.5.23",
+    "@antv/l7-layers": "^2.5.24",
-    "@antv/l7-maps": "^2.5.23",
+    "@antv/l7-maps": "^2.5.24",
-    "@antv/l7-scene": "^2.5.23",
+    "@antv/l7-scene": "^2.5.24",
-    "@antv/l7-utils": "^2.5.23",
+    "@antv/l7-utils": "^2.5.24",
     "@babel/runtime": "^7.7.7"
   },
   "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

packages/l7/src/version.ts

@@ -1,2 +1,2 @@
-const version = '2.5.23';
+const version = '2.5.24';
 export { version };

packages/layers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-layers",
-  "version": "2.5.23",
+  "version": "2.5.24",
   "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.23",
+    "@antv/l7-core": "^2.5.24",
-    "@antv/l7-source": "^2.5.23",
+    "@antv/l7-source": "^2.5.24",
-    "@antv/l7-utils": "^2.5.23",
+    "@antv/l7-utils": "^2.5.24",
     "@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.23",
+  "version": "2.5.24",
   "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.23",
+    "@antv/l7-utils": "^2.5.24",
     "@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.23",
+  "version": "2.5.24",
   "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.23",
+    "@antv/l7-core": "^2.5.24",
-    "@antv/l7-map": "^2.5.23",
+    "@antv/l7-map": "^2.5.24",
-    "@antv/l7-utils": "^2.5.23",
+    "@antv/l7-utils": "^2.5.24",
     "@babel/runtime": "^7.7.7",
     "@types/amap-js-api": "^1.4.6",
     "@types/mapbox-gl": "^1.11.2",

packages/renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-renderer",
-  "version": "2.5.23",
+  "version": "2.5.24",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,7 +26,7 @@
     "gl": "^4.4.0"
   },
   "dependencies": {
-    "@antv/l7-core": "^2.5.23",
+    "@antv/l7-core": "^2.5.24",
     "@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.23",
+  "version": "2.5.24",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,12 +23,12 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-component": "^2.5.23",
+    "@antv/l7-component": "^2.5.24",
-    "@antv/l7-core": "^2.5.23",
+    "@antv/l7-core": "^2.5.24",
-    "@antv/l7-layers": "^2.5.23",
+    "@antv/l7-layers": "^2.5.24",
-    "@antv/l7-maps": "^2.5.23",
+    "@antv/l7-maps": "^2.5.24",
-    "@antv/l7-renderer": "^2.5.23",
+    "@antv/l7-renderer": "^2.5.24",
-    "@antv/l7-utils": "^2.5.23",
+    "@antv/l7-utils": "^2.5.24",
     "@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.23",
+  "version": "2.5.24",
   "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.23",
+    "@antv/l7-core": "^2.5.24",
-    "@antv/l7-utils": "^2.5.23",
+    "@antv/l7-utils": "^2.5.24",
     "@babel/runtime": "^7.7.7",
     "@mapbox/geojson-rewind": "^0.4.0",
     "@turf/helpers": "^6.1.4",

packages/three/package.json

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

packages/three/rollup.config.js

@@ -38,7 +38,9 @@ export default {
     terser()
   ],
   external: [
-    '@antv/l7'
+    '@antv/l7-core',
+    '@antv/l7-scene',
+    '@antv/l7-layers'
   ],
   output: [
     {

packages/three/src/core/IThreeJSLayer.ts

@@ -1,29 +0,0 @@
-import { ILayer } from '@antv/l7';
-import { AnimationMixer, Matrix4, Object3D } from 'three';
-
-export type ILngLat = [number, number];
-
-export interface IThreeJSLayer extends ILayer {
-  // 获取对应地图的经纬度模型矩阵
-  getModelMatrix(
-    lnglat: ILngLat,
-    altitude: number,
-    rotation: [number, number, number],
-    scale: [number, number, number],
-  ): Matrix4;
-
-  // 获取对应地图的经纬度平移矩阵
-  getTranslateMatrix(lnglat: ILngLat, altitude?: number): Matrix4;
-
-  // 设置模型对应地图在经纬度和高度方向的平移
-  setObjectLngLat(object: Object3D, lnglat: ILngLat, altitude?: number): void;
-
-  // 根据经纬度设置模型对应地图的平移
-  setObjectLngLat(object: Object3D, lnglat: ILngLat, altitude?: number): void;
-
-  // 返回物体在场景中的经纬度
-  getObjectLngLat(object: Object3D): ILngLat;
-
-  // 增加加载模型的动画混合器
-  addAnimateMixer(mixer: AnimationMixer): void;
-}

packages/three/src/core/baseLayer.ts

@@ -1,4 +1,5 @@
-import { BaseLayer, ILayer, IMercator } from '@antv/l7';
+import { ILayer, IMercator } from '@antv/l7-core';
+import { BaseLayer } from '@antv/l7-layers';
 import {
   AnimationMixer,
   Camera,
@@ -10,17 +11,17 @@ import {
   Vector3,
   WebGLRenderer,
 } from 'three';
-import { ILngLat, IThreeJSLayer } from './IThreeJSLayer';
 import {
   IThreeRenderService,
   ThreeRenderServiceType,
 } from './threeRenderService';
 const DEG2RAD = Math.PI / 180;
+type ILngLat = [number, number];
 export default class ThreeJSLayer
   extends BaseLayer<{
     onAddMeshes: (threeScene: Scene, layer: ThreeJSLayer) => void;
   }>
-  implements IThreeJSLayer {
+  implements ILayer {
   public type: string = 'custom';
   protected threeRenderService: IThreeRenderService;
   // 构建 threejs 的 scene

packages/three/src/core/threeRender.ts

@@ -1,4 +1,4 @@
-import { Scene } from '@antv/l7';
+import { Scene } from '@antv/l7-scene';
 import {
   AnimationMixer,
   Camera,

packages/three/src/core/threeRenderService.ts

@@ -1,4 +1,4 @@
-import { IMapService, IMercator, IRendererService, TYPES } from '@antv/l7';
+import { IMapService, IMercator, IRendererService, TYPES } from '@antv/l7-core';
 import { inject, injectable } from 'inversify';
 import 'reflect-metadata';
 

packages/three/src/index.ts

@@ -1,5 +1,5 @@
 import { Object3D } from 'three';
 import ThreeLayer from './core/baseLayer';
-import { ILngLat, IThreeJSLayer } from './core/IThreeJSLayer';
+// import { IThreeJSLayer } from './core/IThreeJSLayer';
 import ThreeRender from './core/threeRender';
-export { ThreeLayer, ThreeRender, IThreeJSLayer, ILngLat, Object3D };
+export { ThreeLayer, ThreeRender, Object3D };

packages/utils/package.json

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

stories/3D_Model/Components/amap2_three.tsx

@@ -1,6 +1,7 @@
+// @ts-ignore
 import { Scene } from '@antv/l7';
 import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
-import { ThreeLayer, ThreeRender, ILngLat, Object3D } from '@antv/l7-three';
+import { ThreeLayer, ThreeRender, Object3D } from '@antv/l7-three';
 import * as React from 'react';
 // import { DirectionalLight, Scene as ThreeScene } from 'three';
 import * as THREE from 'three';
@@ -35,6 +36,7 @@ export default class GlTFThreeJSDemo extends React.Component {
     scene.on('loaded', () => {
       const threeJSLayer = new ThreeLayer({
         enableMultiPassRenderer: false,
+        // @ts-ignore
         onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
           threeScene.add(new THREE.AmbientLight(0xffffff));
 
@@ -54,6 +56,7 @@ export default class GlTFThreeJSDemo extends React.Component {
             // 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/man/CesiumMan.gltf',
             'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
             (gltf) => {
+              // @ts-ignore
               const model: Object3D = gltf.scene;
 
               layer.getSource().data.dataArray.forEach(({ coordinates }) => {
@@ -89,18 +92,14 @@ export default class GlTFThreeJSDemo extends React.Component {
               // layer.setObjectLngLat(model, [center.lng + 0.05, center.lat] as ILngLat, 0)
               // layer.setObjectLngLat(model, [center.lng + 0.05, center.lat] as ILngLat, 0)
 
-              layer.setObjectLngLat(
+              layer.setObjectLngLat(model, [center.lng + 0.05, center.lat], 0);
-                model,
-                [center.lng + 0.05, center.lat] as ILngLat,
-                0,
-              );
 
               let t = 0;
               setInterval(() => {
                 t += 0.01;
                 layer.setObjectLngLat(
                   model,
-                  [center.lng, center.lat + Math.sin(t) * 0.1] as ILngLat,
+                  [center.lng, center.lat + Math.sin(t) * 0.1],
                   0,
                 );
                 // layer.setObjectLngLat(model, [center.lng + 0.2, center.lat], 0)

stories/3D_Model/Components/amap_three.tsx

@@ -1,6 +1,7 @@
+// @ts-ignore
 import { Scene } from '@antv/l7';
 import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import { ThreeLayer, ThreeRender, ILngLat } from '@antv/l7-three';
+import { ThreeLayer, ThreeRender } from '@antv/l7-three';
 import * as React from 'react';
 // import { DirectionalLight, Scene as ThreeScene } from 'three';
 import * as THREE from 'three';
@@ -35,6 +36,7 @@ export default class GlTFThreeJSDemo extends React.Component {
     scene.on('loaded', () => {
       const threeJSLayer = new ThreeLayer({
         enableMultiPassRenderer: false,
+        // @ts-ignore
         onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
           threeScene.add(new THREE.AmbientLight(0xffffff));
           const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
@@ -47,11 +49,7 @@ export default class GlTFThreeJSDemo extends React.Component {
           let cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000);
           let cubeMaterial = new THREE.MeshNormalMaterial();
           let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
-          layer.setObjectLngLat(
+          layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat], 0);
-            cube,
-            [center.lng + 0.05, center.lat] as ILngLat,
-            0,
-          );
           threeScene.add(cube);
 
           // 使用 Three.js glTFLoader 加载模型
@@ -101,7 +99,7 @@ export default class GlTFThreeJSDemo extends React.Component {
                   t += 0.01;
                   layer.setObjectLngLat(
                     gltfScene,
-                    [center.lng, center.lat + Math.sin(t) * 0.1] as ILngLat,
+                    [center.lng, center.lat + Math.sin(t) * 0.1],
                     0,
                   );
                 }, 16);

stories/3D_Model/Components/mapbox_three.tsx

@@ -1,6 +1,7 @@
+// @ts-ignore
 import { PolygonLayer, Scene } from '@antv/l7';
 import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import { ThreeLayer, ThreeRender, ILngLat } from '@antv/l7-three';
+import { ThreeLayer, ThreeRender } from '@antv/l7-three';
 import * as React from 'react';
 // import { DirectionalLight, Scene as ThreeScene } from 'three';
 import * as THREE from 'three';
@@ -9,6 +10,7 @@ import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { animate, easeInOut } from 'popmotion';
 import { Object3D, Vector3 } from 'three';
 
+type ILngLat = [number, number];
 let isTravel = false;
 
 function travel(
@@ -108,6 +110,7 @@ export default class GlTFThreeJSDemo extends React.Component {
       scene.addLayer(polygonlayer);
       const threeJSLayer = new ThreeLayer({
         enableMultiPassRenderer: false,
+        // @ts-ignore
         onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
           // 添加光
           threeScene.add(new THREE.AmbientLight(0xffffff));

stories/3D_Model/Components/threeRender.tsx

@@ -1,3 +1,4 @@
+// @ts-ignore
 import { PointLayer, Scene } from '@antv/l7';
 import { GaodeMap, Mapbox } from '@antv/l7-maps';
 import { ThreeLayer, ThreeRender } from '@antv/l7-three';
@@ -62,6 +63,7 @@ export default class GlTFThreeJSDemo extends React.Component {
 
       const threeJSLayer = new ThreeLayer({
         enableMultiPassRenderer: false,
+        // @ts-ignore
         onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
           threeScene.add(new THREE.AmbientLight(0xffffff));
           const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);