Cesium-Examples/examples/cesiumEx/0.html

1274 lines
42 KiB
HTML
Raw Normal View History

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
<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.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M";
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>