p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: 修复类型导出报错

This commit is contained in:
2912401452 2021-09-22 17:52:17 +08:00
parent a6ce25071b
commit ae9cd8c356
11 changed files with 60 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/core/src/services/layer/ILayerService.ts
View File

@ -30,6 +30,8 @@ import {
StyleAttributeOption,
Triangulation,
} from './IStyleAttributeService';
import { AnimationMixer, Matrix4, Object3D } from 'three';
// 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,31 @@ export interface ILayer {
updateLayerConfig(configToUpdate: Partial<ILayerConfig | unknown>): void;
setAnimateStartTime(): void;
getLayerAnimateTime(): number;
// three
// 获取对应地图的经纬度模型矩阵
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;
}
/**

4
packages/three/package.json
View File

@ -44,7 +44,9 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7": "^2.5.24",
"@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",

6
packages/three/src/core/IThreeJSLayer.ts
View File

@ -1,7 +1,7 @@
import { ILayer } from '@antv/l7';
import { ILayer } from '@antv/l7-core';
import { AnimationMixer, Matrix4, Object3D } from 'three';
export type ILngLat = [number, number];
type ILngLat = [number, number];
export interface IThreeJSLayer extends ILayer {
// 获取对应地图的经纬度模型矩阵
@ -19,7 +19,7 @@ export interface IThreeJSLayer extends ILayer {
setObjectLngLat(object: Object3D, lnglat: ILngLat, altitude?: number): void;
// 根据经纬度设置模型对应地图的平移
setObjectLngLat(object: Object3D, lnglat: ILngLat, altitude?: number): void;
applyObjectLngLat(object: Object3D, lnglat: ILngLat, altitude?: number): void;
// 返回物体在场景中的经纬度
getObjectLngLat(object: Object3D): ILngLat;

8
packages/three/src/core/baseLayer.ts
View File

@ -1,4 +1,5 @@
import { BaseLayer, ILayer, IMercator } from '@antv/l7';
import { BaseLayer } from '@antv/l7-layers'
import { ILayer, IMercator } from '@antv/l7-core'
import {
AnimationMixer,
Camera,
@ -10,17 +11,16 @@ 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

2
packages/three/src/core/threeRender.ts
View File

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

2
packages/three/src/core/threeRenderService.ts
View File

@ -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';

4
packages/three/src/index.ts
View File

@ -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 };

9
stories/3D_Model/Components/amap2_three.tsx
View File

@ -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 }) => {
@ -91,7 +94,7 @@ export default class GlTFThreeJSDemo extends React.Component {
layer.setObjectLngLat(
model,
[center.lng + 0.05, center.lat] as ILngLat,
[center.lng + 0.05, center.lat],
0,
);
@ -100,7 +103,7 @@ export default class GlTFThreeJSDemo extends React.Component {
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)

8
stories/3D_Model/Components/amap_three.tsx
View File

@ -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);
@ -49,7 +51,7 @@ export default class GlTFThreeJSDemo extends React.Component {
let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
layer.setObjectLngLat(
cube,
[center.lng + 0.05, center.lat] as ILngLat,
[center.lng + 0.05, center.lat],
0,
);
threeScene.add(cube);
@ -101,7 +103,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);

5
stories/3D_Model/Components/mapbox_three.tsx
View File

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

2
stories/3D_Model/Components/threeRender.tsx
View File

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