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

Merge pull request #777 from antvis/shihui_dev 

Shihui dev
This commit is contained in:
YiQianYao 2021-09-22 18:09:50 +08:00 committed by GitHub
parent a4c974261c 1ec6994abb
commit 8920b465b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 108 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lerna.json
View File

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

6
packages/component/package.json
View File

@ -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-utils": "^2.5.23",
"@antv/l7-core": "^2.5.24",
"@antv/l7-utils": "^2.5.24",
"@babel/runtime": "^7.7.7",
"eventemitter3": "^4.0.0",
"inversify": "^5.0.1",

4
packages/core/package.json
View File

@ -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",

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

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

14
packages/l7/package.json
View File

@ -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-core": "^2.5.23",
"@antv/l7-layers": "^2.5.23",
"@antv/l7-maps": "^2.5.23",
"@antv/l7-scene": "^2.5.23",
"@antv/l7-utils": "^2.5.23",
"@antv/l7-component": "^2.5.24",
"@antv/l7-core": "^2.5.24",
"@antv/l7-layers": "^2.5.24",
"@antv/l7-maps": "^2.5.24",
"@antv/l7-scene": "^2.5.24",
"@antv/l7-utils": "^2.5.24",
"@babel/runtime": "^7.7.7"
},
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

2
packages/l7/src/version.ts
View File

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

8
packages/layers/package.json
View File

@ -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-source": "^2.5.23",
"@antv/l7-utils": "^2.5.23",
"@antv/l7-core": "^2.5.24",
"@antv/l7-source": "^2.5.24",
"@antv/l7-utils": "^2.5.24",
"@babel/runtime": "^7.7.7",
"@mapbox/martini": "^0.2.0",
"@turf/meta": "^6.0.2",

4
packages/map/package.json
View File

@ -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",

8
packages/maps/package.json
View File

@ -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-map": "^2.5.23",
"@antv/l7-utils": "^2.5.23",
"@antv/l7-core": "^2.5.24",
"@antv/l7-map": "^2.5.24",
"@antv/l7-utils": "^2.5.24",
"@babel/runtime": "^7.7.7",
"@types/amap-js-api": "^1.4.6",
"@types/mapbox-gl": "^1.11.2",

4
packages/renderer/package.json
View File

@ -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",

14
packages/scene/package.json
View File

@ -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-core": "^2.5.23",
"@antv/l7-layers": "^2.5.23",
"@antv/l7-maps": "^2.5.23",
"@antv/l7-renderer": "^2.5.23",
"@antv/l7-utils": "^2.5.23",
"@antv/l7-component": "^2.5.24",
"@antv/l7-core": "^2.5.24",
"@antv/l7-layers": "^2.5.24",
"@antv/l7-maps": "^2.5.24",
"@antv/l7-renderer": "^2.5.24",
"@antv/l7-utils": "^2.5.24",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"mapbox-gl": "^1.2.1",

6
packages/source/package.json
View File

@ -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-utils": "^2.5.23",
"@antv/l7-core": "^2.5.24",
"@antv/l7-utils": "^2.5.24",
"@babel/runtime": "^7.7.7",
"@mapbox/geojson-rewind": "^0.4.0",
"@turf/helpers": "^6.1.4",

6
packages/three/package.json
View File

@ -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",

4
packages/three/rollup.config.js
View File

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

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

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

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

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

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

2
packages/utils/package.json
View File

@ -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",

13
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 }) => {
@ -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(
model,
[center.lng + 0.05, center.lat] as ILngLat,
0,
);
layer.setObjectLngLat(model, [center.lng + 0.05, center.lat], 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)

12
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);
@ -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(
cube,
[center.lng + 0.05, center.lat] as ILngLat,
0,
);
layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat], 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);

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