Skip to content

Commit 6f8df87

Browse files
rudifarudifa
authoredNov 13, 2022
Merge pull request #9 from rudifa/try-embed-cesium-viewer-3
Embed cesium viewer in component <cesium-lit>
·
1.1.21.0.0
2 parents 83b7766 + 53d3fe5 commit 6f8df87

File tree

7 files changed

+1399
-47
lines changed

7 files changed

+1399
-47
lines changed
 

‎_extracted/_cesiumContainer.html

+8
Large diffs are not rendered by default.

‎_extracted/_lit_widgets.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div class="lit-widgets">
2+
<h3>Hello, <!--?lit$4457521864$-->Cesium!</h3>
3+
<button id="--" part="button">--</button>
4+
<button id="++" part="button">++</button>
5+
&nbsp; height: <!--?lit$4457521864$-->200000 m
6+
</div>

‎_extracted/_outer.html

+35
Large diffs are not rendered by default.

‎index.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@
88
<script type="module" src="/index.js"></script>
99
</head>
1010
<body>
11-
<div style="margin: 10px">
12-
<cesium-zoomer></cesium-zoomer>
13-
<div id="cesiumContainer"></div>
11+
<div>
12+
<cesium-lit></cesium-lit>
1413
</div>
1514
</body>
1615
</html>

‎index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
import './src/cesium-zoomer.js';
1+
import './src/cesium-lit.js';

‎src/cesium-zoomer.js ‎src/cesium-lit.js

+52-43
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,26 @@
11
/** @prettier */
22

3-
import {html, css, LitElement} from 'lit';
4-
import {customElement, property, state} from 'lit/decorators.js';
5-
6-
// code from https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/
7-
// see Import from CDN vs. Install with NPM
8-
// see also https://www.npmjs.com/package/vite-plugin-cesium
3+
import {html, css, unsafeCSS, LitElement} from 'lit';
4+
import {customElement, property} from 'lit/decorators.js';
95

106
import * as Cesium from 'cesium';
11-
import 'cesium/Build/Cesium/Widgets/widgets.css';
127

13-
// Your access token can be found at: https://cesium.com/ion/tokens.
14-
// This is the default access token from your ion account
8+
// This works, tested in dev and in build+preview
9+
import widgetStylesRaw from 'cesium/Build/Cesium/Widgets/widgets.css';
10+
const widgetStyles = css`
11+
${unsafeCSS(widgetStylesRaw)}
12+
`;
1513

14+
// Your access token can be found at: https://cesium.com/ion/tokens.
15+
// This is the default access token from the cesiumjs-quickstart demo
1616
Cesium.Ion.defaultAccessToken =
1717
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwMDY5YjNjNy05ZDZjLTQ5YjUtODBhOC03MGY4Njc3MzUyMDEiLCJpZCI6MTEyNTc3LCJpYXQiOjE2NjY4MTYyNjB9.fd9TA4pMsDaKBWE1lSEBvYB34xR-R1anLfSG-vSVI4c';
1818

19-
// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
20-
const viewer = new Cesium.Viewer('cesiumContainer', {
21-
terrainProvider: Cesium.createWorldTerrain(),
22-
});
23-
// Add Cesium OSM Buildings, a global 3D buildings layer.
24-
const buildingTileset = viewer.scene.primitives.add(
25-
Cesium.createOsmBuildings()
26-
);
27-
28-
// Fly the camera to Geneva at the given longitude, latitude, and height.
29-
// viewer.camera.flyTo({
30-
// destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
31-
// orientation : {
32-
// heading : Cesium.Math.toRadians(0.0),
33-
// pitch : Cesium.Math.toRadians(-15.0),
34-
// }
35-
// });
36-
3719
/**
3820
* Clamp the value to the range [min, max].
39-
* @param {*} value
40-
* @param {*} min
41-
* @param {*} max
21+
* @param {*} value
22+
* @param {*} min
23+
* @param {*} max
4224
* @returns -- clamped value
4325
*/
4426
const clamp = (value, min, max) => {
@@ -49,7 +31,6 @@ const clamp = (value, min, max) => {
4931

5032
/**
5133
* Camera position and orientation to fly to.
52-
*
5334
* @requires -- a `viewer` object.
5435
*/
5536
class CameraCoordinates {
@@ -66,7 +47,7 @@ class CameraCoordinates {
6647
this.height = clamp(height, 1000, 40_000_000);
6748
}
6849

69-
flyTo() {
50+
flyTo(viewer) {
7051
viewer.camera.flyTo({
7152
destination: Cesium.Cartesian3.fromDegrees(
7253
this.lngDeg,
@@ -83,46 +64,74 @@ class CameraCoordinates {
8364
}
8465

8566
/**
86-
* A partial encapsulation of Cesium Viewer custom controls.
67+
* Encapsulation of Cesium Viewer and custom controls.
8768
*/
88-
@customElement('cesium-zoomer')
89-
export class CesiumZoomer extends LitElement {
69+
@customElement('cesium-lit')
70+
export class CesiumLit extends LitElement {
9071
static get styles() {
91-
return css`
72+
return [
73+
widgetStyles,
74+
css`
9275
:host {
93-
display: block;
94-
border: solid 1px gray;
76+
display: block; /* no effect */
9577
padding: 10px;
9678
max-width: 100vw;
79+
max-height: 100vw; /*no effect*/
9780
font-size: 16px;
9881
font-family: Helvetica, Arial, sans-serif;
82+
/* box-sizing: content-box; no effect */
9983
}
10084
button {
10185
font-size: 14px;
10286
}
103-
`;
87+
#cesiumContainer {
88+
/* width: 50%; */
89+
/* width: 100%; */
90+
/* height: 100%; */ /*does not prevent vertical growth*/
91+
/* max-width: 100vw; */
92+
/* max-height: 100vh; prevents vertical growth, vertically incluses all widgets */
93+
/* width: auto; */
94+
/* height: auto; */
95+
/* height: 700px;*/ /*prevents vertical growth */
96+
background: thistle;
97+
/* overflow: hidden; not needed */
98+
border: solid 1px blue;
99+
}
100+
.lit-widgets {
101+
background: hsl(0, 0%, 90%);
102+
border: solid 1px blue;
103+
padding: 10px;
104+
}
105+
`,
106+
];
104107
}
105108

106109
@property() name = 'Cesium';
107110

108111
cameraCoordinates = new CameraCoordinates();
109112

110113
flyTo() {
111-
this.cameraCoordinates.flyTo();
114+
this.cameraCoordinates.flyTo(this.viewer);
112115
}
113116

114117
firstUpdated() {
118+
const cesiumContainer = this.renderRoot.getElementById('cesiumContainer');
119+
console.log(`firstUpdated cesiumContainer:`, cesiumContainer);
120+
this.viewer = new Cesium.Viewer(cesiumContainer, {
121+
terrainProvider: Cesium.createWorldTerrain(),
122+
});
115123
this.flyTo();
116124
}
117125

118126
render() {
119127
return html`
120-
<h3>Hello, ${this.name}!</h3>
121-
<div>
128+
<div class="lit-widgets">
129+
<h3>Hello, ${this.name}!</h3>
122130
<button id="--" @click=${this._onClick} part="button">--</button>
123131
<button id="++" @click=${this._onClick} part="button">++</button>
124-
height: ${this.cameraCoordinates.height}
132+
&nbsp; height: ${this.cameraCoordinates.height} m
125133
</div>
134+
<div id="cesiumContainer"></div>
126135
`;
127136
}
128137

‎src/widgets.js

+1,295
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.