当前位置：网站首页>Cesium-1.72 learning (add points, lines, cubes, etc.)
Cesium-1.72 learning (add points, lines, cubes, etc.)
2022-06-30 16:17:00 【Eternal wolf tooth】
1、 spot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Add points cesium ( Custom icon )</title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
geocoder:false, // A geographic location search tool , Used to display the geographic location accessed by the camera . The default is Microsoft Bing Map . homeButton:true, // Home page location , Click to jump to the default view . sceneModePicker:true, // Switch 2D、3D and Columbus View (CV) Pattern . baseLayerPicker:false, // Select the base map of 3D digital earth （imagery and terrain）. navigationHelpButton:true, // Help tips , How to operate digital earth . animation:false,// Control the playback speed of window animation . creditsDisplay:false, // Display trademark copyright and data sources . timeline:false, // Show the current time and allow the user to drag to any specified time on the progress bar . fullscreenButton:true, // Check the full screen button imageryProvider:new Cesium.UrlTemplateImageryProvider({
url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') + '/{z}/{x}/{reverseY}.jpg', credit : ' Analytical Graphics, Inc.', tilingScheme : new Cesium.GeographicTilingScheme(), maximumLevel : 5 }), }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source // Add points // Static methods , Call directly , return ->new Cesium.Cartesian3 ( x , y , z ) //Cesium.Cartesian3.fromDegrees (longitude, latitude, height , ellipsoid , result ) // The first three parameters are longitude and latitude height viewer.entities.add({
position:Cesium.Cartesian3.fromDegrees( 75.59, 40, 0), billboard:{
image:'/Cesium-1.72/Apps/Sandcastle/images/facility.gif' }, id:'MyCesium', name:'Cesium-Station', label : {
text : 'Citizens Bank Park', font : '14pt monospace', style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth : 2, verticalOrigin : Cesium.VerticalOrigin.BOTTOM, pixelOffset : new Cesium.Cartesian2(0, -10), fillColor:Cesium.Color.GREEN }, description:' Custom added points ' }) </script>
2、 Line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Add line cesium </title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
geocoder:false, // A geographic location search tool , Used to display the geographic location accessed by the camera . The default is Microsoft Bing Map . homeButton:true, // Home page location , Click to jump to the default view . sceneModePicker:true, // Switch 2D、3D and Columbus View (CV) Pattern . baseLayerPicker:false, // Select the base map of 3D digital earth （imagery and terrain）. navigationHelpButton:true, // Help tips , How to operate digital earth . animation:false,// Control the playback speed of window animation . creditsDisplay:false, // Display trademark copyright and data sources . timeline:false, // Show the current time and allow the user to drag to any specified time on the progress bar . fullscreenButton:true, // Check the full screen button imageryProvider:new Cesium.UrlTemplateImageryProvider({
url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') + '/{z}/{x}/{reverseY}.jpg', credit : ' Analytical Graphics, Inc.', tilingScheme : new Cesium.GeographicTilingScheme(), maximumLevel : 5 }), }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source // Add line for(var p = 0 ; p <2;p++){
var data = new Array(); for(var i = 0 ; i< 360;i++){
data.push(i); data.push(0); data.push(p*1000000); } viewer.entities.add({
polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights(data), width : 5, material : new Cesium.PolylineOutlineMaterialProperty({
color : Cesium.Color.ORANGE, outlineWidth : 2, outlineColor : Cesium.Color.BLACK }) } }) } </script>
3、 Cube
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> increase box cesium </title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
geocoder:false, // A geographic location search tool , Used to display the geographic location accessed by the camera . The default is Microsoft Bing Map . homeButton:true, // Home page location , Click to jump to the default view . sceneModePicker:true, // Switch 2D、3D and Columbus View (CV) Pattern . baseLayerPicker:false, // Select the base map of 3D digital earth （imagery and terrain）. navigationHelpButton:true, // Help tips , How to operate digital earth . animation:false,// Control the playback speed of window animation . creditsDisplay:false, // Display trademark copyright and data sources . timeline:false, // Show the current time and allow the user to drag to any specified time on the progress bar . fullscreenButton:true, // Check the full screen button imageryProvider:new Cesium.UrlTemplateImageryProvider({
url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') + '/{z}/{x}/{reverseY}.jpg', credit : ' Analytical Graphics, Inc.', tilingScheme : new Cesium.GeographicTilingScheme(), maximumLevel : 5 }), }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source // add to 3Dbox viewer.entities.add({
name:'red 3D BOX', position: Cesium.Cartesian3.fromDegrees(-107.0,42.0,300000.0), box:{
dimensions:new Cesium.Cartesian3(400000.0,300000.0,500000.0), material:Cesium.Color.RED.withAlpha(0.5), outline:true, outlineColor:Cesium.Color.BLACK } }) viewer.zoomTo(viewer.entities); </script>
4、 Camera positioning
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cesium Camera control </title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
<script src="/Cesium-1.72/Apps/Sandcastle/Sandcastle-header.js"></script>
<link rel="stylesheet" href="/Cesium-1.72/Apps/Sandcastle/templates/bucket.css">
</head>
<body style="background-color: #fff;">
<div style="width:1500px;height:700px;">
<div id="toolbar" style="z-index: 999;"></div>
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider:new Cesium.UrlTemplateImageryProvider({
url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', // Native map service fileExtension : "png", }), geocoder:false, // A geographic location search tool , Used to display the geographic location accessed by the camera . The default is Microsoft Bing Map . homeButton:true, // Home page location , Click to jump to the default view . sceneModePicker:true, // Switch 2D、3D and Columbus View (CV) Pattern . baseLayerPicker:false, // Select the base map of 3D digital earth （imagery and terrain）. navigationHelpButton:true, // Help tips , How to operate digital earth . animation:false,// Control the playback speed of window animation . creditsDisplay:false, // Display trademark copyright and data sources . timeline:false, // Show the current time and allow the user to drag to any specified time on the progress bar . fullscreenButton:true, // Check the full screen button }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source Sandcastle.addDefaultToolbarButton(' Camera positioning ', function() {
// Camera positioning viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 150000.0), }); }); function flyInACity(){
// Camera positioning viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(116.2, 39.4, 550000.0), }); } Sandcastle.addToolbarMenu([ {
text: "Camera Options", }, {
text: "Fly in a Beijing", onselect: function () {
flyInACity(); Sandcastle.highlight(flyInACity); }, } ]); </script>
5、 Flat rectangle fill
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Flat rectangle fill </title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider:new Cesium.UrlTemplateImageryProvider({
url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', // Native map service fileExtension : "png", }), geocoder:false, // A geographic location search tool , Used to display the geographic location accessed by the camera . The default is Microsoft Bing Map . homeButton:true, // Home page location , Click to jump to the default view . sceneModePicker:true, // Switch 2D、3D and Columbus View (CV) Pattern . baseLayerPicker:false, // Select the base map of 3D digital earth （imagery and terrain）. navigationHelpButton:true, // Help tips , How to operate digital earth . animation:false,// Control the playback speed of window animation . creditsDisplay:false, // Display trademark copyright and data sources . timeline:false, // Show the current time and allow the user to drag to any specified time on the progress bar . fullscreenButton:true, // Check the full screen button }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source // Add rectangle viewer.entities.add({
name : 'Yellow plane outline', position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 0), plane : {
plane : new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),// The normal of the plane dimensions : new Cesium.Cartesian2(400000.0, 300000.0), fill : true, //material:Cesium.Color.RED.withAlpha(0.5), transparency material:new Cesium.GridMaterialProperty({
color : Cesium.Color.YELLOW, cellAlpha : 0.2, lineCount : new Cesium.Cartesian2(8, 8), lineThickness : new Cesium.Cartesian2(2.0, 2.0) }), outline : true, outlineColor : Cesium.Color.RED } }) var stripeMaterial = new Cesium.StripeMaterialProperty({
evenColor: Cesium.Color.WHITE.withAlpha(0.5), oddColor: Cesium.Color.BLUE.withAlpha(0.5), repeat: 5.0, }); viewer.entities.add({
polygon: {
hierarchy: new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray([ -107.0, 27.0, -107.0, 22.0, -102.0, 23.0, -97.0, 21.0, -97.0, 25.0, -99.0, 26.0, ]) ), outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 4, material: stripeMaterial, }, }); </script>
6、 Simulate aircraft dynamic operation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Add line cesium </title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider:new Cesium.UrlTemplateImageryProvider({
url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', // Native map service fileExtension : "png", }), geocoder:false, // A geographic location search tool , Used to display the geographic location accessed by the camera . The default is Microsoft Bing Map . homeButton:true, // Home page location , Click to jump to the default view . sceneModePicker:true, // Switch 2D、3D and Columbus View (CV) Pattern . baseLayerPicker:false, // Select the base map of 3D digital earth （imagery and terrain）. navigationHelpButton:true, // Help tips , How to operate digital earth . animation:false,// Control the playback speed of window animation . creditsDisplay:false, // Display trademark copyright and data sources . timeline:false, // Show the current time and allow the user to drag to any specified time on the progress bar . fullscreenButton:true, // Check the full screen button shouldAnimate: true, clock:new Cesium.Clock({
currentTime:Cesium.JulianDate.fromDate(new Date()) }) }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source var arr = new Array(); viewer.entities.add({
id:'star1_t', name : 'Orange line with black outline at height and following the surface', description:'Orange Line',// describe polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights(arr), width : 5, material : new Cesium.PolylineOutlineMaterialProperty({
color : new Cesium.Color ( 1 , 1 , 0 , 0.5 ), outlineWidth : 2, outlineColor : Cesium.Color.BLACK }) } }) // Add rectangle viewer.entities.add({
id:'star1_s1_p', name: "Red polygon on surface", polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([ -115.0, 37.0, -115.0, 32.0, -107.0, 33.0, -102.0, 31.0, ]), material: new Cesium.GridMaterialProperty({
color : Cesium.Color.YELLOW, cellAlpha : 0.2, }) }, }); // Add line viewer.entities.add({
name: "Purple straight arrow at height", polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([ -75, 43, 500000, -75, 43, 0, ]), width: 10, arcType: Cesium.ArcType.NONE, material: new Cesium.PolylineArrowMaterialProperty( Cesium.Color.PURPLE ), }, }); // Add satellite model ent = new Cesium.Entity({
id:'star1', name:'star', description:' satellite ', position:Cesium.Cartesian3.fromDegrees( 10,0,4000000), model:{
uri: '/Cesium-1.72/Apps/SampleData/models/CesiumAir/Cesium_Air.glb', minimumPixelSize : 128, maximumScale : 40000 } }); viewer.entities.add(ent); // Add triangle viewer.entities.add({
id:'lines', name: "Cyan vertical polygon with per-position heights and outline", polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([ -90.0, 41.0, 0.0, -85.0, 41.0, 500000.0, -80.0, 41.0, 0.0, ]), perPositionHeight: true, material: Cesium.Color.CYAN.withAlpha(0.5), outline: true, outlineColor: Cesium.Color.BLACK, }, }); var x =0; setInterval(function() {
var data = new Array(); data.push(x+1); data.push(10); data.push(x-5); data.push(10); data.push(x-5); data.push(-10); data.push(x+1); data.push(-10); // Change the time viewer.clock=new Cesium.Clock({
currentTime:Cesium.JulianDate.fromDate(new Date()) }) // Image changes 1 var position = Cesium.Cartesian3.fromDegrees(x,0,4000000) viewer.entities.getById('star1').position=position; arr.push(x); arr.push(0); arr.push(4000000); viewer.entities.getById('star1_t').polyline.positions = Cesium.Cartesian3.fromDegreesArrayHeights(arr); viewer.entities.getById('star1_s1_p').polygon.hierarchy=Cesium.Cartesian3.fromDegreesArray(data); x += 10; },1000); /* var x = 0; var ent = null; setInterval(function() { if(ent != null){ viewer.entities.remove(ent); } // Add satellite model ent = new Cesium.Entity({ name:'star', description:' satellite ', position:Cesium.Cartesian3.fromDegrees( x,0,4000000), model:{ uri: '/Cesium-1.72/Apps/SampleData/models/CesiumAir/Cesium_Air.glb', minimumPixelSize : 128, maximumScale : 40000 } }); viewer.entities.add(ent); x+=1; if(x == 360){ x = 0 ; } },1000);*/ </script>
7、 official czml Satellite operation cases
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Quick start cesium</title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider:new Cesium.UrlTemplateImageryProvider({
url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII') + '/{z}/{x}/{reverseY}.jpg', credit : ' Analytical Graphics, Inc.', tilingScheme : new Cesium.GeographicTilingScheme(), maximumLevel : 5 }), geocoder:false, // A geographic location search tool , Used to display the geographic location accessed by the camera . The default is Microsoft Bing Map . homeButton:true, // Home page location , Click to jump to the default view . sceneModePicker:true, // Switch 2D、3D and Columbus View (CV) Pattern . baseLayerPicker:false, // Select the base map of 3D digital earth （imagery and terrain）. navigationHelpButton:true, // Help tips , How to operate digital earth . animation:false,// Control the playback speed of window animation . creditsDisplay:false, // Display trademark copyright and data sources . timeline:false, // Show the current time and allow the user to drag to any specified time on the progress bar . fullscreenButton:true, // Check the full screen button shouldAnimate: true }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source viewer.dataSources.add( Cesium.CzmlDataSource.load("/Cesium-1.72/Apps/SampleData/simple.czml") ) </script>
8、 Simulated satellite scanning
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Satellite scanning </title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
</head>
<body>
<div style="width:1500px;height:700px;">
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider:new Cesium.UrlTemplateImageryProvider({
url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', // Native map service fileExtension : "png", }), }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source var data = []; data = [{
longitude: 116.405419, dimension: 39.918034, height: 700000, time: 0 }, {
longitude: 115.2821, dimension: 39.918145, height: 700000, time: 40 }, {
longitude: 114.497402, dimension: 39.344641, height: 700000, time: 100 }, {
longitude: 107.942392, dimension: 35.559967, height: 700000, time: 280 }, {
longitude: 106.549265, dimension: 34.559967, height: 700000, time: 360 }, {
longitude: 95.2821, dimension: 32.918145, height: 700000, time: 400 }, {
longitude: 94.497402, dimension: 30.344641, height: 700000, time: 450 }, {
longitude: 87.942392, dimension: 25.559967, height: 700000, time: 550 }, {
longitude: 66.549265, dimension: 24.559967, height: 700000, time: 600 }]; // Starting time var start = Cesium.JulianDate.fromDate(new Date(2020, 7, 11)); // End time var stop = Cesium.JulianDate.addSeconds(start, 600, new Cesium.JulianDate()); // Set the start time of the start clock viewer.clock.startTime = start.clone(); // Set the current time of the clock viewer.clock.currentTime = start.clone(); // Set the always stop time viewer.clock.stopTime = stop.clone(); // Time rate , The larger the number, the faster time passes viewer.clock.multiplier = 10; // time axis viewer.timeline.zoomTo(start, stop); // Loop execution viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; var property = computeFlight(data); // Add model var planeModel = viewer.entities.add({
// Associated with the timeline availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start, stop: stop })]), position: property, // Calculate the point according to the speed provided orientation: new Cesium.VelocityOrientationProperty(property), // model data model: {
uri: '/Cesium-1.72/Apps/SampleData/models/CesiumAir/Cesium_Air.glb', minimumPixelSize: 128 }, path: {
resolution: 1, material: new Cesium.PolylineGlowMaterialProperty({
glowPower: .1, color: Cesium.Color.YELLOW }), width: 10 } }); planeModel.position.setInterpolationOptions({
// Interpolation algorithm for setting position interpolationDegree: 5, interpolationAlgorithm: Cesium.LagrangePolynomialApproximation }); var property2 = computeFlight2(data); var entity_ty = viewer.entities.add({
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start, stop: stop })]), position: property2, orientation: new Cesium.VelocityOrientationProperty(property2), cylinder: {
HeightReference: Cesium.HeightReference.CLAMP_TO_GROUND, length: 700000, topRadius: 0, bottomRadius: 700000 / 4, material: Cesium.Color.RED.withAlpha(.4), outline: !0, numberOfVerticalLines: 0, outlineColor: Cesium.Color.RED.withAlpha(.8) }, }); entity_ty.position.setInterpolationOptions({
interpolationDegree: 5, interpolationAlgorithm: Cesium.LagrangePolynomialApproximation }); function computeFlight(source) {
var property = new Cesium.SampledPositionProperty(); for (var i = 0; i < source.length; i++) {
var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate); var position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height); // Add location , Corresponding to time property.addSample(time, position); } return property; } function computeFlight2(source) {
var property = new Cesium.SampledPositionProperty(); for (var i = 0; i < source.length; i++) {
var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate); var position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height / 2); // Add location , Corresponding to time property.addSample(time, position); } return property; } </script>
9、 The clock
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clock The clock </title>
<link rel="stylesheet" href="/Cesium-1.72/Build/Cesium/Widgets/widgets.css">
<script src="/Cesium-1.72/Build/Cesium/Cesium.js"></script>
<script src="/Cesium-1.72/Apps/Sandcastle/Sandcastle-header.js"></script>
<link rel="stylesheet" href="/Cesium-1.72/Apps/Sandcastle/templates/bucket.css">
</head>
<body style="background-color: #fff;">
<div style="width:1500px;height:700px;">
<div id="toolbar" style="z-index: 999;"></div>
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
</div>
</body>
</html>
<script> var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider:new Cesium.UrlTemplateImageryProvider({
url:'http://localhost:8099/basemap_0-10/{z}/{y}/{x}.png', // Native map service fileExtension : "png", }), }); viewer.scene.globe.enableLighting = true;// Enable the earth with the sun as the light source // Create a clock that loops on Christmas day 2013 and runs in 4000x real time. var clock = new Cesium.Clock({
startTime: Cesium.JulianDate.fromIso8601("2013-12-25"), currentTime: Cesium.JulianDate.fromIso8601("2013-12-25"), stopTime: Cesium.JulianDate.fromIso8601("2013-12-26"), clockRange: Cesium.ClockRange.LOOP_STOP, // loop when we hit the end time clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER, multiplier: 4000, // how much time to advance each tick shouldAnimate: true, // Animation on by default }); viewer.clockViewModel = clock; viewer.scene.globe.enableLighting = true; Sandcastle.addToolbarButton("Reset Current Time", function () {
var resetTime = viewer.clockViewModel.startTime; viewer.clockViewModel.currentTime = resetTime; viewer.timeline.updateFromClock(); }); Sandcastle.addToolbarButton("Slow Down Clock", function () {
viewer.clockViewModel.multiplier /= 2; }); Sandcastle.addToolbarButton("Speed Up Clock", function () {
viewer.clockViewModel.multiplier *= 2; }); </script>
Case code ：https://github.com/zhangxuhui1992/cesium
边栏推荐
- CloudXR如何推动XR的未来发展
- Policy Center ＞ Misrepresentation
- How cloudxr promotes the future development of XR
- Swagger's asp Net core web API help page
- Data governance Market: Yixin Huachen faces left, Huaao data faces right
- Compulsory national standard for electronic cigarette GB 41700-2022 issued and implemented on October 1, 2022
- Which direction should college students choose to find jobs after graduation?
- Google Play 索引表
- Two methods for MySQL to open remote connection permission
- Log4j2 advanced use
猜你喜欢
Implementation of Devops in the core field of qunar, the Internet R & D Efficiency
Alibaba cloud OSS object storage cross domain settings
Create a new MySQL database under Linux and import SQL files
Google Play 索引表
halcon变量窗口的图像变量不显示，重启软件和电脑都没用
Google play index table
数据治理市场：亿信华辰朝左，华傲数据向右
How to connect the Internet Reading Notes - Summary
Smart wind power: operation and maintenance of digital twin 3D wind turbine intelligent equipment
Cesium-1.72 learning (earth model creation online offline tile)
随机推荐
从第三次技术革命看企业应用三大开发趋势
优惠券种类那么多，先区分清楚再薅羊毛！
Smart wind power: operation and maintenance of digital twin 3D wind turbine intelligent equipment
大学生研究生毕业找工作，该选择哪个方向？
婴儿认知学习所带来的启发，也许是下一代无监督机器学习的关键
【算法篇】四种链表总结完毕，顺手刷了两道面试题
智慧风电：数字孪生 3D 风机智能设备运维
mysql主从配置
Practical cases of data visualization (timeline rotation diagram, streamlit control year metabase visualization tutorial) 2.0
Simulate user login function
Phone number shielding function
“低代码”在企业数字化转型中扮演着什么角色？
边缘计算平台如何助力物联网发展
What are the reasons for the errors reported by the Flink SQL CDC synchronization sqlserver
Generating verification code with sring
flink sql cdc 同步sqlserver 报错什么原因啊
[附下载]渗透测试神器Nessus安装及使用
ASP. Net core Middleware
String common API
The inspiration from infant cognitive learning may be the key to the next generation of unsupervised machine learning