Skip to content

Commit

Permalink
Merge pull request #126 from MapColonies/update_tileset
Browse files Browse the repository at this point in the history
feat: update tileset
  • Loading branch information
EllaMartirosyan authored May 2, 2022
2 parents 3c0fc22 + f516da2 commit 554e87c
Show file tree
Hide file tree
Showing 8 changed files with 242 additions and 115 deletions.
2 changes: 1 addition & 1 deletion packages/react-components/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,5 @@ yarn-error.log*

# storybook
/storybook-static/[cC]esium
/storybook-static/mock/tileset_2
/storybook-static/mock/tileset*
/storybook-static/mock/terrain*
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React from 'react';
import { ArcGISTiledElevationTerrainProvider } from 'cesium';
import { Story, Meta } from '@storybook/react/types-6-0';
import { action } from '@storybook/addon-actions';
import { CesiumMap } from '../map';
import { LayerType } from '../layers-manager';
import { Cesium3DTileset } from './3d.tileset';

export default {
Expand All @@ -18,12 +20,43 @@ const mapDivStyle = {
position: 'absolute' as const,
};

const BASE_MAPS = {
maps: [
{
id: '1st',
title: '1st Map Title',
isCurrent: true,
thumbnail:
'https://nsw.digitaltwin.terria.io/build/efa2f6c408eb790753a9b5fb2f3dc678.png',
baseRasteLayers: [
{
id: 'GOOGLE_TERRAIN',
type: 'XYZ_LAYER' as LayerType,
opacity: 1,
zIndex: 0,
options: {
url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
layers: '',
credit: 'GOOGLE',
},
},
],
baseVectorLayers: [],
},
],
};

const ArcGisProvider = new ArcGISTiledElevationTerrainProvider({
url:
'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
});

export const Cesium3DTilesetLayer: Story = (args: unknown) => (
<div style={mapDivStyle}>
<CesiumMap {...args}>
<Cesium3DTileset
isZoomTo={true}
url="/mock/tileset/tileset.json"
url="/mock/tileset_1/tileset.json"
onAllTilesLoad={action('onAllTilesLoad')}
onInitialTilesLoad={action('onInitialTilesLoad')}
onTileFailed={action('onTileFailed')}
Expand All @@ -39,6 +72,9 @@ export const Cesium3DTilesetLayer: Story = (args: unknown) => (
);

Cesium3DTilesetLayer.argTypes = {
baseMaps: {
defaultValue: BASE_MAPS,
},
zoom: {
defaultValue: 3,
control: {
Expand All @@ -49,13 +85,17 @@ Cesium3DTilesetLayer.argTypes = {
},
};

export const Cesium3DTilesetOnHeightLayer: Story = (args: unknown) => (
Cesium3DTilesetLayer.storyName = '3D Layer';

export const Cesium3DTilesetWithHeightCorrectionLayer: Story = (
args: unknown
) => (
<div style={mapDivStyle}>
<CesiumMap {...args}>
<Cesium3DTileset
isZoomTo={false}
heightFromGround={-170}
url="/mock/tileset/tileset.json"
heightFromGround={-10}
url="/mock/tileset_1/tileset.json"
onAllTilesLoad={action('onAllTilesLoad')}
onInitialTilesLoad={action('onInitialTilesLoad')}
onTileFailed={action('onTileFailed')}
Expand All @@ -70,9 +110,12 @@ export const Cesium3DTilesetOnHeightLayer: Story = (args: unknown) => (
</div>
);

Cesium3DTilesetOnHeightLayer.argTypes = {
Cesium3DTilesetWithHeightCorrectionLayer.argTypes = {
baseMaps: {
defaultValue: BASE_MAPS,
},
zoom: {
defaultValue: 18,
defaultValue: 17,
control: {
type: 'range',
min: 0,
Expand All @@ -84,6 +127,9 @@ Cesium3DTilesetOnHeightLayer.argTypes = {
},
};

Cesium3DTilesetWithHeightCorrectionLayer.storyName =
'3D with Height Correction Layer';

export const CesiumSolar3DTilesetLayer: Story = (args: unknown) => (
<div style={mapDivStyle}>
<CesiumMap {...args}>
Expand All @@ -96,6 +142,12 @@ export const CesiumSolar3DTilesetLayer: Story = (args: unknown) => (
);

CesiumSolar3DTilesetLayer.argTypes = {
baseMaps: {
defaultValue: BASE_MAPS,
},
terrainProvider: {
defaultValue: ArcGisProvider,
},
center: {
defaultValue: [34.811, 31.908],
},
Expand All @@ -108,3 +160,5 @@ CesiumSolar3DTilesetLayer.argTypes = {
},
},
};

CesiumSolar3DTilesetLayer.storyName = 'Solar 3D Layer with Terrain Provider';
22 changes: 13 additions & 9 deletions packages/react-components/src/lib/cesium-map/layers/3d.tileset.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { Cartesian3, Cartographic, Matrix4 } from 'cesium';
import React from 'react';

import { Cartesian3, Cartographic, Matrix4 } from 'cesium';
import { Cesium3DTileset as Resium3DTileset } from 'resium';
import { Cesium3DTilesetProps } from 'resium/dist/types/src/Cesium3DTileset/Cesium3DTileset';
import { CesiumViewer, useCesiumMap } from '../map';

const GROUND_LEVEL = 0.0;

export interface RCesium3DTilesetProps extends Cesium3DTilesetProps {
isZoomTo?: boolean;
heightFromGround?: number;
Expand All @@ -17,22 +18,25 @@ export const Cesium3DTileset: React.FC<RCesium3DTilesetProps> = (props) => {
{...props}
onReady={(tileset): void => {
props.onReady?.(tileset);
if (props.isZoomTo) {
if (props.isZoomTo === true) {
void mapViewer.zoomTo(tileset);
}
if (props.heightFromGround) {
const cartographic = Cartographic.fromCartesian(
tileset.boundingSphere.center
);
const scene = mapViewer.scene;
scene.globe.depthTestAgainstTerrain = true;
const cartographic = Cartographic.fromCartesian(
tileset.boundingSphere.center
);
const heightFromGround = props.heightFromGround ?? GROUND_LEVEL;
if (heightFromGround) {
const surface = Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
0.0
cartographic.height
);
const offset = Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
props.heightFromGround
cartographic.height + heightFromGround
);
const translation = Cartesian3.subtract(
offset,
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
/* 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';

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)
);

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 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);
});
};

return <></>;
};
Loading

0 comments on commit 554e87c

Please sign in to comment.