You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
369 lines
13 KiB
HTML
369 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
|
/>
|
|
<meta name="description" content="Clamp primitives to the terrain." />
|
|
<meta name="cesium-sandcastle-labels" content="Tutorials, Showcases" />
|
|
<title>Cesium Demo</title>
|
|
<script type="text/javascript" src="../Sandcastle-header.js"></script>
|
|
<script
|
|
type="text/javascript"
|
|
src="../../../Build/CesiumUnminified/Cesium.js"
|
|
nomodule
|
|
></script>
|
|
<script type="module" src="../load-cesium-es6.js"></script>
|
|
</head>
|
|
<body
|
|
class="sandcastle-loading"
|
|
data-sandcastle-bucket="bucket-requirejs.html"
|
|
>
|
|
<style>
|
|
@import url(../templates/bucket.css);
|
|
</style>
|
|
<div id="cesiumContainer" class="fullSize"></div>
|
|
<div id="loadingOverlay"><h1>Loading...</h1></div>
|
|
<div id="toolbar">
|
|
<div id="terrainMenu"></div>
|
|
<div id="zoomButtons"></div>
|
|
<div id="toggleLighting"></div>
|
|
<div id="sampleButtons"></div>
|
|
</div>
|
|
<script id="cesium_sandcastle_script">
|
|
function startup(Cesium) {
|
|
"use strict";
|
|
//Sandcastle_Begin
|
|
var viewer = new Cesium.Viewer("cesiumContainer", {
|
|
terrainProvider: Cesium.createWorldTerrain(),
|
|
});
|
|
viewer.scene.globe.depthTestAgainstTerrain = true;
|
|
|
|
Sandcastle.addDefaultToolbarMenu(
|
|
[
|
|
{
|
|
//
|
|
// To clamp points or billboards set the heightReference to CLAMP_TO_GROUND or RELATIVE_TO_GROUND
|
|
//
|
|
text: "Draw Point with Label",
|
|
onselect: function () {
|
|
var e = viewer.entities.add({
|
|
position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
|
|
point: {
|
|
color: Cesium.Color.SKYBLUE,
|
|
pixelSize: 10,
|
|
outlineColor: Cesium.Color.YELLOW,
|
|
outlineWidth: 3,
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
},
|
|
label: {
|
|
text: "Clamped to ground",
|
|
font: "14pt sans-serif",
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
|
verticalOrigin: Cesium.VerticalOrigin.BASELINE,
|
|
fillColor: Cesium.Color.BLACK,
|
|
showBackground: true,
|
|
backgroundColor: new Cesium.Color(1, 1, 1, 0.7),
|
|
backgroundPadding: new Cesium.Cartesian2(8, 4),
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY, // draws the label in front of terrain
|
|
},
|
|
});
|
|
|
|
viewer.trackedEntity = e;
|
|
},
|
|
},
|
|
{
|
|
text: "Draw Billboard",
|
|
onselect: function () {
|
|
var e = viewer.entities.add({
|
|
position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
|
|
billboard: {
|
|
image: "../images/facility.gif",
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
},
|
|
});
|
|
|
|
viewer.trackedEntity = e;
|
|
},
|
|
},
|
|
{
|
|
//
|
|
// Corridors, polygons and rectangles will be clamped automatically if they are filled with a constant color and
|
|
// has no height or extruded height.
|
|
// NOTE: Setting height to 0 will disable clamping.
|
|
//
|
|
text: "Draw Corridor",
|
|
onselect: function () {
|
|
var e = viewer.entities.add({
|
|
corridor: {
|
|
positions: Cesium.Cartesian3.fromDegreesArray([
|
|
-122.19,
|
|
46.1914,
|
|
-122.21,
|
|
46.21,
|
|
-122.23,
|
|
46.21,
|
|
]),
|
|
width: 2000.0,
|
|
material: Cesium.Color.GREEN.withAlpha(0.5),
|
|
},
|
|
});
|
|
|
|
viewer.zoomTo(e);
|
|
},
|
|
},
|
|
{
|
|
text: "Draw Polygon",
|
|
onselect: function () {
|
|
var e = viewer.entities.add({
|
|
polygon: {
|
|
hierarchy: {
|
|
positions: [
|
|
new Cesium.Cartesian3(
|
|
-2358138.847340281,
|
|
-3744072.459541374,
|
|
4581158.5714175375
|
|
),
|
|
new Cesium.Cartesian3(
|
|
-2357231.4925370603,
|
|
-3745103.7886602185,
|
|
4580702.9757762635
|
|
),
|
|
new Cesium.Cartesian3(
|
|
-2355912.902205431,
|
|
-3744249.029778454,
|
|
4582402.154378103
|
|
),
|
|
new Cesium.Cartesian3(
|
|
-2357208.0209552636,
|
|
-3743553.4420488174,
|
|
4581961.863286629
|
|
),
|
|
],
|
|
},
|
|
material: Cesium.Color.BLUE.withAlpha(0.5),
|
|
},
|
|
});
|
|
|
|
viewer.zoomTo(e);
|
|
},
|
|
},
|
|
{
|
|
text: "Draw Textured Polygon",
|
|
onselect: function () {
|
|
if (
|
|
!Cesium.Entity.supportsMaterialsforEntitiesOnTerrain(
|
|
viewer.scene
|
|
)
|
|
) {
|
|
window.alert(
|
|
"Terrain Entity materials are not supported on this platform"
|
|
);
|
|
return;
|
|
}
|
|
|
|
var e = viewer.entities.add({
|
|
polygon: {
|
|
hierarchy: {
|
|
positions: [
|
|
new Cesium.Cartesian3(
|
|
-2358138.847340281,
|
|
-3744072.459541374,
|
|
4581158.5714175375
|
|
),
|
|
new Cesium.Cartesian3(
|
|
-2357231.4925370603,
|
|
-3745103.7886602185,
|
|
4580702.9757762635
|
|
),
|
|
new Cesium.Cartesian3(
|
|
-2355912.902205431,
|
|
-3744249.029778454,
|
|
4582402.154378103
|
|
),
|
|
new Cesium.Cartesian3(
|
|
-2357208.0209552636,
|
|
-3743553.4420488174,
|
|
4581961.863286629
|
|
),
|
|
],
|
|
},
|
|
material: "../images/Cesium_Logo_Color.jpg",
|
|
classificationType: Cesium.ClassificationType.TERRAIN,
|
|
stRotation: Cesium.Math.toRadians(45),
|
|
},
|
|
});
|
|
|
|
viewer.zoomTo(e);
|
|
},
|
|
},
|
|
{
|
|
text: "Draw Rectangle",
|
|
onselect: function () {
|
|
var e = viewer.entities.add({
|
|
rectangle: {
|
|
coordinates: Cesium.Rectangle.fromDegrees(
|
|
-122.3,
|
|
46.0,
|
|
-122.0,
|
|
46.3
|
|
),
|
|
material: Cesium.Color.RED.withAlpha(0.5),
|
|
},
|
|
});
|
|
|
|
viewer.zoomTo(e);
|
|
},
|
|
},
|
|
{
|
|
text: "Draw Model",
|
|
onselect: function () {
|
|
var e = viewer.entities.add({
|
|
position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
|
|
model: {
|
|
uri: "../../SampleData/models/CesiumMan/Cesium_Man.glb",
|
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
minimumPixelSize: 128,
|
|
maximumScale: 100,
|
|
},
|
|
});
|
|
|
|
viewer.trackedEntity = e;
|
|
},
|
|
},
|
|
{
|
|
text: "Sample line positions and draw with depth test disabled",
|
|
onselect: function () {
|
|
var length = 1000;
|
|
|
|
var startLon = Cesium.Math.toRadians(86.953793);
|
|
var endLon = Cesium.Math.toRadians(86.896497);
|
|
|
|
var lat = Cesium.Math.toRadians(27.988257);
|
|
|
|
var terrainSamplePositions = [];
|
|
for (var i = 0; i < length; ++i) {
|
|
var lon = Cesium.Math.lerp(
|
|
endLon,
|
|
startLon,
|
|
i / (length - 1)
|
|
);
|
|
var position = new Cesium.Cartographic(lon, lat);
|
|
terrainSamplePositions.push(position);
|
|
}
|
|
|
|
Cesium.when(
|
|
Cesium.sampleTerrainMostDetailed(
|
|
viewer.terrainProvider,
|
|
terrainSamplePositions
|
|
),
|
|
function (samples) {
|
|
var offset = 10.0;
|
|
for (var i = 0; i < samples.length; ++i) {
|
|
samples[i].height += offset;
|
|
}
|
|
|
|
viewer.entities.add({
|
|
polyline: {
|
|
positions: Cesium.Ellipsoid.WGS84.cartographicArrayToCartesianArray(
|
|
samples
|
|
),
|
|
arcType: Cesium.ArcType.NONE,
|
|
width: 5,
|
|
material: new Cesium.PolylineOutlineMaterialProperty({
|
|
color: Cesium.Color.ORANGE,
|
|
outlineWidth: 2,
|
|
outlineColor: Cesium.Color.BLACK,
|
|
}),
|
|
depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty(
|
|
{
|
|
color: Cesium.Color.RED,
|
|
outlineWidth: 2,
|
|
outlineColor: Cesium.Color.BLACK,
|
|
}
|
|
),
|
|
},
|
|
});
|
|
|
|
var target = new Cesium.Cartesian3(
|
|
300770.50872389384,
|
|
5634912.131394585,
|
|
2978152.2865545116
|
|
);
|
|
offset = new Cesium.Cartesian3(
|
|
6344.974098678562,
|
|
-793.3419798081741,
|
|
2499.9508860763162
|
|
);
|
|
viewer.camera.lookAt(target, offset);
|
|
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
|
|
}
|
|
);
|
|
},
|
|
},
|
|
{
|
|
text: "Draw polyline on terrain",
|
|
onselect: function () {
|
|
if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {
|
|
window.alert(
|
|
"Polylines on terrain are not supported on this platform"
|
|
);
|
|
}
|
|
|
|
viewer.entities.add({
|
|
polyline: {
|
|
positions: Cesium.Cartesian3.fromDegreesArray([
|
|
86.953793,
|
|
27.928257,
|
|
86.953793,
|
|
27.988257,
|
|
86.896497,
|
|
27.988257,
|
|
]),
|
|
clampToGround: true,
|
|
width: 5,
|
|
material: new Cesium.PolylineOutlineMaterialProperty({
|
|
color: Cesium.Color.ORANGE,
|
|
outlineWidth: 2,
|
|
outlineColor: Cesium.Color.BLACK,
|
|
}),
|
|
},
|
|
});
|
|
|
|
var target = new Cesium.Cartesian3(
|
|
300770.50872389384,
|
|
5634912.131394585,
|
|
2978152.2865545116
|
|
);
|
|
var offset = new Cesium.Cartesian3(
|
|
6344.974098678562,
|
|
-793.3419798081741,
|
|
2499.9508860763162
|
|
);
|
|
viewer.camera.lookAt(target, offset);
|
|
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
|
|
},
|
|
},
|
|
],
|
|
"zoomButtons"
|
|
);
|
|
|
|
Sandcastle.reset = function () {
|
|
viewer.entities.removeAll();
|
|
};
|
|
|
|
//Sandcastle_End
|
|
Sandcastle.finishedLoading();
|
|
}
|
|
if (typeof Cesium !== "undefined") {
|
|
window.startupCalled = true;
|
|
startup(Cesium);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|