diff --git a/packages/maps/src/amap/map.ts b/packages/maps/src/amap/map.ts index 68b59e357f..dee66c084f 100644 --- a/packages/maps/src/amap/map.ts +++ b/packages/maps/src/amap/map.ts @@ -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( diff --git a/packages/maps/src/amap2/map.ts b/packages/maps/src/amap2/map.ts index f9155490e3..664694fe5d 100644 --- a/packages/maps/src/amap2/map.ts +++ b/packages/maps/src/amap2/map.ts @@ -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(); diff --git a/packages/maps/src/mapbox/map.ts b/packages/maps/src/mapbox/map.ts index 7acae87b6f..46b1296c97 100644 --- a/packages/maps/src/mapbox/map.ts +++ b/packages/maps/src/mapbox/map.ts @@ -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]; } diff --git a/packages/three/src/core/IThreeJSLayer.ts b/packages/three/src/core/IThreeJSLayer.ts index a0bbca5b48..702cdb0710 100644 --- a/packages/three/src/core/IThreeJSLayer.ts +++ b/packages/three/src/core/IThreeJSLayer.ts @@ -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; -} \ No newline at end of file +} diff --git a/packages/three/src/core/baseLayer.ts b/packages/three/src/core/baseLayer.ts index 757df65af3..40b6feb9bc 100644 --- a/packages/three/src/core/baseLayer.ts +++ b/packages/three/src/core/baseLayer.ts @@ -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() { diff --git a/packages/three/src/index.ts b/packages/three/src/index.ts index 8ac01a9c8d..6eb46c17fc 100644 --- a/packages/three/src/index.ts +++ b/packages/three/src/index.ts @@ -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 }; diff --git a/stories/3D_Model/Components/amap2_three.tsx b/stories/3D_Model/Components/amap2_three.tsx index efe34cdc8f..bbc6a85088 100644 --- a/stories/3D_Model/Components/amap2_three.tsx +++ b/stories/3D_Model/Components/amap2_three.tsx @@ -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(); diff --git a/stories/3D_Model/Components/amap_three.tsx b/stories/3D_Model/Components/amap_three.tsx index 9940b04bca..b2ea90f09f 100644 --- a/stories/3D_Model/Components/amap_three.tsx +++ b/stories/3D_Model/Components/amap_three.tsx @@ -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], }, }, ], diff --git a/stories/3D_Model/Components/mapbox_three.tsx b/stories/3D_Model/Components/mapbox_three.tsx index 9f217da74e..b4b5306562 100644 --- a/stories/3D_Model/Components/mapbox_three.tsx +++ b/stories/3D_Model/Components/mapbox_three.tsx @@ -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(); },