Skip to content

Commit

Permalink
【fix】修复模型在非3857地图上显示位置不对的问题
Browse files Browse the repository at this point in the history
  • Loading branch information
@songyumeng
songyumeng committed Oct 16, 2024
1 parent dbf3472 commit 22eab81
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 21 deletions.
35 changes: 30 additions & 5 deletions src/mapboxgl/web-map/layer/track/TrackLayerViewModel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -675,15 +675,16 @@ export default class TrackLayerViewModel extends mapboxgl.Evented {
}
}
modelRotate[bottomAxisIndex] += this.rotateFactor;
const modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude);
// @ts-ignore
const modelAsMercatorCoordinate = this.map.getCRS().fromLngLat(modelOrigin); // mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude);
const modelTransform = {
translateX: modelAsMercatorCoordinate.x,
translateY: modelAsMercatorCoordinate.y,
translateZ: modelAsMercatorCoordinate.z,
translateZ: modelAltitude,
rotateX: modelRotate[0],
rotateY: modelRotate[1],
rotateZ: modelRotate[2],
scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
scale: 1 / (2 * Math.PI * 6378137)
};
return modelTransform;
}
Expand Down Expand Up @@ -730,15 +731,39 @@ export default class TrackLayerViewModel extends mapboxgl.Evented {
const size = bbox.getSize(new THREE.Vector3());
const maxSize = Math.max(size.x, size.y, size.z);
// @ts-ignore
const extent = this.map.getCRS().extent;
const maxExtent = Math.max(extent[2] - extent[0], extent[3] - extent[2]) / 512;
const { extent, unit } = this.map.getCRS();
const perMeterRatio = this._getMeterPerMapUnit(unit);
const maxExtent = Math.max((extent[2] - extent[0]) * perMeterRatio, (extent[3] - extent[2]) * perMeterRatio) / 512;
const unitFactor = this._getUnitFactor();
const resolution = ((maxSize / unitFactor) * scaleFactor * 8) / this.map.getCanvas().width;
const zoom = Math.log2(maxExtent / resolution);
this.map.setZoom(zoom);
this.map.setCenter(this.currentPosition);
}

private _getMeterPerMapUnit(unit: string) {
switch (unit.toLowerCase()) {
case 'radians':
return 6370997 / (2 * Math.PI);
case 'degrees':
case 'deg':
case 'degree':
case 'dd':
return (2 * Math.PI * 6370997) / 360;
case 'ft':
case 'foot':
return 0.3048;
case 'us-ft':
return 1200 / 3937;
case 'inch':
return 1 / 2.5399999918e-2;
case 'kilometer':
return 1.0e-3;
default:
return 1;
}
}

private _getScaleFactor(scene: any): number {
const meterFactor = this._getMeterFactor();
if (this.options.fitBounds) {
Expand Down
112 changes: 96 additions & 16 deletions src/mapboxgl/web-map/layer/track/__tests__/TrackLayerViewModel.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,13 @@ describe('TrackLayerViewModel.ts', () => {
unit: 'millimeter',
url: './static/templates/car/car.obj'
};
const mockCRS = {
fromLngLat: () => {
return { x: 0.2, y: 0.1, z: 0 };
},
extent: [512, 1024, 1536, 2048],
unit: 'meter'
};

it('set url to add layer and IMAGE type from mapsource', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
Expand Down Expand Up @@ -67,7 +74,10 @@ describe('TrackLayerViewModel.ts', () => {
setData: () => jest.fn()
};
},
easeTo: () => jest.fn()
easeTo: () => jest.fn(),
getCRS: () => {
return mockCRS;
}
};
const spy = jest.spyOn(viewModel.map, 'getSource');
viewModel.setUrl('http://test/error');
Expand Down Expand Up @@ -97,7 +107,10 @@ describe('TrackLayerViewModel.ts', () => {
addImage: () => jest.fn(),
addLayer: () => jest.fn(),
getLayer: () => jest.fn(),
addSource: () => jest.fn()
addSource: () => jest.fn(),
getCRS: () => {
return mockCRS;
}
};
const spy = jest.spyOn(viewModel.map, 'addLayer');
viewModel.setUrl('http://test');
Expand Down Expand Up @@ -130,17 +143,15 @@ describe('TrackLayerViewModel.ts', () => {
},
getLayer: () => undefined,
getCRS: () => {
return {
extent: [512, 1024, 1536, 2048]
};
return mockCRS;
},
getZoom: () => 1,
setZoom: () => jest.fn(),
setCenter: () => jest.fn(),
getCanvas: () => {
return {
width: 2
}
};
}
};
const spy = jest.spyOn(viewModel.map, 'addLayer');
Expand Down Expand Up @@ -173,21 +184,19 @@ describe('TrackLayerViewModel.ts', () => {
return {
setData: () => jest.fn()
};
},
}
};
layer.onAdd(map);
},
getLayer: () => undefined,
getCRS: () => {
return {
extent: [512, 1024, 1536, 2048]
};
return mockCRS;
},
getZoom: () => 1,
getCanvas: () => {
return {
width: 2
}
};
}
};
const spy = jest.spyOn(viewModel.map, 'addLayer');
Expand Down Expand Up @@ -256,7 +265,10 @@ describe('TrackLayerViewModel.ts', () => {
addLayer: () => jest.fn(),
getSource: () => undefined,
addSource: () => jest.fn(),
getLayer: () => undefined
getLayer: () => undefined,
getCRS: () => {
return mockCRS;
}
};
const spy = jest.spyOn(viewModel.map, 'addLayer');
const timestampInfo = {
Expand Down Expand Up @@ -284,7 +296,10 @@ describe('TrackLayerViewModel.ts', () => {
addLayer: () => jest.fn(),
getSource: () => undefined,
addSource: () => jest.fn(),
getLayer: () => undefined
getLayer: () => undefined,
getCRS: () => {
return mockCRS;
}
};
const spy = jest.spyOn(viewModel.map, 'addLayer');
const timestampInfo = {
Expand Down Expand Up @@ -312,7 +327,10 @@ describe('TrackLayerViewModel.ts', () => {
addLayer: () => jest.fn(),
getSource: () => undefined,
addSource: () => jest.fn(),
getLayer: () => undefined
getLayer: () => undefined,
getCRS: () => {
return mockCRS;
}
};
const spy = jest.spyOn(viewModel.map, 'addLayer');
const timestampInfo = {
Expand Down Expand Up @@ -340,7 +358,10 @@ describe('TrackLayerViewModel.ts', () => {
addLayer: () => jest.fn(),
getSource: () => undefined,
addSource: () => jest.fn(),
getLayer: () => undefined
getLayer: () => undefined,
getCRS: () => {
return mockCRS;
}
};
const spy = jest.spyOn(viewModel.map, 'addLayer');
const timestampInfo = {
Expand Down Expand Up @@ -368,7 +389,10 @@ describe('TrackLayerViewModel.ts', () => {
addLayer: () => jest.fn(),
getSource: () => undefined,
addSource: () => jest.fn(),
getLayer: () => undefined
getLayer: () => undefined,
getCRS: () => {
return mockCRS;
}
};
const spy = jest.spyOn(viewModel.map, 'addLayer');
const timestampInfo = {
Expand All @@ -386,4 +410,60 @@ describe('TrackLayerViewModel.ts', () => {
viewModel.reset();
expect(viewModel.lineData).toEqual([]);
});
it('add model 4326Map', () => {
const nextOption = {
...option,
loaderType: 'OBJ2',
fitBounds: false,
direction: {
front: '-z',
bottom: 'z'
}
};
const viewModel = new TrackLayerViewModel(nextOption);
const crs = { fromLngLat: jest.fn(), extent: [-180, -90, 180, 90], unit: 'degree' };
viewModel.map = {
getBearing: () => jest.fn(),
getSource: () => undefined,
addSource: () => jest.fn(),
setZoom: () => jest.fn(),
getZoom: () => 1,
getCRS: () => {
return crs;
},
addLayer: layer => {
const map = {
getCanvas: () => jest.fn(),
triggerRepaint: () => jest.fn(),
getSource: () => {
return {
setData: () => jest.fn()
};
}
};
layer.onAdd(map);
layer.render();
},
getLayer: () => undefined,
setCenter: () => jest.fn(),
getCanvas: () => {
return {
width: 2
};
}
};
const spy = jest.spyOn(crs, 'fromLngLat').mockImplementation(() => {
return { x: 0.2, y: 0.1, z: 0 };
});
const setZoomSpy = jest.spyOn(viewModel.map, 'setZoom');
const timestampInfo = {
currentTimestamp: 1640051713987,
nextTimestamp: 1640051713990,
prevTimestamp: 1640051713987,
step: 3000
};
viewModel.setPosition(timestampInfo);
expect(spy).toHaveBeenCalledWith([0, 0]);
expect(setZoomSpy).toHaveBeenCalledWith(22.63540564083981);
});
});

0 comments on commit 22eab81

Please sign in to comment.