Skip to content

feat: update resium and cesium #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alebinson wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: update resium and cesium #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/react-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"@turf/intersect": "^6.1.3",
"@turf/point-to-polygon-distance": "^7.2.0",
"@turf/rewind": "^5.1.5",
"cesium": "1.103.0",
"cesium": "1.142.0",
"chonky": "^2.3.2",
"chonky-icon-fontawesome": "^2.3.2",
"copy-webpack-plugin": "^6.3.1",
Expand All @@ -59,7 +59,7 @@
"react-move": "^6.5.0",
"react-rxjs": "^2.0.8",
"react-select": "5.7.3",
"resium": "1.16.1",
"resium": "1.23.0",
"rimraf": "3.0.2",
"rxjs": "^7.8.1",
"textarea-caret": "^3.1.0",
Expand Down
4 changes: 2 additions & 2 deletions packages/react-components/src/components/cesium-map/helpers/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ export const computeLimitedViewRectangle = (mapViewer: CesiumViewer, maxDistance
}

// Calculate the Field of View (FOV) of the camera
const fov = camera.frustum instanceof PerspectiveFrustum ? camera.frustum.fov : Math.PI / 3; // Default FOV if not PerspectiveFrustum
const fov = camera.frustum instanceof PerspectiveFrustum ? camera.frustum.fov ?? Math.PI / 3 : Math.PI / 3; // Default FOV if not PerspectiveFrustum

// Apply zoom scaling based on camera height and FOV
let zoomFactor = 1.0;
Expand Down Expand Up @@ -418,7 +418,7 @@ export const defaultVisualizationHandler = (
pixelWidth: number,
pixelHeight: number
): { widthMeters: number; heightMeters: number } | null => {
const screenPosition = SceneTransforms.wgs84ToWindowCoordinates(scene, position);
const screenPosition = SceneTransforms.worldToWindowCoordinates(scene, position);

if (!screenPosition) return null;

Expand Down
25 changes: 9 additions & 16 deletions packages/react-components/src/components/cesium-map/layers-manager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,16 +117,12 @@ class LayerManager {

// A general place to extend layer's data. Should be done when all providers(different types) are initialized
public addMetaToLayer(meta: any, layerPredicate: (layer: ImageryLayer, idx: number) => boolean): void {
const layersReadyPromises = this.layers.map((item) => item.imageryProvider.readyPromise);

Promise.all(layersReadyPromises).then(() => {
const layer = this.layers.find(layerPredicate);
if (layer) {
layer.meta = { ...(layer.meta ?? {}), ...meta };
this.setLegends();
this.layerUpdated.raiseEvent(meta);
}
});
const layer = this.layers.find(layerPredicate);
if (layer) {
layer.meta = { ...(layer.meta ?? {}), ...meta };
this.setLegends();
this.layerUpdated.raiseEvent(meta);
}
}

public addMetaToDataLayer(meta: any): void {
Expand Down Expand Up @@ -500,7 +496,7 @@ class LayerManager {
continue;
}

if (relevantToExtent !== layer.show && layer.imageryProvider.ready) {
if (relevantToExtent !== layer.show) {
layer.show = relevantToExtent;
}
}
Expand All @@ -511,9 +507,7 @@ class LayerManager {
if (layer.meta?.id === TRANSPARENT_LAYER_ID) {
continue;
}
if (layer.imageryProvider.ready) {
layer.show = true;
}
layer.show = true;
}
}

Expand Down Expand Up @@ -614,8 +608,7 @@ class LayerManager {
const layerAboveIsOpaque = layerAbove.meta?.[HAS_TRANSPARENCY_META_PROP] === false;
const layerAboveIntersectsExtent =
!isEmpty(layerAbove.rectangle) && Rectangle.intersection(extent, layerAbove.rectangle) instanceof Rectangle;
const layerAboveCoversCurrentExtent =
!isEmpty(layerAbove.rectangle) && cesiumRectangleContained(extent, layerAbove.rectangle as Rectangle);
const layerAboveCoversCurrentExtent = !isEmpty(layerAbove.rectangle) && cesiumRectangleContained(extent, layerAbove.rectangle as Rectangle);
if (layerAboveIntersectsExtent && layerAboveCoversCurrentExtent && layerAboveIsOpaque && !layerAboveHasTransparency) {
isOccludedByOpaqueLayerAbove = true;
break;
Expand Down
163 changes: 82 additions & 81 deletions packages/react-components/src/components/cesium-map/layers/3d.tileset.with.update.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,89 +1,90 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/no-unnecessary-condition */
/*
https://sandcastle.cesium.com/index.html?#c=fVZtTxs5EP4re3xho0YOkOv1jgC6ElIuiAQKKaWQqnJ2nayL187Z3qCk4r/f+GXf8nKWot3YzzOeGT8z6wWWQRdLTRTFvB2cBl14y1JUznXGfMxbreBSYq798tV9gKOIKBVoESxFJgMqeICVIlqNuTfRFxzFZIozpj9a8Ei8EA5b7JPlVTK5jOgNvep/WfUPh7Sv+vzufdTt/9F/mT8+dK/+QgD6N758MSA6GJ3/HB712gN60H66fHq5Ht0l39K+vvnaWw27h/RmFP+8ueitBqvB+8FqRq+7V/MnMDa8+Kz6KUtieB+MPv8+/Am/i8HBoH2AztvdD0NBlu2n28do+uHHp8fz3rdXKiN91J6qLyS64/eHR5+YHv65b3OwgFRFNrQRkRJTfivFgsZEllmLJMGafBWSxR4TNjqOSRijcyVovEnm5DU30NuBsmacoQUlr+u0BzsX7jv3uoJr4BK53wx+jXkAY4IVucZLIm9p9ALs42CKmSJNt6rXXDreHueYv+XRqIhwAj44Z5D9az20b2jGxITA4c91MiJKf5yBFaW9OaBpmZEiIE0ZAeHAtCPPJU2ppguiEI7j0LlYCdY92hcjxwt9iGZkkh0HpfzuiAJtRgRNpUg/GnX247D9oX3UcJQ3ePrEujhWQqQjEXqPPAoJnRD5ShUJpxmPtJF6CKEI2Qgqe0eCK8EIYmLmVzv5LnaLgpvNYxCJ8T6wOxVWTDImIuMx5bMHwbLUZNggUH3W26XTIPSxQpnBecfWHAJHNOH6vMZp1HzdvstWYh5E6aKHrbE6JSAVMWGw7FfQDztRASSEzhJjoO4HSimnaZb+Y5creJCFtpK3htAPqaOunapguJApZoWInAKLokMzAlRNo/tMTnFEhhYdOsNNp66i44WNRsWwmE6dOksASqGn0Tlbni/vI8ywDN3uTR/Z/xuMYF7UO62YSTxPaGSFWvC8e1XuHNZBiCX7NSG2y/oWkevCJWG9rk9PT3f2oZo+zFaSKIjSHKNxsFMuugVUHOJBZc37hwAj2IKEDltUAuwOzv/awJfxKJzOGfG+DYTSFwR6GQNtbw2pGTxb9743EBQpLwrUb6xqUW1E5kHPB987dZRJ4W9rteVD2bDoUqIzyTcyVSmcNaQzVoG+NcpCcy95KrfFVXOiCGeboLQo5VQ/jEJSQlHbl2oKV9lESxxpT2r6MtitbDPWy7NuMmKCkzDfrrmBrvXLtx0t0zR8KUSZAXNUZiLvQ3cEx8tafkqyY+4Uo8kGowqsWNf9VwCZ57XAsfka9RawxbXHlKdSa+NVEZkFW3Y1n6uj4p210tmE5D6Fjd3a2tSPbTUJZbG0ly6XI/+/0lEY4TOdmDL3a8jNeMhUyCA0OGorHR4nntIJ3r2jOxJtTim390y/V3yz7t1jHkdYafh6QE5HYjZj5DzTGjK5n18SehxPoOzhCmMuC82gyHWUELjCxDUBrM+ZsaMFbr/a7NTELiu72uj6KdRzkksq16E9tb3m3onSS0bOHOVvms6F1OYyEyLU0gQ6IthQrUkGQcIhKmVoJ62cdBLTRUDj0/He2v1vvBdEDG7lsDLNGLunKzLeOztpAb5GY6Bu+ArfLIhkeGkgyeHZtZtECJ204O8mSwvBJlhWLP4H
*/
export {};
// /* eslint-disable @typescript-eslint/ban-ts-comment */
// /* eslint-disable @typescript-eslint/no-unsafe-assignment */
// /* eslint-disable @typescript-eslint/no-unsafe-member-access */
// /* eslint-disable @typescript-eslint/no-unnecessary-condition */
// /*
// https://sandcastle.cesium.com/index.html?#c=fVZtTxs5EP4re3xho0YOkOv1jgC6ElIuiAQKKaWQqnJ2nayL187Z3qCk4r/f+GXf8nKWot3YzzOeGT8z6wWWQRdLTRTFvB2cBl14y1JUznXGfMxbreBSYq798tV9gKOIKBVoESxFJgMqeICVIlqNuTfRFxzFZIozpj9a8Ei8EA5b7JPlVTK5jOgNvep/WfUPh7Sv+vzufdTt/9F/mT8+dK/+QgD6N758MSA6GJ3/HB712gN60H66fHq5Ht0l39K+vvnaWw27h/RmFP+8ueitBqvB+8FqRq+7V/MnMDa8+Kz6KUtieB+MPv8+/Am/i8HBoH2AztvdD0NBlu2n28do+uHHp8fz3rdXKiN91J6qLyS64/eHR5+YHv65b3OwgFRFNrQRkRJTfivFgsZEllmLJMGafBWSxR4TNjqOSRijcyVovEnm5DU30NuBsmacoQUlr+u0BzsX7jv3uoJr4BK53wx+jXkAY4IVucZLIm9p9ALs42CKmSJNt6rXXDreHueYv+XRqIhwAj44Z5D9az20b2jGxITA4c91MiJKf5yBFaW9OaBpmZEiIE0ZAeHAtCPPJU2ppguiEI7j0LlYCdY92hcjxwt9iGZkkh0HpfzuiAJtRgRNpUg/GnX247D9oX3UcJQ3ePrEujhWQqQjEXqPPAoJnRD5ShUJpxmPtJF6CKEI2Qgqe0eCK8EIYmLmVzv5LnaLgpvNYxCJ8T6wOxVWTDImIuMx5bMHwbLUZNggUH3W26XTIPSxQpnBecfWHAJHNOH6vMZp1HzdvstWYh5E6aKHrbE6JSAVMWGw7FfQDztRASSEzhJjoO4HSimnaZb+Y5creJCFtpK3htAPqaOunapguJApZoWInAKLokMzAlRNo/tMTnFEhhYdOsNNp66i44WNRsWwmE6dOksASqGn0Tlbni/vI8ywDN3uTR/Z/xuMYF7UO62YSTxPaGSFWvC8e1XuHNZBiCX7NSG2y/oWkevCJWG9rk9PT3f2oZo+zFaSKIjSHKNxsFMuugVUHOJBZc37hwAj2IKEDltUAuwOzv/awJfxKJzOGfG+DYTSFwR6GQNtbw2pGTxb9743EBQpLwrUb6xqUW1E5kHPB987dZRJ4W9rteVD2bDoUqIzyTcyVSmcNaQzVoG+NcpCcy95KrfFVXOiCGeboLQo5VQ/jEJSQlHbl2oKV9lESxxpT2r6MtitbDPWy7NuMmKCkzDfrrmBrvXLtx0t0zR8KUSZAXNUZiLvQ3cEx8tafkqyY+4Uo8kGowqsWNf9VwCZ57XAsfka9RawxbXHlKdSa+NVEZkFW3Y1n6uj4p210tmE5D6Fjd3a2tSPbTUJZbG0ly6XI/+/0lEY4TOdmDL3a8jNeMhUyCA0OGorHR4nntIJ3r2jOxJtTim390y/V3yz7t1jHkdYafh6QE5HYjZj5DzTGjK5n18SehxPoOzhCmMuC82gyHWUELjCxDUBrM+ZsaMFbr/a7NTELiu72uj6KdRzkksq16E9tb3m3onSS0bOHOVvms6F1OYyEyLU0gQ6IthQrUkGQcIhKmVoJ62cdBLTRUDj0/He2v1vvBdEDG7lsDLNGLunKzLeOztpAb5GY6Bu+ArfLIhkeGkgyeHZtZtECJ204O8mSwvBJlhWLP4H
// */

import React, { useEffect, useState } from 'react';
import { Cesium3DTileset, Cesium3DTile, Cartographic, Cartesian3, defined, sampleTerrainMostDetailed, Cesium3DTileContent } from 'cesium';
import { CesiumViewer, useCesiumMap } from '../map';
// import React, { useEffect, useState } from 'react';
// import { Cesium3DTileset, Cesium3DTile, Cartographic, Cartesian3, defined, sampleTerrainMostDetailed, Cesium3DTileContent } from 'cesium';
// import { CesiumViewer, useCesiumMap } from '../map';

export interface Cesium3DTilesetWithUpdateProps {
url: string;
withUpdate?: boolean;
}
// export interface Cesium3DTilesetWithUpdateProps {
// url: string;
// withUpdate?: boolean;
// }

export const Cesium3DTilesetWithUpdate: React.FC<Cesium3DTilesetWithUpdateProps> = ({ url, withUpdate }) => {
const mapViewer: CesiumViewer = useCesiumMap();
const scene = mapViewer.scene;
const [cesium3DTileset] = useState<Cesium3DTileset>(
new Cesium3DTileset({
url: url,
})
);
const [tileset] = useState<Cesium3DTileset>(scene.primitives.add(cesium3DTileset));
// export const Cesium3DTilesetWithUpdate: React.FC<Cesium3DTilesetWithUpdateProps> = ({ url, withUpdate }) => {
// const mapViewer: CesiumViewer = useCesiumMap();
// const scene = mapViewer.scene;
// const [cesium3DTileset] = useState<Cesium3DTileset>(
// new Cesium3DTileset({
// url: url,
// })
// );
// const [tileset] = useState<Cesium3DTileset>(scene.primitives.add(cesium3DTileset));

useEffect(() => {
scene.globe.depthTestAgainstTerrain = true;
void mapViewer.zoomTo(tileset);
if (withUpdate === true) {
updateTileset(tileset);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// useEffect(() => {
// scene.globe.depthTestAgainstTerrain = true;
// void mapViewer.zoomTo(tileset);
// if (withUpdate === true) {
// updateTileset(tileset);
// }
// // eslint-disable-next-line react-hooks/exhaustive-deps
// }, []);

const updateContent = (model: Cesium3DTileContent, boundingVolume: any): void => {
const height = boundingVolume.minimumHeight ? boundingVolume.minimumHeight : boundingVolume.center.z - boundingVolume.radius;
// @ts-ignore
const center = model._rtcCenter ?? boundingVolume.center;
const normal = scene.globe.ellipsoid.geodeticSurfaceNormal(center, new Cartesian3());
const offset = Cartesian3.multiplyByScalar(normal, height, new Cartesian3());
const carto = Cartographic.fromCartesian(center);
void new Promise((resolve, reject) => {
// @ts-ignore
if (scene.terrainProvider._ready !== true) {
const result = { ...carto };
result.height = 0;
resolve(result);
} else {
void sampleTerrainMostDetailed(scene.terrainProvider, [carto]).then((results) => {
const result = results[0];
if (!defined(result)) {
resolve(carto);
}
resolve(result);
});
}
}).then((result) => {
const resultCartesian = Cartographic.toCartesian(result as Cartographic);
const position = Cartesian3.subtract(resultCartesian, offset, new Cartesian3());
// @ts-ignore
model._rtcCenter = Cartesian3.clone(position, model._rtcCenter);
});
};
// const updateContent = (model: Cesium3DTileContent, boundingVolume: any): void => {
// const height = boundingVolume.minimumHeight ? boundingVolume.minimumHeight : boundingVolume.center.z - boundingVolume.radius;
// // @ts-ignore
// const center = model._rtcCenter ?? boundingVolume.center;
// const normal = scene.globe.ellipsoid.geodeticSurfaceNormal(center, new Cartesian3());
// const offset = Cartesian3.multiplyByScalar(normal, height, new Cartesian3());
// const carto = Cartographic.fromCartesian(center);
// void new Promise((resolve, reject) => {
// // @ts-ignore
// if (scene.terrainProvider._ready !== true) {
// const result = { ...carto };
// result.height = 0;
// resolve(result);
// } else {
// void sampleTerrainMostDetailed(scene.terrainProvider, [carto]).then((results) => {
// const result = results[0];
// if (!defined(result)) {
// resolve(carto);
// }
// resolve(result);
// });
// }
// }).then((result) => {
// const resultCartesian = Cartographic.toCartesian(result as Cartographic);
// const position = Cartesian3.subtract(resultCartesian, offset, new Cartesian3());
// // @ts-ignore
// model._rtcCenter = Cartesian3.clone(position, model._rtcCenter);
// });
// };

const updateTile = (tile: Cesium3DTile): void => {
if (tile.content !== undefined) {
// @ts-ignore
updateContent(tile.content, tile.boundingVolume.boundingVolume);
} else {
const listener = tileset.tileLoad.addEventListener((t) => {
if (t === tile) {
updateContent(t.content, t.boundingVolume.boundingVolume);
listener();
}
});
}
tile.children.forEach((child) => updateTile(child));
};
// const updateTile = (tile: Cesium3DTile): void => {
// if (tile.content !== undefined) {
// // @ts-ignore
// updateContent(tile.content, tile.boundingVolume.boundingVolume);
// } else {
// const listener = tileset.tileLoad.addEventListener((t) => {
// if (t === tile) {
// updateContent(t.content, t.boundingVolume.boundingVolume);
// listener();
// }
// });
// }
// tile.children.forEach((child) => updateTile(child));
// };

const updateTileset = (tileset: Cesium3DTileset): void => {
void tileset.readyPromise.then(() => {
updateTile(tileset.root);
});
};
// const updateTileset = (tileset: Cesium3DTileset): void => {
// void tileset.readyPromise.then(() => {
// updateTile(tileset.root);
// });
// };

return <></>;
};
// return <></>;
// };
8 changes: 7 additions & 1 deletion packages/react-components/src/components/cesium-map/layers/imagery.layer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,13 @@ export const CesiumImageryLayer: React.FC<RCesiumImageryLayerProps> = (props) =>
const mapViewer: CesiumViewer = useCesiumMap();

useLayoutEffect(() => {
mapViewer.layersManager?.addMetaToLayer(meta, meta.searchLayerPredicate);
mapViewer.layersManager?.addMetaToLayer(
meta,
meta?.searchLayerPredicate ??
function (layer, idx) {
return true;
}
);
}, [meta, mapViewer]);

return <ResiumImageryLayer {...restProps} />;
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/src/components/cesium-map/layers/wfs.layer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ export const CesiumWFSLayer: React.FC<ICesiumWFSLayer> = (props) => {
const worldPos = getEntityCenter(entity);
if (!worldPos) return { entity, distance: Number.MAX_VALUE };

const screenPos = SceneTransforms.wgs84ToWindowCoordinates(mapViewer.scene, worldPos);
const screenPos = SceneTransforms.worldToWindowCoordinates(mapViewer.scene, worldPos);
if (!screenPos) return { entity, distance: Number.MAX_VALUE };

const dx = screenPosition.x - screenPos.x;
Expand Down
Loading