分享给大家一个通过前端去改变entity面颜色的示例,使其有一个类似呼吸灯的效果,看上去逼格更高一些。同样该示例适用于点和线
这个示例仅适用于同颜色的呼吸效果
产品的配置方面已经在前面的文章讲过了,这里就不再叙述了(文末附有之前博客的链接)
主要思路
主要是通过entity的逐层叠加/逐层删减来实现的效果,那有小伙伴就要说了,直接更改entity的color不就好了?我也尝试过直接更改color,但实际效果并不理想,每次更换color的时候都会出现一次闪烁的情况,所以在此基础上做了一些改动。
过程讲解
首先需要定义几个全局变量:透明度a,entity的ID,透明度变化次数
var a = 0.0, //初始透明度a,
num =0, //初始entity ID为0
changnum = 5; //变化次数
然后在场景中绘制一个entity的polygon,赋予颜色。为了是颜色作为一个变量,所以最好是单独写在外面。
var color = new Cesium.Color(0.0, 0.0, 1.0, a); //设置为蓝色,透明度为变量
entity = viewer.entities.add({
id: num,
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
115.00769546779887, 39.00948953601627,
115.01061031637882, 39.01040583624218,
115.01127283211821, 39.00875368295838,
115.00837238000206, 39.0079302039017
]),
height: 105,
material: color,
outline: true,
outlineColor: Cesium.Color.RED,
outlineWidth: 50
}
});
接下来就是改变颜色的function了,为了让他每隔一段时间改变一次,采用定时器的功能
function ChangeColoradd(viewer,color){
var timesRun = 0;
var interval=window.setInterval(function()
{
timesRun += 1;
changeadd(viewer,color);
if(timesRun === changnum) { //执行十次,透明度由0-1
clearInterval(interval);
}
}, 500); //每隔0.5s执行一次
}
然后执行定时器里面的function,开始叠加entity,每叠加一层,透明度就变高一些
function changeadd(viewer,color) {
a += 0.1; //每次透明度增加0.1
color.alpha=a;
entity = viewer.entities.add({
id: num+1.0, //新添加entity对应的id累计+1
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
115.00769546779887, 39.00948953601627,
115.01061031637882, 39.01040583624218,
115.01127283211821, 39.00875368295838,
115.00837238000206, 39.0079302039017
]),
height: 105,
material: color,
outline: true,
outlineColor: Cesium.Color.RED,
outlineWidth: 50
}
});
}
这样一来,透明度由0-0.5的效果就做好了,如果想要实现由0-0.5再从0.5-0的效果,写一个if语句,然后一个一个entity地删除就搞定了。
完整代码
var a = 0.0,num =0; //初始透明度a,初始entity ID为0
var changnum = 5; //变化次数
function onload(Cesium) {
var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
scene.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(115.000225758308630, 39.009956534844858, 500),
orientation: {
heading: 1.705646,
pitch: -0.499956,
roll: 0.000000
}
});
var color = new Cesium.Color(0.0, 0.0, 1.0, a);
entity = viewer.entities.add({
id: num,
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
115.00769546779887, 39.00948953601627,
115.01061031637882, 39.01040583624218,
115.01127283211821, 39.00875368295838,
115.00837238000206, 39.0079302039017
]),
height: 105,
material: color,
outline: true,
outlineColor: Cesium.Color.RED,
outlineWidth: 50
}
});
ChangeColoradd(viewer,color);
}
function ChangeColoradd(viewer,color){
var timesRun = 0;
var interval=window.setInterval(function()
{
timesRun += 1;
changeadd(viewer,color);
if(timesRun === changnum) { //执行十次,透明度由0-1
clearInterval(interval);
}
}, 500); //每隔0.5s执行一次
}
function changeadd(viewer,color) {
a += 0.1;
color.alpha=a;
console.log(color);
entity = viewer.entities.add({
id: num+1.0,
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
115.00769546779887, 39.00948953601627,
115.01061031637882, 39.01040583624218,
115.01127283211821, 39.00875368295838,
115.00837238000206, 39.0079302039017
]),
height: 105,
material: color,
outline: true,
outlineColor: Cesium.Color.RED,
outlineWidth: 50
}
});
num += 1.0;
console.log(num);
if(num==changnum){
console.log(viewer);
ChangeColorremove(viewer,color);
}
}
function ChangeColorremove(viewer){
var timesRun = 0;
var interval=window.setInterval(function()
{
timesRun += 1;
changeremove(viewer);
if(timesRun === changnum) { //执行十次,透明度由1-0
clearInterval(interval);
}
}, 500);
}
function changeremove(viewer) {
viewer.entities.removeById(num);
num = num -1;
}