<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<style>
@import url(Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
.cesium-viewer-bottom,.cesium-viewer-toolbar,.cesium-viewer-animationContainer,.cesium-viewer-timelineContainer,.cesium-viewer-fullscreenContainer,.cesium-button.cesium-fullscreenButton{
/*display:none;*/
}
.box{
display:none;
width: 70px;
height: 100px;
position: absolute;
background-color: rgba(255,255,255,.2);
z-index: 1;
}
.box .boxinner{
width: 200%;
height: 200%;
transform:scale(.5);
transform-origin:left top;
}
.box .value{
text-shadow:0 0 2px rgba(255,255,255,.5);
font-weight:bolder;
font-family:fantasy;
font-size:80px;
text-align:center;
height:80px;
line-height:80px;
}
.box .title{
text-shadow:0 0 2px rgba(255,255,255,.5);
font-weight:bolder;
font-family:fantasy;
font-size:30px;
height:80px;
line-height:80px;
}
.box .bottom{
height: 20px;
background-color: yellow;
position: absolute;
bottom: 0;
width: 100%;
}
.plane{
position: absolute;
z-index: 1;
top: 200px;
left: 0;
}
</style>
<script src="Build/Cesium/Cesium.js"></script>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<script>
var points = [
//京津翼地区
{ lng: 116.4, lat: 39.9, name: "北京", temp: 36, rain: 12, code: 59001, wind: 233, rel: 77, font: "" }, //北京
{ lng: 117.2, lat: 39.12, name: "天津", temp: 36, rain: 12, code: 59002, wind: 233, rel: 80, font: "" }, //天津
{ lng: 115.47, lat: 38.87, name: "保定", temp: 36, rain: 12, code: 59003, wind: 233, rel: 90, font: "" }, //河北 保定
{ lng: 116.7, lat: 39.52, name: "廊坊", temp: 36, rain: 12, code: 59004, wind: 233, rel: 77, font: "" }, //河北 廊坊
{ lng: 118.2, lat: 39.63, name: "唐山", temp: 36, rain: 12, code: 59005, wind: 233, rel: 53, font: "" }, //河北 唐山
{ lng: 114.52, lat: 38.05, name: "石家庄", temp: 36, rain: 12, code: 59006, wind: 233, rel: 77, font: "" }, //河北 石家庄
{ lng: 114.48, lat: 36.62, name: "邯郸", temp: 36, rain: 12, code: 59007, wind: 233, rel: 77, font: "" }, //河北 邯郸
{ lng: 119.6, lat: 39.93, name: "秦皇岛", temp: 36, rain: 12, code: 59008, wind: 233, rel: 77, font: "" }, //河北 秦皇岛
{ lng: 114.88, lat: 40.82, name: "张家口", temp: 36, rain: 12, code: 59009, wind: 233, rel: 77, font: "" }, //河北 张家口
{ lng: 117.93, lat: 40.97, name: "承德", temp: 36, rain: 12, code: 59010, wind: 233, rel: 77, font: "" }, //河北 承德
{ lng: 116.83, lat: 38.3, name: "沧州", temp: 36, rain: 12, code: 59011, wind: 233, rel: 77, font: "" }, //河北 沧州
{ lng: 114.48, lat: 37.07, name: "邢台", temp: 36, rain: 12, code: 59012, wind: 233, rel: 77, font: "" }, //河北 邢台
{ lng: 115.68, lat: 37.73, name: "衡水", temp: 36, rain: 12, code: 59013, wind: 233, rel: 77, font: "" } //河北 衡水
]
var start = Cesium.JulianDate.fromDate(new Date(2017, 7, 11));
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
//相机设置
var viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false, //Disable InfoBox widget
selectionIndicator: false, //Disable selection indicator
shouldAnimate: true, // Enable animations
imageryProvider : new Cesium.UrlTemplateImageryProvider({
url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
})
});
//设置时钟
viewer.clock.startTime = start.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.multiplier = 45;
viewer.timeline.zoomTo(start, stop);
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
// viewer.clock.shouldAnimate = true //开启时间播放
//设置动态点
var property = new Cesium.SampledPositionProperty();
for (var i = 0; i <= 360; i+=30) {
var radians = Cesium.Math.toRadians(i);
var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
var position = Cesium.Cartesian3.fromDegrees(117+i, 31, 1000000);
property.addSample(time, position);
}
var entity = viewer.entities.add({
//设置生效时间
availability: new Cesium.TimeIntervalCollection([new
Cesium.TimeInterval({
start: start,
stop: stop
})]),
position: property,
orientation: new Cesium.VelocityOrientationProperty(property),
model : { // 这里遇到个问题 追踪体只能追踪 model 其他设置 镜头不会追踪
uri : 'Cesium_Air.glb',
minimumPixelSize : 64
},
path : {
resolution : 1,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.1,
color : Cesium.Color.YELLOW
}),
width : 10
}
});
//设置插值方式
entity.position.setInterpolationOptions({
interpolationDegree : 2,
interpolationAlgorithm : Cesium.LagrangePolynomialApproximation
})
//设置追踪体
viewer.trackedEntity = entity
</script>
</body>
</html>
cesium trackedEntity示例
最新推荐文章于 2024-07-26 16:42:09 发布