2025-03-11 08:25:45 +00:00
|
|
|
<!--********************************************************************
|
|
|
|
|
* by jiawanlong
|
|
|
|
|
*********************************************************************-->
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
2025-03-19 03:00:22 +00:00
|
|
|
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css" />
|
|
|
|
|
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
2025-03-11 08:25:45 +00:00
|
|
|
<style>
|
|
|
|
|
#canvas-a {
|
|
|
|
|
top: 10px;
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#canvas-b {
|
|
|
|
|
top: 120px;
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body style="
|
|
|
|
|
margin: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background: #fff;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
">
|
|
|
|
|
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
|
|
|
|
|
<canvas id="canvas-a" class="canvas" width="300" height="300"></canvas>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
Cesium.Ion.defaultAccessToken =
|
2025-05-18 11:30:00 +00:00
|
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjM2EzNGJmNy02N2RmLTQ0MDMtYjI2MS1hZTJiMTIwZGYwMTYiLCJpZCI6MzA0MzEyLCJpYXQiOjE3NDc3MjM3MTV9.ePQNhuoVuDsi_z00lTm5W26wyW1Adcr1AWetGM6WSXI";
|
2025-03-11 08:25:45 +00:00
|
|
|
const viewer = new Cesium.Viewer("map", {});
|
|
|
|
|
viewer.scene.debugShowFramesPerSecond = true;
|
|
|
|
|
viewer.scene.globe.depthTestAgainstTerrain = true;
|
|
|
|
|
|
|
|
|
|
let rotation = Cesium.Math.toRadians(30);
|
|
|
|
|
|
|
|
|
|
function getRotationValue() {
|
|
|
|
|
rotation -= 0.02;
|
|
|
|
|
return rotation;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function drawCanvas() {
|
|
|
|
|
let canvas = document.getElementById("canvas-a");
|
|
|
|
|
let context = canvas.getContext('2d');
|
|
|
|
|
let grd = context.createLinearGradient(175, 100, canvas.width, 150);
|
|
|
|
|
grd.addColorStop(0, "rgba(0,255,0,0)");
|
|
|
|
|
grd.addColorStop(1, "rgba(0,255,0,1)");
|
|
|
|
|
context.fillStyle = grd;
|
|
|
|
|
context.beginPath();
|
|
|
|
|
context.moveTo(150, 150);
|
|
|
|
|
context.arc(150, 150, 140, -90 / 180 * Math.PI, 0 / 180 * Math
|
|
|
|
|
.PI);
|
|
|
|
|
context.fill();
|
|
|
|
|
return canvas;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let i = 0;
|
|
|
|
|
viewer.entities.add({
|
|
|
|
|
name: 'Rotating rectangle with rotating texture coordinate',
|
|
|
|
|
rectangle: {
|
|
|
|
|
coordinates: new Cesium.CallbackProperty(function () {
|
|
|
|
|
return Cesium.Rectangle.fromDegrees(-75.0, 30.0, -70.0, 35.0)
|
|
|
|
|
}, false),
|
|
|
|
|
material: new Cesium.ImageMaterialProperty({
|
|
|
|
|
image: new Cesium.CallbackProperty(drawCanvas, false),
|
|
|
|
|
transparent: true
|
|
|
|
|
}),
|
|
|
|
|
rotation: new Cesium.CallbackProperty(getRotationValue, false),
|
|
|
|
|
stRotation: new Cesium.CallbackProperty(getRotationValue, false)
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
viewer.zoomTo(viewer.entities);
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
