rudifa / cesium-lit-demo Goto Github PK
View Code? Open in Web Editor NEWObjective: integration of the Cesium.Viewer into a Lit component
Objective: integration of the Cesium.Viewer into a Lit component
Progress on branch try-embed-cesium-viewer-2
as of commit ae8b5ce
<cesium-viewer2>
./node_modules/cesium/Build/CesiumUnminified/Widgets/widgets.css
, so I inserted the css
code from widgets.css
into the new file src/widgets.js
thus:import {css} from 'lit';
export const widgetStyles = css`
/* Source/Widgets/shared.css */
...
/* Source/Widgets/widgets.css */
`;
Now the demo looks better, however a few issues remain open
<div id="cesiumContainer2">div 2: #cesiumContainer2</div>
is given a red border and a pink background, for debuggingAt this stage the project includes a dependency on "cesium": "^1.98.1"
, but it does not use it.
Instead, it sources cesium code as in the Quick Start demo
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.98/Build/Cesium/Cesium.js"></script>
<link
href="https://cesium.com/downloads/cesiumjs/releases/1.98/Build/Cesium/Widgets/widgets.css"
rel="stylesheet" />
TODO: clarify what should be imported from node_modules/cesium
The issue is visible on the branch main
, commit 6f8df87
, tag cesium-viewer-in-lit-component-credits-styles-missing
(the first screenshot below).
@olange identified the problem source and provided a workaround in PR #11:
Problem lies in source CesiumJS › packages › engine › Source › Scene › CreditDisplay; it attaches the generated CSS to document.head— which won't pierce the ShadowDOM:
function appendCss() {
let style = "";
style += addStyle(".cesium-credit-lightbox-overlay", {
display: "none",
"z-index": "1", //must be at least 1 to draw over top other Cesium widgets
position: "absolute",
top: "0",
left: "0",
width: "100%",
height: "100%",
"background-color": "rgba(80, 80, 80, 0.8)",
});
…
const head = document.head;
const css = document.createElement("style");
css.innerHTML = style;
head.insertBefore(css, head.firstChild);
}
As a workaround, @olange copied the generated CSS styles from the devtools Elements
and pasted them into our file cesium-lit.js:
/* add styles for the credit-lightbox overlay */
.cesium-credit-lightbox-overlay {
display: none;
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(80, 80, 80, 0.8);
}
...
Details:
main
, commit 6f8df87
, tag cesium-viewer-in-lit-component-credits-styles-missing
: the CreditsDisplay box lacks the corresponding styles, so it is displayed after the main viewmain
, as of commit 2cefa0d
, tag add-credits-styling-workaround
looks good, the CreditsDisplay box is overlaid on top of the main viewProject state as of commit 83b7766
on branch main
:
lit
component (this works)CesiumViewer
is instantiated in a separate container div
The demo (npm run dev
) instantiates the viewer
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain(),
});
which then draws into
<div id="cesiumContainer"></div>
Manifestly, the viewer expects the container to be in the main DOM window; there is no obvious way to tell the viewer to render into the shadow DOM of a Lit component.
In this first integration attempt, the code that initializes the viewer and interacts with it was moved into the cesium-viewer.js
file, thus enabling the component <cesium-viewer/>
to interact with it.
However, the definition of the container div has to remain in the index.html
file
<body>
<div style="margin: 10px">
<cesium-viewer></cesium-viewer>
<div id="cesiumContainer"></div>
</div>
</body>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.