mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-07-04 15:17:36 +00:00
1274 lines
42 KiB
HTML
1274 lines
42 KiB
HTML
<!--********************************************************************
|
||
* by jiawanlong
|
||
*********************************************************************-->
|
||
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css" />
|
||
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
||
<script src="./cesium.map.min.js"></script>
|
||
<script src="./CircleScanSystem.js"></script>
|
||
<script src="./CircleWaveMaterialProperty.js"></script>
|
||
<script src="./DynamicWallMaterialProperty.js"></script>
|
||
<script src="./popup.js"></script>
|
||
<script src="./latlng.js"></script>
|
||
<style>
|
||
.cesium-viewer-bottom,
|
||
.cesium-viewer-animationContainer,
|
||
.cesium-animation-theme,
|
||
.cesium-viewer-timelineContainer {
|
||
display: none;
|
||
}
|
||
|
||
.bx-popup-ctn2 {
|
||
position: absolute;
|
||
z-index: 999;
|
||
color: #fff;
|
||
/* margin: -80px 0 0; */
|
||
margin: 0 0 0 0;
|
||
transform: translate(-50%, -100%);
|
||
}
|
||
|
||
.bx-popup-ctn2 .divpoint-wrap {
|
||
padding: 0;
|
||
width: max-content;
|
||
}
|
||
|
||
.bx-popup-ctn2 .divpoint-center {
|
||
background: linear-gradient(45deg,
|
||
#4f869d,
|
||
rgba(18, 93, 120, 0.65),
|
||
40%,
|
||
rgba(30, 127, 162, 0.65));
|
||
border: 1px solid #40aee2;
|
||
border-radius: 5px;
|
||
box-shadow: 0 0 10px 2px #29baf1;
|
||
}
|
||
|
||
.bx-popup-ctn2 .bx-popup-tip {
|
||
width: 17px;
|
||
background: #fff;
|
||
height: 17px;
|
||
padding: 1px;
|
||
margin: -10px auto 0;
|
||
-webkit-transform: rotate(45deg);
|
||
-moz-transform: rotate(45deg);
|
||
-ms-transform: rotate(45deg);
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.bx-popup-ctn2 .bx-popup-header-ctn {
|
||
background: rgba(0, 173, 255, 0.49);
|
||
color: #fff;
|
||
font-size: 15px;
|
||
padding: 4px;
|
||
}
|
||
|
||
.bx-popup-ctn2 .bx-popup-close {
|
||
position: absolute;
|
||
top: 4px;
|
||
right: 2px;
|
||
width: 26px;
|
||
height: 26px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.bx-popup-ctn2 .bx-popup-content-ctn {
|
||
padding: 10px;
|
||
}
|
||
|
||
.bx-popup-ctn2 .directional {
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 2px;
|
||
height: 40px;
|
||
background-color: #28bbf0;
|
||
transform: none;
|
||
margin: 0 0 0px 50%;
|
||
}
|
||
|
||
.bx-popup-ctn2 .divpoint-border {
|
||
transition: 0.3s ease-in;
|
||
background: linear-gradient(0, #8cdee5 2px, #8cdee5 0) no-repeat,
|
||
linear-gradient(-90deg, #8cdee5 2px, #8cdee5 0) no-repeat,
|
||
linear-gradient(-180deg, #8cdee5 2px, #8cdee5 0) no-repeat,
|
||
linear-gradient(-270deg, #8cdee5 2px, #8cdee5 0) no-repeat;
|
||
background-size: 0 2px, 2px 0, 0 2px, 2px 0;
|
||
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
|
||
}
|
||
|
||
.bx-popup-ctn2 .divpoint-border:hover {
|
||
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
|
||
}
|
||
</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>
|
||
<script type="text/javascript">
|
||
Cesium.Ion.defaultAccessToken =
|
||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjM2EzNGJmNy02N2RmLTQ0MDMtYjI2MS1hZTJiMTIwZGYwMTYiLCJpZCI6MzA0MzEyLCJpYXQiOjE3NDc3MjM3MTV9.ePQNhuoVuDsi_z00lTm5W26wyW1Adcr1AWetGM6WSXI";
|
||
const viewer = new Cesium.Viewer("map", {
|
||
animation: true, //是否创建动画小器件，左下角仪表
|
||
|
||
baseLayerPicker: false, //是否显示图层选择器
|
||
fullscreenButton: false, //是否显示全屏按钮
|
||
geocoder: false, //是否显示geocoder小器件，右上角查询按钮
|
||
homeButton: false, //是否显示Home按钮
|
||
infoBox: false, //是否显示信息框
|
||
sceneModePicker: false, //是否显示3D/2D选择器
|
||
selectionIndicator: false, //是否显示选取指示器组件
|
||
timeline: true, //是否显示时间轴
|
||
navigationHelpButton: false, //是否显示右上角的帮助按钮
|
||
scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
|
||
clock: new Cesium.Clock(), //用于控制当前时间的时钟对象
|
||
selectedImageryProviderViewModel: undefined, //当前图像图层的显示模型，仅baseLayerPicker设为true有意义
|
||
imageryProviderViewModels:
|
||
Cesium.createDefaultImageryProviderViewModels(), //可供BaseLayerPicker选择的图像图层ProviderViewModel数组
|
||
selectedTerrainProviderViewModel: undefined, //当前地形图层的显示模型，仅baseLayerPicker设为true有意义
|
||
terrainProviderViewModels:
|
||
Cesium.createDefaultTerrainProviderViewModels(), //可供BaseLayerPicker选择的地形图层ProviderViewModel数组
|
||
fullscreenElement: document.body, //全屏时渲染的HTML元素,
|
||
useDefaultRenderLoop: true, //如果需要控制渲染循环，则设为true
|
||
targetFrameRate: undefined, //使用默认render loop时的帧率
|
||
showRenderLoopErrors: false, //如果设为true，将在一个HTML面板中显示错误信息
|
||
automaticallyTrackDataSourceClocks: true, //自动追踪最近添加的数据源的时钟设置
|
||
|
||
contextOptions: {
|
||
// 支持html2cavas截图
|
||
webgl: {
|
||
preserveDrawingBuffer: true, // 设置为 true 来启用
|
||
},
|
||
},
|
||
|
||
//传递给Scene对象的上下文参数（scene.options）
|
||
sceneMode: Cesium.SceneMode.SCENE3D, //初始场景模式
|
||
mapProjection: new Cesium.WebMercatorProjection(), //地图投影体系
|
||
dataSources: new Cesium.DataSourceCollection(),
|
||
});
|
||
|
||
// 清除默认底图
|
||
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
|
||
|
||
// 清除默认地形
|
||
viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider({});
|
||
|
||
// 加载单张图片
|
||
var imageryProvider = new Cesium.SingleTileImageryProvider({
|
||
url: "./world_b.jpg",
|
||
id: "1",
|
||
});
|
||
viewer.imageryLayers.addImageryProvider(imageryProvider);
|
||
|
||
var options = {
|
||
crs: "WGS84", // 使用84坐标系，默认为：GCJ02
|
||
style: 4,
|
||
};
|
||
viewer.imageryLayers.add(
|
||
new Cesium.ImageryLayer(new Cesium.TencentImageryProvider(options))
|
||
);
|
||
let tileset;
|
||
|
||
let czmldata = new Cesium.CzmlDataSource.load("./wx.czml");
|
||
viewer.dataSources.add(czmldata);
|
||
viewer.clock.shouldAnimate = true;
|
||
|
||
let inters = 3;
|
||
let lon = 110;
|
||
let quan = 1;
|
||
let timer = setInterval(() => {
|
||
lon = lon - inters;
|
||
if (lon < -180) {
|
||
lon = 180;
|
||
quan = quan + 1;
|
||
}
|
||
if (quan == 2 && lon > 110) {
|
||
clearInterval(timer);
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Cartesian3.fromDegrees(110, 10, 50000000.0),
|
||
orientation: {
|
||
heading: Cesium.Math.toRadians(358.0),
|
||
pitch: Cesium.Math.toRadians(-89.5),
|
||
roll: 0.0,
|
||
},
|
||
easingFunction: Cesium.EasingFunction.LINEAR_NONE,
|
||
complete: () => {
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Cartesian3.fromDegrees(
|
||
121.549708,
|
||
25.036475,
|
||
2662.5
|
||
),
|
||
// easingFunction: Cesium.EasingFunction.LINEAR_NONE,
|
||
duration: 5,
|
||
orientation: {
|
||
heading: Cesium.Math.toRadians(2.8),
|
||
pitch: Cesium.Math.toRadians(-84.8),
|
||
roll: 0.0,
|
||
},
|
||
complete: () => {
|
||
loadsss();
|
||
loadTX();
|
||
loadHuo();
|
||
setTimeout(function () {
|
||
loadFJ();
|
||
loadFJ1();
|
||
loadMsg();
|
||
loadXFC();
|
||
loadXJC();
|
||
}, 1000);
|
||
},
|
||
});
|
||
},
|
||
});
|
||
} else {
|
||
viewer.camera.setView({
|
||
destination: Cesium.Cartesian3.fromDegrees(lon, 10, 50000000.0),
|
||
orientation: {
|
||
heading: Cesium.Math.toRadians(358.0),
|
||
pitch: Cesium.Math.toRadians(-89.5),
|
||
roll: 0.0,
|
||
},
|
||
});
|
||
}
|
||
}, 30);
|
||
// loadsss();
|
||
// loadTX();
|
||
// loadHuo();
|
||
// setTimeout(function () {
|
||
// loadFJ();
|
||
// loadFJ1();
|
||
// loadMsg();
|
||
// loadXFC();
|
||
// loadXJC();
|
||
// }, 1000);
|
||
|
||
function loadTX() {
|
||
var circleScanSystem = new CircleScanSystem(viewer, {
|
||
type: "Circle",
|
||
lon: "121.554532",
|
||
lat: "25.042364",
|
||
radius: 100,
|
||
});
|
||
// var circleScanSystem1 = new CircleScanSystem(viewer, {
|
||
// type: "Circle",
|
||
// lon: "121.552956",
|
||
// lat: "25.037859",
|
||
// radius: 100,
|
||
// });
|
||
var circleScanSystem2 = new CircleScanSystem(viewer, {
|
||
type: "Radar",
|
||
lon: "121.5463",
|
||
lat: "25.041775",
|
||
radius: 200,
|
||
});
|
||
var circleScanSystem2 = new CircleScanSystem(viewer, {
|
||
type: "Radar",
|
||
lon: "121.55649",
|
||
lat: "25.034101",
|
||
radius: 80,
|
||
});
|
||
|
||
viewer.entities.add({
|
||
position: Cesium.Cartesian3.fromDegrees(121.552956, 25.037859, 1),
|
||
ellipse: {
|
||
semiMinorAxis: 150,
|
||
semiMajorAxis: 150,
|
||
height: 10,
|
||
material: new Cesium.CircleWaveMaterialProperty({
|
||
color: "#0858D6",
|
||
duration: 2000,
|
||
gradient: 0,
|
||
count: 3,
|
||
}),
|
||
},
|
||
});
|
||
|
||
viewer.entities.add({
|
||
position: Cesium.Cartesian3.fromDegrees(121.546405, 25.037277, 1),
|
||
ellipse: {
|
||
semiMinorAxis: 150,
|
||
semiMajorAxis: 150,
|
||
height: 10,
|
||
material: new Cesium.CircleWaveMaterialProperty({
|
||
color: "#FFCB33",
|
||
duration: 3000,
|
||
gradient: 0,
|
||
count: 4,
|
||
}),
|
||
},
|
||
});
|
||
|
||
let source = `czm_material czm_getMaterial(czm_materialInput materialInput)
|
||
{
|
||
czm_material material = czm_getDefaultMaterial(materialInput);
|
||
vec2 st = materialInput.st;
|
||
vec4 colorImage = texture(image, vec2(fract((st.s - speed * czm_frameNumber * 0.001)), st.t));
|
||
material.alpha = colorImage.a * color.a;
|
||
material.diffuse = color.rgb;
|
||
return material;
|
||
}`;
|
||
|
||
let material = new Cesium.Material({
|
||
fabric: {
|
||
uniforms: {
|
||
color: Cesium.Color.fromCssColorString("#7ffeff"),
|
||
image: "./line1.png",
|
||
speed: 10,
|
||
},
|
||
source: source,
|
||
},
|
||
translucent: function () {
|
||
return true;
|
||
},
|
||
});
|
||
|
||
var appearance = new Cesium.PolylineMaterialAppearance();
|
||
appearance.material = material;
|
||
|
||
viewer.scene.primitives.add(
|
||
new Cesium.Primitive({
|
||
geometryInstances: new Cesium.GeometryInstance({
|
||
geometry: new Cesium.PolylineGeometry({
|
||
positions: Cesium.Cartesian3.fromDegreesArray([
|
||
121.54383710651683, 25.04158767318846, 121.54886660576454,
|
||
25.041520778338935, 121.5489302661648, 25.037809764195416,
|
||
121.55763292042423, 25.037610190383617,
|
||
]),
|
||
width: 5.0,
|
||
}),
|
||
}),
|
||
appearance: appearance,
|
||
})
|
||
);
|
||
viewer.scene.primitives.add(
|
||
new Cesium.Primitive({
|
||
geometryInstances: new Cesium.GeometryInstance({
|
||
geometry: new Cesium.PolylineGeometry({
|
||
positions: Cesium.Cartesian3.fromDegreesArray([
|
||
121.55375466873483, 25.044150811019648, 121.55544465416511,
|
||
25.037715002796432, 121.54867305622793, 25.037870016863494,
|
||
121.54871015658512, 25.033391988086763,
|
||
]),
|
||
width: 5.0,
|
||
}),
|
||
}),
|
||
appearance: appearance,
|
||
})
|
||
);
|
||
|
||
viewer.scene.primitives.add(
|
||
new Cesium.Primitive({
|
||
geometryInstances: new Cesium.GeometryInstance({
|
||
geometry: new Cesium.PolylineGeometry({
|
||
positions: Cesium.Cartesian3.fromDegreesArray([
|
||
121.54896133676533, 25.044688605691732, 121.54907493228905,
|
||
25.041491821748266, 121.55760945852529, 25.041291233041818,
|
||
121.55747389009491, 25.033084480003765, 121.543669229817,
|
||
25.033348047963145, 121.54380690184257, 25.038091540100325,
|
||
121.54874670371714, 25.03798076751336, 121.54905974002901,
|
||
25.044688605691732, 121.54652610721564, 25.04506985487869,
|
||
121.54386854531765, 25.044935266844632, 121.54368432924542,
|
||
25.03824665858879, 121.5575974570097, 25.037847869365393,
|
||
121.55782052058595, 25.04495769594847, 121.55375546574658,
|
||
25.044262809177837, 121.54905987101426, 25.044733445131712,
|
||
]),
|
||
width: 5.0,
|
||
}),
|
||
}),
|
||
appearance: appearance,
|
||
})
|
||
);
|
||
|
||
viewer.scene.primitives.add(
|
||
new Cesium.Primitive({
|
||
geometryInstances: new Cesium.GeometryInstance({
|
||
geometry: new Cesium.PolylineGeometry({
|
||
positions: Cesium.Cartesian3.fromDegreesArray([
|
||
121.55247102172734, 25.033294114977295, 121.5525021244456,
|
||
25.036184694941213, 121.5511111493363, 25.037979511647478,
|
||
121.54379246879625, 25.038023901030698, 121.54384621066026,
|
||
25.041653508137443, 121.5461551006216, 25.041497151878872,
|
||
121.54599566446967, 25.0379573182758, 121.55297123215576,
|
||
25.03793512578399, 121.55298088865737, 25.04145248665732,
|
||
121.55296365188275, 25.044138703413196,
|
||
]),
|
||
width: 5.0,
|
||
}),
|
||
}),
|
||
appearance: appearance,
|
||
})
|
||
);
|
||
|
||
viewer.scene.primitives.add(
|
||
new Cesium.Primitive({
|
||
geometryInstances: new Cesium.GeometryInstance({
|
||
geometry: new Cesium.PolylineGeometry({
|
||
positions: Cesium.Cartesian3.fromDegreesArray([
|
||
121.54375455026866, 25.036029857442244, 121.54610032336575,
|
||
25.035985626035824, 121.54598728823271, 25.03340416800252,
|
||
121.54881491346185, 25.033382155659254, 121.54878833220863,
|
||
25.035565602229056, 121.55252458735305, 25.035344663858893,
|
||
121.55250253652764, 25.036361704627197, 121.55299202722222,
|
||
25.036605184507167, 121.55292156212147, 25.037668884495375,
|
||
121.55566169439066, 25.0375801655385, 121.55560211090364,
|
||
25.035499311540576, 121.55739387018264, 25.033206088198455,
|
||
]),
|
||
width: 5.0,
|
||
}),
|
||
}),
|
||
appearance: appearance,
|
||
})
|
||
);
|
||
|
||
let data = [
|
||
[121.5435972916668, 25.03335124407222],
|
||
[121.55758689992729, 25.03305850196061],
|
||
[121.5578765706079, 25.045082938309875],
|
||
[121.55308216929683, 25.044389044803737],
|
||
[121.54911574643842, 25.04483902108565],
|
||
[121.54648299411446, 25.045158015241427],
|
||
[121.54397513270857, 25.04493282041925],
|
||
[121.54359717389292, 25.033369546587437],
|
||
];
|
||
let coor = Array.prototype.concat.apply([], data);
|
||
let datasouce = map_common_addDatasouce("wall");
|
||
|
||
datasouce.entities.add({
|
||
wall: {
|
||
positions: Cesium.Cartesian3.fromDegreesArray(coor),
|
||
positions: Cesium.Cartesian3.fromDegreesArray(coor),
|
||
maximumHeights: new Array(data.length).fill(50),
|
||
minimunHeights: new Array(data.length).fill(0),
|
||
|
||
// 动态
|
||
material: new Cesium.DynamicWallMaterialProperty({
|
||
trailImage: "./wall.png",
|
||
color: Cesium.Color.CYAN,
|
||
duration: 1500,
|
||
}),
|
||
},
|
||
});
|
||
}
|
||
|
||
function loadFJ() {
|
||
let start = new Cesium.JulianDate.fromDate(new Date());
|
||
|
||
// 开始时间 cesium用的JulianDate:代表天文朱利安时间,用的是世界协调时,比北京时间晚8个小时, 加上东8时，就是当前的真正时间
|
||
start = Cesium.JulianDate.addHours(start, 1, new Cesium.JulianDate());
|
||
const center = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
90,
|
||
new Cesium.JulianDate()
|
||
);
|
||
const center2 = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
180,
|
||
new Cesium.JulianDate()
|
||
);
|
||
const center3 = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
270,
|
||
new Cesium.JulianDate()
|
||
);
|
||
const stop = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
360,
|
||
new Cesium.JulianDate()
|
||
);
|
||
|
||
// 设置时钟范围
|
||
viewer.clock.startTime = start.clone();
|
||
viewer.clock.stopTime = stop.clone();
|
||
viewer.clock.currentTime = start.clone();
|
||
|
||
// 循环结束时后续动作
|
||
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
|
||
|
||
// 时间速率控制速度，时间调快多少倍，比如原来用时360秒，调整10倍后，现在用时36秒
|
||
viewer.clock.multiplier = 10;
|
||
//给下方时间线设置边界
|
||
viewer.timeline.zoomTo(start, stop);
|
||
|
||
const position = new Cesium.SampledPositionProperty();
|
||
|
||
const startPos = Cesium.Cartesian3.fromDegrees(
|
||
121.54502359550423,
|
||
25.04103506115554,
|
||
300
|
||
);
|
||
const centerPos = Cesium.Cartesian3.fromDegrees(
|
||
121.55653842563282,
|
||
25.040757514098885,
|
||
300
|
||
);
|
||
const centerPos2 = Cesium.Cartesian3.fromDegrees(
|
||
121.55626812445513,
|
||
25.033279833487114,
|
||
300
|
||
);
|
||
const centerPos3 = Cesium.Cartesian3.fromDegrees(
|
||
121.54412259158227,
|
||
25.0335247429108,
|
||
300
|
||
);
|
||
const endPos = Cesium.Cartesian3.fromDegrees(
|
||
121.54502359550423,
|
||
25.04103506115554,
|
||
300
|
||
);
|
||
|
||
position.addSample(start, startPos);
|
||
position.addSample(center, centerPos);
|
||
position.addSample(center2, centerPos2);
|
||
position.addSample(center3, centerPos3);
|
||
position.addSample(stop, endPos);
|
||
|
||
const entity = viewer.entities.add({
|
||
// 将实体availability设置为与模拟时间相同的时间间隔。
|
||
availability: new Cesium.TimeIntervalCollection([
|
||
new Cesium.TimeInterval({
|
||
start: start,
|
||
stop: stop,
|
||
}),
|
||
]),
|
||
position: position, // 计算实体位置属性
|
||
orientation: new Cesium.VelocityOrientationProperty(position),
|
||
model: {
|
||
uri: "missile/scene.gltf",
|
||
scale: 10,
|
||
minimumPixelSize: 32,
|
||
},
|
||
|
||
// 路径
|
||
path: {
|
||
show: false,
|
||
resolution: 1,
|
||
material: new Cesium.PolylineGlowMaterialProperty({
|
||
glowPower: 0.3,
|
||
color: Cesium.Color.BLUE,
|
||
}),
|
||
width: 5,
|
||
},
|
||
});
|
||
}
|
||
function loadFJ1() {
|
||
let start = new Cesium.JulianDate.fromDate(new Date());
|
||
|
||
// 开始时间 cesium用的JulianDate:代表天文朱利安时间,用的是世界协调时,比北京时间晚8个小时, 加上东8时，就是当前的真正时间
|
||
start = Cesium.JulianDate.addHours(start, 1, new Cesium.JulianDate());
|
||
const center = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
90,
|
||
new Cesium.JulianDate()
|
||
);
|
||
const center2 = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
180,
|
||
new Cesium.JulianDate()
|
||
);
|
||
const center3 = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
270,
|
||
new Cesium.JulianDate()
|
||
);
|
||
const stop = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
360,
|
||
new Cesium.JulianDate()
|
||
);
|
||
|
||
// 设置时钟范围
|
||
viewer.clock.startTime = start.clone();
|
||
viewer.clock.stopTime = stop.clone();
|
||
viewer.clock.currentTime = start.clone();
|
||
|
||
// 循环结束时后续动作
|
||
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
|
||
|
||
// 时间速率控制速度，时间调快多少倍，比如原来用时360秒，调整10倍后，现在用时36秒
|
||
viewer.clock.multiplier = 10;
|
||
//给下方时间线设置边界
|
||
viewer.timeline.zoomTo(start, stop);
|
||
|
||
const position = new Cesium.SampledPositionProperty();
|
||
|
||
const startPos = Cesium.Cartesian3.fromDegrees(
|
||
121.54502359550423,
|
||
25.04103506115554,
|
||
210
|
||
);
|
||
const centerPos = Cesium.Cartesian3.fromDegrees(
|
||
121.55653842563282,
|
||
25.040757514098885,
|
||
210
|
||
);
|
||
const centerPos2 = Cesium.Cartesian3.fromDegrees(
|
||
121.55626812445513,
|
||
25.033279833487114,
|
||
210
|
||
);
|
||
const centerPos3 = Cesium.Cartesian3.fromDegrees(
|
||
121.54412259158227,
|
||
25.0335247429108,
|
||
210
|
||
);
|
||
const endPos = Cesium.Cartesian3.fromDegrees(
|
||
121.54502359550423,
|
||
25.04103506115554,
|
||
210
|
||
);
|
||
|
||
position.addSample(start, startPos);
|
||
position.addSample(center, centerPos);
|
||
position.addSample(center2, centerPos2);
|
||
position.addSample(center3, centerPos3);
|
||
position.addSample(stop, endPos);
|
||
|
||
const entity = viewer.entities.add({
|
||
// 将实体availability设置为与模拟时间相同的时间间隔。
|
||
availability: new Cesium.TimeIntervalCollection([
|
||
new Cesium.TimeInterval({
|
||
start: start,
|
||
stop: stop,
|
||
}),
|
||
]),
|
||
position: position, // 计算实体位置属性
|
||
orientation: new Cesium.VelocityOrientationProperty(position),
|
||
// model: {
|
||
// uri: 'missile/scene.gltf',
|
||
// scale: 10,
|
||
// minimumPixelSize: 32
|
||
// },
|
||
cylinder: {
|
||
material: Cesium.Color.fromCssColorString("rgba(255,240,0, 0.35)"),
|
||
length: 200, //圆柱体的长度
|
||
topRadius: 0, //顶部半径
|
||
bottomRadius: 70,
|
||
},
|
||
// 路径
|
||
path: {
|
||
show: false,
|
||
resolution: 1,
|
||
material: new Cesium.PolylineGlowMaterialProperty({
|
||
glowPower: 0.3,
|
||
color: Cesium.Color.BLUE,
|
||
}),
|
||
width: 5,
|
||
},
|
||
});
|
||
}
|
||
function loadXFC() {
|
||
let start = new Cesium.JulianDate.fromDate(new Date());
|
||
|
||
start = Cesium.JulianDate.addHours(start, 1, new Cesium.JulianDate());
|
||
const center = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
90,
|
||
new Cesium.JulianDate()
|
||
);
|
||
const center2 = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
180,
|
||
new Cesium.JulianDate()
|
||
);
|
||
const center3 = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
270,
|
||
new Cesium.JulianDate()
|
||
);
|
||
const stop = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
360,
|
||
new Cesium.JulianDate()
|
||
);
|
||
|
||
// 设置时钟范围
|
||
viewer.clock.startTime = start.clone();
|
||
viewer.clock.stopTime = stop.clone();
|
||
viewer.clock.currentTime = start.clone();
|
||
|
||
// 循环结束时后续动作
|
||
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
|
||
|
||
// 时间速率控制速度，时间调快多少倍，比如原来用时360秒，调整10倍后，现在用时36秒
|
||
viewer.clock.multiplier = 20;
|
||
//给下方时间线设置边界
|
||
viewer.timeline.zoomTo(start, stop);
|
||
|
||
const position = new Cesium.SampledPositionProperty();
|
||
|
||
const startPos = Cesium.Cartesian3.fromDegrees(
|
||
121.54883989579417,
|
||
25.04435068135976,
|
||
1
|
||
);
|
||
const centerPos = Cesium.Cartesian3.fromDegrees(
|
||
121.54891310254465,
|
||
25.041764022763047,
|
||
1
|
||
);
|
||
const centerPos2 = Cesium.Cartesian3.fromDegrees(
|
||
121.54886429804492,
|
||
25.039707921882993,
|
||
1
|
||
);
|
||
const centerPos3 = Cesium.Cartesian3.fromDegrees(
|
||
121.54886429804492,
|
||
25.037696004860265,
|
||
1
|
||
);
|
||
const endPos = Cesium.Cartesian3.fromDegrees(
|
||
121.55147533881802,
|
||
25.03767389569815,
|
||
1
|
||
);
|
||
|
||
position.addSample(start, startPos);
|
||
position.addSample(center, centerPos);
|
||
position.addSample(center2, centerPos2);
|
||
position.addSample(center3, centerPos3);
|
||
position.addSample(stop, endPos);
|
||
|
||
const entity = viewer.entities.add({
|
||
availability: new Cesium.TimeIntervalCollection([
|
||
new Cesium.TimeInterval({
|
||
start: start,
|
||
stop: stop,
|
||
}),
|
||
]),
|
||
position: position, // 计算实体位置属性
|
||
orientation: new Cesium.VelocityOrientationProperty(position),
|
||
model: {
|
||
uri: "./xiaofangche.gltf",
|
||
scale: 10,
|
||
minimumPixelSize: 32,
|
||
},
|
||
|
||
path: {
|
||
show: false,
|
||
},
|
||
});
|
||
}
|
||
function loadXJC() {
|
||
let start = new Cesium.JulianDate.fromDate(new Date());
|
||
|
||
start = Cesium.JulianDate.addHours(start, 1, new Cesium.JulianDate());
|
||
const center = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
120,
|
||
new Cesium.JulianDate()
|
||
);
|
||
const center2 = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
240,
|
||
new Cesium.JulianDate()
|
||
);
|
||
const stop = Cesium.JulianDate.addSeconds(
|
||
start,
|
||
360,
|
||
new Cesium.JulianDate()
|
||
);
|
||
|
||
// 设置时钟范围
|
||
viewer.clock.startTime = start.clone();
|
||
viewer.clock.stopTime = stop.clone();
|
||
viewer.clock.currentTime = start.clone();
|
||
|
||
// 循环结束时后续动作
|
||
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
|
||
|
||
// 时间速率控制速度，时间调快多少倍，比如原来用时360秒，调整10倍后，现在用时36秒
|
||
viewer.clock.multiplier = 20;
|
||
//给下方时间线设置边界
|
||
viewer.timeline.zoomTo(start, stop);
|
||
|
||
const position = new Cesium.SampledPositionProperty();
|
||
|
||
const startPos = Cesium.Cartesian3.fromDegrees(
|
||
121.54884167619042,
|
||
25.033273079716622,
|
||
1
|
||
);
|
||
const centerPos = Cesium.Cartesian3.fromDegrees(
|
||
121.54859722416842,
|
||
25.037776601420433,
|
||
1
|
||
);
|
||
const centerPos2 = Cesium.Cartesian3.fromDegrees(
|
||
121.55544188079375,
|
||
25.037721231255958,
|
||
1
|
||
);
|
||
|
||
const endPos = Cesium.Cartesian3.fromDegrees(
|
||
121.55391405565354,
|
||
25.043590329597393,
|
||
1
|
||
);
|
||
|
||
position.addSample(start, startPos);
|
||
position.addSample(center, centerPos);
|
||
position.addSample(center2, centerPos2);
|
||
position.addSample(stop, endPos);
|
||
|
||
const entity = viewer.entities.add({
|
||
availability: new Cesium.TimeIntervalCollection([
|
||
new Cesium.TimeInterval({
|
||
start: start,
|
||
stop: stop,
|
||
}),
|
||
]),
|
||
position: position, // 计算实体位置属性
|
||
orientation: new Cesium.VelocityOrientationProperty(position),
|
||
model: {
|
||
uri: "./wajueji.glb",
|
||
scale: 10,
|
||
minimumPixelSize: 32,
|
||
},
|
||
|
||
path: {
|
||
show: false,
|
||
},
|
||
});
|
||
}
|
||
function loadMsg() {
|
||
var popup = new Popup({
|
||
viewer: viewer,
|
||
className: "bx-popup-ctn2",
|
||
});
|
||
|
||
popup.add({
|
||
geometry: Cesium.Cartesian3.fromDegrees(121.551034, 25.036803, 30),
|
||
content: {
|
||
header: "事件提醒",
|
||
content: `
|
||
<div><span>事件名称：</span><span>沃尔玛发生火灾</span></div>
|
||
<div><span>监控编号：</span><span>${parseInt(
|
||
Math.random() * 100
|
||
)}</span></div>
|
||
<div><span>发生时间：</span><span>2024-08-03 12:00:33</span></div>
|
||
<div><span>火灾等级：</span><span>一般</span></div>
|
||
`,
|
||
},
|
||
isclose: true,
|
||
});
|
||
|
||
popup.add({
|
||
// lon: "121.554532",
|
||
// lat: "25.042364",
|
||
geometry: Cesium.Cartesian3.fromDegrees(121.554532, 25.042364, 30),
|
||
content: {
|
||
header: "事件提醒",
|
||
content: `
|
||
<div><span>事件名称：</span><span>仁和路发生打架斗殴</span></div>
|
||
<div><span>监控编号：</span><span>${parseInt(
|
||
Math.random() * 100
|
||
)}</span></div>
|
||
<div><span>发生时间：</span><span>2024-08-03 14:00:33</span></div>
|
||
<div><span>案件等级：</span><span>紧急！</span></div>
|
||
`,
|
||
},
|
||
isclose: true,
|
||
});
|
||
}
|
||
|
||
function loadHuo() {
|
||
//火焰特效
|
||
class FireEffect {
|
||
constructor(viewer, obj) {
|
||
this.viewer = viewer;
|
||
this.viewModel = {
|
||
emissionRate: 5,
|
||
gravity: 0.0, //设置重力参数
|
||
minimumParticleLife: 1,
|
||
maximumParticleLife: 6,
|
||
minimumSpeed: 1.0, //粒子发射的最小速度
|
||
maximumSpeed: 4.0, //粒子发射的最大速度
|
||
startScale: 0.0,
|
||
endScale: 10.0,
|
||
particleSize: 25.0,
|
||
};
|
||
this.emitterModelMatrix = new Cesium.Matrix4();
|
||
this.translation = new Cesium.Cartesian3();
|
||
this.rotation = new Cesium.Quaternion();
|
||
this.hpr = new Cesium.HeadingPitchRoll();
|
||
this.trs = new Cesium.TranslationRotationScale();
|
||
this.scene = this.viewer.scene;
|
||
this.particleSystem = "";
|
||
this.entity = this.viewer.entities.add({
|
||
//选择粒子放置的坐标
|
||
position: Cesium.Cartesian3.fromDegrees(obj.lng, obj.lat),
|
||
});
|
||
|
||
this.init();
|
||
}
|
||
|
||
init() {
|
||
const _this = this;
|
||
this.viewer.clock.shouldAnimate = true;
|
||
this.viewer.scene.globe.depthTestAgainstTerrain = false;
|
||
// this.viewer.trackedEntity = this.entity;
|
||
var particleSystem = this.scene.primitives.add(
|
||
new Cesium.ParticleSystem({
|
||
image: "./fire.png", //生成所需粒子的图片路径
|
||
//粒子在生命周期开始时的颜色
|
||
startColor: new Cesium.Color(1, 1, 1, 1),
|
||
//粒子在生命周期结束时的颜色
|
||
endColor: new Cesium.Color(0.5, 0, 0, 0),
|
||
//粒子在生命周期开始时初始比例
|
||
startScale: _this.viewModel.startScale,
|
||
//粒子在生命周期结束时比例
|
||
endScale: _this.viewModel.endScale,
|
||
//粒子发射的最小速度
|
||
minimumParticleLife: _this.viewModel.minimumParticleLife,
|
||
//粒子发射的最大速度
|
||
maximumParticleLife: _this.viewModel.maximumParticleLife,
|
||
//粒子质量的最小界限
|
||
minimumSpeed: _this.viewModel.minimumSpeed,
|
||
//粒子质量的最大界限
|
||
maximumSpeed: _this.viewModel.maximumSpeed,
|
||
//以像素为单位缩放粒子图像尺寸
|
||
imageSize: new Cesium.Cartesian2(
|
||
_this.viewModel.particleSize,
|
||
_this.viewModel.particleSize
|
||
),
|
||
//每秒发射的粒子数
|
||
emissionRate: _this.viewModel.emissionRate,
|
||
//粒子系统发射粒子的时间（秒）
|
||
lifetime: 16.0,
|
||
//粒子系统是否应该在完成时循环其爆发
|
||
loop: true,
|
||
//设置粒子的大小是否以米或像素为单位
|
||
sizeInMeters: true,
|
||
//系统的粒子发射器
|
||
emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)), //BoxEmitter 盒形发射器，ConeEmitter 锥形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器
|
||
})
|
||
);
|
||
this.particleSystem = particleSystem;
|
||
this.preUpdateEvent();
|
||
}
|
||
|
||
//场景渲染事件
|
||
preUpdateEvent() {
|
||
let _this = this;
|
||
this.viewer.scene.preUpdate.addEventListener(function (
|
||
scene,
|
||
time
|
||
) {
|
||
//发射器地理位置
|
||
_this.particleSystem.modelMatrix = _this.computeModelMatrix(
|
||
_this.entity,
|
||
time
|
||
);
|
||
//发射器局部位置
|
||
_this.particleSystem.emitterModelMatrix =
|
||
_this.computeEmitterModelMatrix();
|
||
// 将发射器旋转
|
||
if (_this.viewModel.spin) {
|
||
_this.viewModel.heading += 1.0;
|
||
_this.viewModel.pitch += 1.0;
|
||
_this.viewModel.roll += 1.0;
|
||
}
|
||
});
|
||
}
|
||
|
||
computeModelMatrix(entity, time) {
|
||
return entity.computeModelMatrix(time, new Cesium.Matrix4());
|
||
}
|
||
|
||
computeEmitterModelMatrix() {
|
||
this.hpr = Cesium.HeadingPitchRoll.fromDegrees(
|
||
0.0,
|
||
0.0,
|
||
0.0,
|
||
this.hpr
|
||
);
|
||
this.trs.translation = Cesium.Cartesian3.fromElements(
|
||
-4.0,
|
||
0.0,
|
||
1.4,
|
||
this.translation
|
||
);
|
||
this.trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(
|
||
this.hpr,
|
||
this.rotation
|
||
);
|
||
|
||
return Cesium.Matrix4.fromTranslationRotationScale(
|
||
this.trs,
|
||
this.emitterModelMatrix
|
||
);
|
||
}
|
||
|
||
removeEvent() {
|
||
this.viewer.scene.preUpdate.removeEventListener(
|
||
this.preUpdateEvent,
|
||
this
|
||
);
|
||
this.emitterModelMatrix = undefined;
|
||
this.translation = undefined;
|
||
this.rotation = undefined;
|
||
this.hpr = undefined;
|
||
this.trs = undefined;
|
||
}
|
||
|
||
//移除粒子特效
|
||
remove() {
|
||
() => {
|
||
return this.removeEvent();
|
||
}; //清除事件
|
||
this.viewer.scene.primitives.remove(this.particleSystem); //删除粒子对象
|
||
this.viewer.entities.remove(this.entity); //删除entity
|
||
}
|
||
}
|
||
class smokeEffect {
|
||
constructor(viewer, obj) {
|
||
this.viewer = viewer;
|
||
this.viewModel = {
|
||
emissionRate: 12,
|
||
gravity: 2.0, //设置重力参数
|
||
minimumParticleLife: 2,
|
||
maximumParticleLife: 2,
|
||
minimumSpeed: 1.0, //粒子发射的最小速度
|
||
maximumSpeed: 2.0, //粒子发射的最大速度
|
||
startScale: 2.0,
|
||
endScale: 11.0,
|
||
particleSize: 7.0,
|
||
};
|
||
this.emitterModelMatrix = new Cesium.Matrix4();
|
||
this.translation = new Cesium.Cartesian3();
|
||
this.rotation = new Cesium.Quaternion();
|
||
this.hpr = new Cesium.HeadingPitchRoll();
|
||
this.trs = new Cesium.TranslationRotationScale();
|
||
this.scene = this.viewer.scene;
|
||
this.particleSystem = "";
|
||
this.entity = this.viewer.entities.add({
|
||
//选择粒子放置的坐标
|
||
position: Cesium.Cartesian3.fromDegrees(obj.lng, obj.lat, 10),
|
||
});
|
||
this.init();
|
||
}
|
||
|
||
init() {
|
||
const _this = this;
|
||
this.viewer.clock.shouldAnimate = true;
|
||
this.viewer.scene.globe.depthTestAgainstTerrain = false;
|
||
// this.viewer.trackedEntity = this.entity;
|
||
var particleSystem = this.scene.primitives.add(
|
||
new Cesium.ParticleSystem({
|
||
image: "./smoke.png", //生成所需粒子的图片路径
|
||
//粒子在生命周期开始时的颜色
|
||
startColor: Cesium.Color.BLACK.withAlpha(0.7),
|
||
//粒子在生命周期结束时的颜色
|
||
endColor: Cesium.Color.WHITE.withAlpha(0.3),
|
||
//粒子在生命周期开始时初始比例
|
||
startScale: _this.viewModel.startScale,
|
||
//粒子在生命周期结束时比例
|
||
endScale: _this.viewModel.endScale,
|
||
//粒子发射的最小速度
|
||
minimumParticleLife: _this.viewModel.minimumParticleLife,
|
||
//粒子发射的最大速度
|
||
maximumParticleLife: _this.viewModel.maximumParticleLife,
|
||
//粒子质量的最小界限
|
||
minimumSpeed: _this.viewModel.minimumSpeed,
|
||
//粒子质量的最大界限
|
||
maximumSpeed: _this.viewModel.maximumSpeed,
|
||
//以像素为单位缩放粒子图像尺寸
|
||
imageSize: new Cesium.Cartesian2(
|
||
_this.viewModel.particleSize,
|
||
_this.viewModel.particleSize
|
||
),
|
||
//每秒发射的粒子数
|
||
emissionRate: _this.viewModel.emissionRate,
|
||
//粒子系统发射粒子的时间（秒）
|
||
lifetime: 161.0,
|
||
//设置粒子的大小是否以米或像素为单位
|
||
sizeInMeters: true,
|
||
//系统的粒子发射器
|
||
emitter: new Cesium.CircleEmitter(2.0), //BoxEmitter 盒形发射器，ConeEmitter 锥形发射器，SphereEmitter 球形发射器，CircleEmitter圆形发射器
|
||
//回调函数，实现各种喷泉、烟雾效果
|
||
updateCallback: (p, dt) => {
|
||
return this.applyGravity(p, dt);
|
||
},
|
||
})
|
||
);
|
||
this.particleSystem = particleSystem;
|
||
this.preUpdateEvent();
|
||
}
|
||
|
||
//场景渲染事件
|
||
preUpdateEvent() {
|
||
let _this = this;
|
||
this.viewer.scene.preUpdate.addEventListener(function (
|
||
scene,
|
||
time
|
||
) {
|
||
//发射器地理位置
|
||
_this.particleSystem.modelMatrix = _this.computeModelMatrix(
|
||
_this.entity,
|
||
time
|
||
);
|
||
//发射器局部位置
|
||
_this.particleSystem.emitterModelMatrix =
|
||
_this.computeEmitterModelMatrix();
|
||
// 将发射器旋转
|
||
if (_this.viewModel.spin) {
|
||
_this.viewModel.heading += 1.0;
|
||
_this.viewModel.pitch += 1.0;
|
||
_this.viewModel.roll += 1.0;
|
||
}
|
||
});
|
||
}
|
||
|
||
computeModelMatrix(entity, time) {
|
||
return entity.computeModelMatrix(time, new Cesium.Matrix4());
|
||
}
|
||
|
||
computeEmitterModelMatrix() {
|
||
this.hpr = Cesium.HeadingPitchRoll.fromDegrees(
|
||
0.0,
|
||
0.0,
|
||
0.0,
|
||
this.hpr
|
||
);
|
||
this.trs.translation = Cesium.Cartesian3.fromElements(
|
||
-4.0,
|
||
0.0,
|
||
1.4,
|
||
this.translation
|
||
);
|
||
this.trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(
|
||
this.hpr,
|
||
this.rotation
|
||
);
|
||
|
||
return Cesium.Matrix4.fromTranslationRotationScale(
|
||
this.trs,
|
||
this.emitterModelMatrix
|
||
);
|
||
}
|
||
|
||
applyGravity(p, dt) {
|
||
var gravityScratch = new Cesium.Cartesian3();
|
||
var position = p.position;
|
||
Cesium.Cartesian3.normalize(position, gravityScratch);
|
||
Cesium.Cartesian3.fromElements(
|
||
20 * dt,
|
||
30 * dt,
|
||
gravityScratch.y * dt,
|
||
gravityScratch
|
||
);
|
||
p.velocity = Cesium.Cartesian3.add(
|
||
p.velocity,
|
||
gravityScratch,
|
||
p.velocity
|
||
);
|
||
}
|
||
|
||
removeEvent() {
|
||
this.viewer.scene.preUpdate.removeEventListener(
|
||
this.preUpdateEvent,
|
||
this
|
||
);
|
||
this.emitterModelMatrix = undefined;
|
||
this.translation = undefined;
|
||
this.rotation = undefined;
|
||
this.hpr = undefined;
|
||
this.trs = undefined;
|
||
}
|
||
|
||
//移除粒子特效
|
||
remove() {
|
||
() => {
|
||
return this.removeEvent();
|
||
}; //清除事件
|
||
this.viewer.scene.primitives.remove(this.particleSystem); //删除粒子对象
|
||
this.viewer.entities.remove(this.entity); //删除entity
|
||
}
|
||
}
|
||
new FireEffect(viewer, {
|
||
lng: 121.55001,
|
||
lat: 25.039343,
|
||
});
|
||
new FireEffect(viewer, {
|
||
lng: 121.551034,
|
||
lat: 25.036803,
|
||
});
|
||
new smokeEffect(viewer, {
|
||
lng: 121.551034,
|
||
lat: 25.036803,
|
||
});
|
||
}
|
||
|
||
function loadsss() {
|
||
tileset = new Cesium.Cesium3DTileset({
|
||
url: "./data/tileset.json",
|
||
});
|
||
tileset.readyPromise
|
||
.then(function (tileset) {
|
||
viewer.scene.primitives.add(tileset);
|
||
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Cartesian3.fromDegrees(
|
||
121.549884,
|
||
25.025771,
|
||
1050.6
|
||
),
|
||
duration: 2,
|
||
orientation: {
|
||
heading: Cesium.Math.toRadians(0.7),
|
||
pitch: Cesium.Math.toRadians(-38.7),
|
||
roll: 0.0,
|
||
},
|
||
});
|
||
|
||
customShader2(tileset);
|
||
|
||
})
|
||
.catch(function (error) {
|
||
console.log(error);
|
||
});
|
||
}
|
||
|
||
function customShader2(tileset) {
|
||
let customShader = new Cesium.CustomShader({
|
||
//片元着色器
|
||
fragmentShaderText: `
|
||
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
|
||
vec3 positionMC = fsInput.attributes.positionMC;
|
||
material.diffuse = vec3(0.0, 1.0-positionMC.y*0.005, 1.0-positionMC.y*0.0015);
|
||
|
||
float _baseHeight = 18.0; // 物体的基础高度，需要修改成一个合适的建筑基础高度
|
||
float _heightRange = 60.0; // 高亮的范围(_baseHeight ~ _baseHeight + _heightRange) 默认是 0-60米
|
||
float _glowRange = 120.0; // 光环的移动范围(高度)
|
||
|
||
float vtxf_height = fsInput.attributes.positionMC.y - _baseHeight;
|
||
float vtxf_a11 = fract(czm_frameNumber / 360.0) * 3.14159265 * 2.0; //此处括号内分母为移动速度
|
||
float vtxf_a12 = vtxf_height / _heightRange + sin(vtxf_a11) * 0.1;
|
||
material.diffuse *= vec3(vtxf_a12, vtxf_a12, vtxf_a12);
|
||
|
||
float vtxf_a13 = fract(czm_frameNumber / 360.0); //此处括号内分母为移动速度，数值越大，速度越慢
|
||
float vtxf_h = clamp(vtxf_height / _glowRange, 0.0, 1.0);
|
||
vtxf_a13 = abs(vtxf_a13 - 0.5) * 2.0;
|
||
float vtxf_diff = step(0.01, abs(vtxf_h - vtxf_a13)); // 0.1 为高亮光条的范围（粗细）
|
||
material.diffuse += material.diffuse * (1.0 - vtxf_diff);
|
||
}`,
|
||
});
|
||
tileset.customShader = customShader;
|
||
viewer.scene.globe.depthTestAgainstTerrain = true; //（开启）
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |