csium 动态图片实现思路
文章目录
-
-
- 获取 AccessToken
- 代码示例
- 效果
- 图片素材
-
获取 AccessToken
获取 AccessToken
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.51/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
}
#cesiumContainer {
height: 100%;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken = '你的AccessToken';
var viewer = new Cesium.Viewer('cesiumContainer', {
geocoder: false, //是否显示地名查找控件
sceneModePicker: false, //是否显示投影方式控件
navigationHelpButton: false, //是否显示帮助信息控件
baseLayerPicker: false, //是否显示图层选择控件
homeButton: false, //是否显示Home按钮
fullscreenButton: false, //是否显示全屏按钮
timeline: false, //时间轴控件
animation: false, //动画控件
});
viewer.cesiumWidget.creditContainer.style.display = "none"; //去cesium logo水印 或 css
// viewer.scene.fxaa=false 关闭抗锯齿 提高图片清晰度
viewer.scene.postProcessStages.fxaa.enabled = true;
// 设置分辨率 提高图片清晰度
var supportsImageRenderingPixelated = viewer.cesiumWidget._supportsImageRenderingPixelated;
if (supportsImageRenderingPixelated) {
var vtxf_dpr = window.devicePixelRatio;
while (vtxf_dpr >= 2.0) {
vtxf_dpr = .1 // /= 2.0;
}
viewer.resolutionScale = vtxf_dpr;
}
// 动态改变图片的大小 和地址
var test = add(117.270799, 29.979596)
// var test2 = add(117.270739, 29.979596)
function add(x,y){
return viewer.entities.add({
name: '测试点',
description: '测试', // (120.8759899, 29.979596, 10) {x:117.270739,y:31.84308}
position: Cesium.Cartesian3.fromDegrees(x,y, 10), //广告牌坐标
billboard: {
image: "acting.png",
scale: 1,
rotation: 0,
show: true,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
},
label: {
text: '测试',
font: '20px monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
show: true,
//垂直位置
verticalOrigin: Cesium.VerticalOrigin.BUTTON,
horizontalOrigin: Cesium.HorizontalOrigin.LEFT, //水平位置
//中心位置
pixelOffset: new Cesium.Cartesian2(-20, 60),
disableDepthTestDistance: Number.POSITIVE_INFINITY
}
});
}
// test.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10000.0);
// test.label.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10000.0);
test.addProperty("imageClock");
viewer.flyTo(test)
var index = 1,
imgArr = ['acting', 'bicycle', 'bus', 'camera1', 'checkroom', 'clinic', 'crew', 'crew2', 'default1',
'default2', 'default3', 'default4', 'help', 'guard', 'game', 'exit', 'entrance', 'shopping', 'email'
],
imgIndex = 0
direction = 1,
scale = 0.5;
test.imageClock = setInterval(function () {
if (test != null) {
scale += direction * 0.05;
index += 1;
// 切换不同的图片
// if(index % 16 == 0){
// imgIndex = ++imgIndex >= imgArr.length ? 0 : imgIndex
// // console.log(imgArr[imgIndex],imgIndex)
// // test.billboard.image = "./marker/" + imgArr[imgIndex] + ".png";
// }
// 一组图片实现动态图效果
var imgName = index >= 10 ? index : '0' + index
// console.log(imgName)
// 方式1
test.billboard.image = "./gifs/new_spotd12_gif_" + imgName + ".png";
// test2.billboard.image = "./gifs/new_spotd12_gif_" + imgName + ".png";
// 方式2
// test.billboard.eyeOffset = new Cesium.Cartesian3( 0, scale, 0)
// 方式3
// test.billboard.scale = scale;
// 放大缩小
// if (index > 16) {
// direction = direction == 1 ? -1 : 1
// index = 1;
// }
if (index >= 25) {
index = 1
}
}
// }, 60);
}, 100);
</script>
</body>
</html>
效果
图片素材
链接：https://pan.baidu.com/s/191a0bNEcqGXgQR-jgMh6hA
提取码：djwi
复制这段内容后打开百度网盘手机App，操作更方便哦