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-22 16:58:58 +08:00
parent 9824f4d0a3
commit 4e7c4584a5
6 changed files with 125 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -242,7 +242,10 @@ export default class MapboxService
* @param lnglat
* @returns
*/
public lngLatToCoord(lnglat: [number, number],origin: IMercator = { x: 0, y: 0, z: 0 }) {
public lngLatToCoord(
lnglat: [number, number],
origin: IMercator = { x: 0, y: 0, z: 0 },
) {
// @ts-ignore
const { x, y } = this.lngLatToMercator(lnglat, 0);
return [x - origin.x, y - origin.y] as [number, number];

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

@ -3,11 +3,11 @@ import {
AnimationMixer,
Camera,
Matrix4,
Vector3,
Object3D,
PCFSoftShadowMap,
PerspectiveCamera,
Scene,
Vector3,
WebGLRenderer,
} from 'three';
import { ILngLat, IThreeJSLayer } from './IThreeJSLayer';
@ -85,52 +85,61 @@ export default class ThreeJSLayer
/**
* 将经纬度转为 three 世界坐标
* @param lnglat
* @returns
* @param lnglat
* @returns
*/
public lnglatToCoord(lnglat: ILngLat) {
// @ts-ignore
const [x, y] = this.mapService?.lngLatToCoord(lnglat, this.threeRenderService.center);
const [x, y] = this.mapService?.lngLatToCoord(
lnglat,
// @ts-ignore
this.threeRenderService.center,
);
return [x, y];
}
/**
* 获取
* @param object
* @returns
* @param object
* @returns
*/
public getObjectLngLat(object: Object3D) {
let coord = [object.position.x, object.position.y];
const coord = [object.position.x, object.position.y];
return [0, 0] as ILngLat;
}
/**
* 设置网格适配到地图坐标系
* @param object
* @param object
*/
public adjustMeshToMap(object: Object3D) {
object.up = new Vector3(0, 0, 1)
let defaultLngLat = this.mapService.getCenter()
let modelMatrix = this.getModelMatrix(
object.up = new Vector3(0, 0, 1);
const defaultLngLat = this.mapService.getCenter();
const modelMatrix = this.getModelMatrix(
[defaultLngLat.lng, defaultLngLat.lat], // 经纬度坐标
0, // 高度，单位米/
[Math.PI / 2, -Math.PI, 0], // 沿 XYZ 轴旋转角度
[1, 1, 1], // 沿 XYZ 轴缩放比例
)
);
object.applyMatrix4(modelMatrix);
}
/**
* 设置网格的缩放 （主要是抹平 mapbox 底图时的差异，若是高德底图则可以直接设置网格的 scale 属性/方法）
* @param object
* @param x
* @param y
* @param z
* @param object
* @param x
* @param y
* @param z
*/
public setMeshScale(object: Object3D, x: number = 1, y: number = 1, z: number = 1) {
let scaleMatrix = new Matrix4()
scaleMatrix.scale(new Vector3(x, y, z))
object.applyMatrix4(scaleMatrix)
public setMeshScale(
object: Object3D,
x: number = 1,
y: number = 1,
z: number = 1,
) {
const scaleMatrix = new Matrix4();
scaleMatrix.scale(new Vector3(x, y, z));
object.applyMatrix4(scaleMatrix);
}
public buildModels() {

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

@ -57,10 +57,9 @@ export default class GlTFThreeJSDemo extends React.Component {
const model: Object3D = gltf.scene;
layer.getSource().data.dataArray.forEach(({ coordinates }) => {
layer.adjustMeshToMap(model)
layer.adjustMeshToMap(model);
// model.scale.set(100, 100, 100)
layer.setMeshScale(model, 100, 100, 100)
layer.setMeshScale(model, 100, 100, 100);
const animations = gltf.animations;
if (animations && animations.length) {

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

@ -42,13 +42,17 @@ export default class GlTFThreeJSDemo extends React.Component {
sunlight.matrixWorldNeedsUpdate = true;
threeScene.add(sunlight);
let center = scene.getCenter()
let center = scene.getCenter();
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)
threeScene.add(cube)
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,
);
threeScene.add(cube);
// 使用 Three.js glTFLoader 加载模型
const loader = new GLTFLoader();
@ -65,13 +69,15 @@ export default class GlTFThreeJSDemo extends React.Component {
layer.getSource().data.dataArray.forEach(({ coordinates }) => {
const gltfScene = gltf.scene;
layer.adjustMeshToMap(gltfScene)
layer.adjustMeshToMap(gltfScene);
// gltfScene.scale.set(1000, 1000, 1000)
layer.setMeshScale(gltfScene, 1000, 1000, 1000)
layer.setMeshScale(gltfScene, 1000, 1000, 1000);
layer.setObjectLngLat(gltfScene, [coordinates[0] + 0.02, coordinates[1]], 0)
layer.setObjectLngLat(
gltfScene,
[coordinates[0] + 0.02, coordinates[1]],
0,
);
const animations = gltf.animations;
if (animations && animations.length) {

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

@ -6,17 +6,24 @@ import * as React from 'react';
import * as THREE from 'three';
// tslint:disable-next-line:no-submodule-imports
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { animate, easeInOut } from 'popmotion'
import { animate, easeInOut } from 'popmotion';
import { Object3D, Vector3 } from 'three';
let isTravel = false
let isTravel = false;
function travel(mesh: Object3D, path: Vector3[], duration: number,callback?: () => any) {
function travel(
mesh: Object3D,
path: Vector3[],
duration: number,
callback?: () => any,
) {
if (path.length < 2 || isTravel) return;
isTravel = true;
let startIndex = 0, len = path.length;
let currentP = path[0], nextP = path[1];
let t = duration/len;
let startIndex = 0,
len = path.length;
let currentP = path[0],
nextP = path[1];
let t = duration / len;
move(currentP, nextP);
function move(currentP: Vector3, nextP: Vector3) {
@ -43,14 +50,14 @@ function travel(mesh: Object3D, path: Vector3[], duration: number,callback?: ()
let currentP = path[startIndex],
nextP = path[startIndex + 1];
mesh.lookAt(nextP);
move(currentP, nextP);
} else {
isTravel = false;
callback && callback();
}
}
})
},
});
}
}
@ -110,136 +117,55 @@ export default class GlTFThreeJSDemo extends React.Component {
threeScene.add(sunlight);
let lineData: ILngLat[] = [
[
116.71874999999999,
26.745610382199022
],
[
117.3779296875,
28.8831596093235
],
[
115.75195312499999,
31.466153715024294
],
[
113.466796875,
33.32134852669881
],
[
113.9501953125,
35.85343961959182
],
[
115.400390625,
38.272688535980976
],
[
116.5869140625,
40.3130432088809
],
[
115.6201171875,
42.261049162113856
],
[
112.236328125,
42.94033923363181
],
[
109.3798828125,
41.04621681452063
],
[
103.84277343749999,
39.80853604144591
],
[
98.9208984375,
39.842286020743394
],
[
95.2294921875,
40.713955826286046
],
[
91.7138671875,
39.87601941962116
],
[
90.8349609375,
37.125286284966805
],
[
90.3076171875,
35.88905007936091
],
[
90.703125,
33.284619968887675
],
[
92.94433593749999,
31.98944183792288
],
[
96.2841796875,
32.21280106801518
],
[
98.87695312499999,
32.0639555946604
],
[
102.919921875,
28.459033019728043
],
[
107.9736328125,
28.497660832963472
],
[
108.10546875,
24.206889622398023
],
[
109.072265625,
23.039297747769726
],
[
112.763671875,
24.44714958973082
],
[
116.54296874999999,
25.958044673317843
]
]
[116.71874999999999, 26.745610382199022],
[117.3779296875, 28.8831596093235],
[115.75195312499999, 31.466153715024294],
[113.466796875, 33.32134852669881],
[113.9501953125, 35.85343961959182],
[115.400390625, 38.272688535980976],
[116.5869140625, 40.3130432088809],
[115.6201171875, 42.261049162113856],
[112.236328125, 42.94033923363181],
[109.3798828125, 41.04621681452063],
[103.84277343749999, 39.80853604144591],
[98.9208984375, 39.842286020743394],
[95.2294921875, 40.713955826286046],
[91.7138671875, 39.87601941962116],
[90.8349609375, 37.125286284966805],
[90.3076171875, 35.88905007936091],
[90.703125, 33.284619968887675],
[92.94433593749999, 31.98944183792288],
[96.2841796875, 32.21280106801518],
[98.87695312499999, 32.0639555946604],
[102.919921875, 28.459033019728043],
[107.9736328125, 28.497660832963472],
[108.10546875, 24.206889622398023],
[109.072265625, 23.039297747769726],
[112.763671875, 24.44714958973082],
[116.54296874999999, 25.958044673317843],
];
let lineCoordData = lineData.map((d: ILngLat) => {
return layer.lnglatToCoord(d)
})
return layer.lnglatToCoord(d);
});
// console.log(lineCoordData)
var material = new THREE.LineBasicMaterial({
color: 0x0000ff
color: 0x0000ff,
});
var rawPoints: THREE.Vector3[] = []
lineCoordData.map(d => {
rawPoints.push(new THREE.Vector3(d[0], d[1], 0))
})
var rawPoints: THREE.Vector3[] = [];
lineCoordData.map((d) => {
rawPoints.push(new THREE.Vector3(d[0], d[1], 0));
});
var curve = new THREE.CatmullRomCurve3(rawPoints);
var points = curve.getPoints( 200 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var points = curve.getPoints(200);
var geometry = new THREE.BufferGeometry().setFromPoints(points);
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
var material = new THREE.LineBasicMaterial({ color: 0xff0000 });
var line = new THREE.LineLoop( geometry, material );
threeScene.add( line );
var line = new THREE.LineLoop(geometry, material);
threeScene.add(line);
// console.log(line)
// animate({
@ -263,8 +189,8 @@ export default class GlTFThreeJSDemo extends React.Component {
// 根据 GeoJSON 数据放置模型
const gltfScene = gltf.scene.clone();
layer.getSource().data.dataArray.forEach(({ coordinates }) => {
layer.adjustMeshToMap(gltfScene)
gltfScene.scale.set(500000, 500000, 500000)
layer.adjustMeshToMap(gltfScene);
gltfScene.scale.set(500000, 500000, 500000);
// gltfScene.rotation.y = Math.PI
@ -300,11 +226,11 @@ export default class GlTFThreeJSDemo extends React.Component {
// }, 16)
// travel(gltfScene, points, 5000)
travelLoop()
travelLoop();
function travelLoop() {
travel(gltfScene, points, 5000, () => {
travelLoop()
})
travelLoop();
});
}
// 重绘图层
layer.render();

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

@ -44,19 +44,20 @@ export default class GlTFThreeJSDemo extends React.Component {
// longitude: 120,
// latitude: 30
// }]
data
, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
data,
{
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
},
})
)
.shape('triangle')
.color('red')
.active(true)
.size(20)
.animate(true)
.animate(true);
// scene.addLayer(imageLayer);
const threeJSLayer = new ThreeLayer({
@ -84,10 +85,10 @@ export default class GlTFThreeJSDemo extends React.Component {
// 根据 GeoJSON 数据放置模型
layer.getSource().data.dataArray.forEach(({ coordinates }) => {
const gltfScene = gltf.scene;
layer.adjustMeshToMap(gltfScene)
layer.setMeshScale(gltfScene, 10, 10, 10)
layer.adjustMeshToMap(gltfScene);
layer.setMeshScale(gltfScene, 10, 10, 10);
const animations = gltf.animations;
if (animations && animations.length) {
const mixer = new THREE.AnimationMixer(gltfScene);
@ -108,7 +109,6 @@ export default class GlTFThreeJSDemo extends React.Component {
// 向场景中添加模型
threeScene.add(gltfScene);
// layer.setObjectLngLat(gltfScene, [120, 30], 0)
// @ts-ignore
// console.log(layer.mapService.lngLatToCoord([121.4, 31.258134]))