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

style: lint style

This commit is contained in:
2912401452 2021-09-18 16:04:37 +08:00
parent 3da2676b0e
commit f29d0c6cc2
9 changed files with 62 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/maps/src/amap/map.ts
View File

@ -277,8 +277,8 @@ export default class AMapService
public lngLatToCoord(lnglat: [number, number]): any {
// @ts-ignore
let { x, y } = this.map.lngLatToGeodeticCoord(lnglat)
return [x, -y]
const { x, y } = this.map.lngLatToGeodeticCoord(lnglat);
return [x, -y];
}
public lngLatToMercator(

3
packages/maps/src/amap2/map.ts
View File

@ -370,10 +370,9 @@ export default class AMapService
scale: [number, number, number] = [1, 1, 1],
origin: IMercator = { x: 0, y: 0, z: 0 },
): number[] {
// const flat = this.viewport.projectFlat(lnglat);
// @ts-ignore
const flat = this.map.customCoords.lngLatToCoord(lnglat)
const flat = this.map.customCoords.lngLatToCoord(lnglat);
// @ts-ignore
const modelMatrix = mat4.create();

6
packages/maps/src/mapbox/map.ts
View File

@ -239,12 +239,12 @@ export default class MapboxService
/**
* 将经纬度转成墨卡托坐标
* @param lnglat
* @returns
* @param lnglat
* @returns
*/
public lngLatToCoord(lnglat: [number, number]) {
// @ts-ignore
let { x, y } = this.lngLatToMercator(lnglat, 0);
const { x, y } = this.lngLatToMercator(lnglat, 0);
return [x, y] as [number, number];
}

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

@ -1,11 +1,7 @@
import { ILayer } from '@antv/l7';
import {
AnimationMixer,
Matrix4,
Object3D
} from 'three';
import { AnimationMixer, Matrix4, Object3D } from 'three';
export type ILngLat = [number, number]
export type ILngLat = [number, number];
export interface IThreeJSLayer extends ILayer {
// 获取对应地图的经纬度模型矩阵
@ -30,4 +26,4 @@ export interface IThreeJSLayer extends ILayer {
// 增加加载模型的动画混合器
addAnimateMixer(mixer: AnimationMixer): void;
}
}

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

@ -3,17 +3,17 @@ import {
AnimationMixer,
Camera,
Matrix4,
Object3D,
PCFSoftShadowMap,
PerspectiveCamera,
Scene,
WebGLRenderer,
Object3D
} from 'three';
import { ILngLat, IThreeJSLayer } from './IThreeJSLayer';
import {
IThreeRenderService,
ThreeRenderServiceType,
} from './threeRenderService';
import { IThreeJSLayer, ILngLat } from './IThreeJSLayer'
const DEG2RAD = Math.PI / 180;
export default class ThreeJSLayer
extends BaseLayer<{
@ -29,7 +29,6 @@ export default class ThreeJSLayer
// 地图中点墨卡托坐标
private center: IMercator;
/**
* 根据数据计算对应地图的模型矩阵 不同地图主要是点位偏移不同
*/
@ -52,39 +51,39 @@ export default class ThreeJSLayer
/**
* 获取平移矩阵
* @param lnglat
* @param altitude
* @returns
* @param lnglat
* @param altitude
* @returns
*/
public getTranslateMatrix( lnglat: ILngLat, altitude: number = 0,) {
return this.getModelMatrix( lnglat, altitude, [0, 0, 0], [1, 1, 1] )
public getTranslateMatrix(lnglat: ILngLat, altitude: number = 0) {
return this.getModelMatrix(lnglat, altitude, [0, 0, 0], [1, 1, 1]);
}
/**
* 设置当前物体往经纬度和高度方向的移动
* @param object
* @param lnglat
* @param altitude
* @param object
* @param lnglat
* @param altitude
*/
public applyObjectLngLat(object: Object3D, lnglat: ILngLat, altitude = 0) {
let positionMatrix = this.getTranslateMatrix(lnglat, altitude)
object.applyMatrix4(positionMatrix)
const positionMatrix = this.getTranslateMatrix(lnglat, altitude);
object.applyMatrix4(positionMatrix);
}
/**
* 设置物体当前的经纬度和高度
* @param object
* @param lnglat
* @param altitude
* @param object
* @param lnglat
* @param altitude
*/
public setObjectLngLat(object: Object3D, lnglat: ILngLat, altitude = 0) {
// @ts-ignore
let [x, y] = this.mapService?.lngLatToCoord(lnglat)
const [x, y] = this.mapService?.lngLatToCoord(lnglat);
// @ts-ignore
// console.log(this.mapService?.lngLatToCoord(lnglat))
// if(x && y) {
// console.log('------')
object.position.set(x, y, altitude)
// console.log('------')
object.position.set(x, y, altitude);
// }
}
@ -92,7 +91,7 @@ export default class ThreeJSLayer
// let coord = [object.position.x, object.position.y];
// // @ts-ignore
// return this.mapService.coordToLngLat(coord);
return [0,0] as ILngLat
return [0, 0] as ILngLat;
}
public buildModels() {

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

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

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

@ -37,7 +37,7 @@ export default class GlTFThreeJSDemo extends React.Component {
enableMultiPassRenderer: false,
onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
threeScene.add(new THREE.AmbientLight(0xffffff));
const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
sunlight.position.set(0, 80000000, 100000000);
sunlight.matrixWorldNeedsUpdate = true;
@ -92,27 +92,34 @@ export default class GlTFThreeJSDemo extends React.Component {
// }
layer.addAnimateMixer(mixer);
}
});
// 向场景中添加模型
threeScene.add(model);
let lnglat = [121.107, 30.267069] as [number, number]
let altitude = 0
let center = scene.getCenter()
let lnglat = [121.107, 30.267069] as [number, number];
let altitude = 0;
let center = scene.getCenter();
// layer.setObjectLngLat(model, lnglat, altitude)
// console.log()
// 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] as ILngLat,
0,
);
let t = 0
let t = 0;
setInterval(() => {
t += 0.01
layer.setObjectLngLat(model, [center.lng, center.lat + Math.sin(t) * 0.1] as ILngLat, 0)
t += 0.01;
layer.setObjectLngLat(
model,
[center.lng, center.lat + Math.sin(t) * 0.1] as ILngLat,
0,
);
// layer.setObjectLngLat(model, [center.lng + 0.2, center.lat], 0)
}, 16)
}, 16);
// 重绘图层
layer.render();

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

@ -42,7 +42,6 @@ export default class GlTFThreeJSDemo extends React.Component {
sunlight.matrixWorldNeedsUpdate = true;
threeScene.add(sunlight);
// threeScene.applyMatrix4(
// layer.getModelMatrix(
// [111.4453125, 32.84267363195431], // 经纬度坐标
@ -91,17 +90,21 @@ export default class GlTFThreeJSDemo extends React.Component {
layer.addAnimateMixer(mixer);
}
// console.log(gltfScene.position)
let center = scene.getCenter()
console.log(center)
console.log(layer.getObjectLngLat(gltfScene))
let center = scene.getCenter();
console.log(center);
console.log(layer.getObjectLngLat(gltfScene));
// layer.setObjectLngLat(gltfScene, [center.lng + 0.05, center.lat] as ILngLat, 0)
// layer.setObjectLngLat(gltfScene, [center.lng, center.lat] as ILngLat, 0)
let t = 0
let t = 0;
setInterval(() => {
t += 0.01
layer.setObjectLngLat(gltfScene, [center.lng, center.lat + Math.sin(t) * 0.1] as ILngLat, 0)
t += 0.01;
layer.setObjectLngLat(
gltfScene,
[center.lng, center.lat + Math.sin(t) * 0.1] as ILngLat,
0,
);
// layer.setObjectLngLat(model, [center.lng + 0.2, center.lat], 0)
}, 16)
}, 16);
// 向场景中添加模型
threeScene.add(gltfScene);
@ -120,7 +123,7 @@ export default class GlTFThreeJSDemo extends React.Component {
properties: {},
geometry: {
type: 'Point',
coordinates: [111.4453125, 32.84267363195431]
coordinates: [111.4453125, 32.84267363195431],
},
},
],

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

@ -75,7 +75,6 @@ export default class GlTFThreeJSDemo extends React.Component {
// 根据 GeoJSON 数据放置模型
const gltfScene = gltf.scene.clone();
layer.getSource().data.dataArray.forEach(({ coordinates }) => {
gltfScene.applyMatrix4(
// 生成模型矩阵
layer.getModelMatrix(
@ -107,9 +106,9 @@ export default class GlTFThreeJSDemo extends React.Component {
threeScene.add(gltfScene);
});
let center = scene.getCenter()
console.log(center)
console.log(layer.getObjectLngLat(gltfScene))
let center = scene.getCenter();
console.log(center);
console.log(layer.getObjectLngLat(gltfScene));
// layer.setObjectLngLat(gltfScene, [center.lng + 0.05, center.lat] as ILngLat, 0)
// let t = 0
@ -119,7 +118,6 @@ export default class GlTFThreeJSDemo extends React.Component {
// // layer.setObjectLngLat(model, [center.lng + 0.2, center.lat], 0)
// }, 16)
// 重绘图层
layer.render();
},