<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<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>
<script src="../Build/Cesium/Cesium.js"></script>
<script type="text/javascript" src="../plugins/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="../Build/Cesium/Widgets/widgets.css" />
<script src="../plugins/ysc/ysc.js"></script>
<style>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: visible;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1NWI5MGUzNi1mYWI3LTQzY2QtOGI0Ni0xZWYyNTAxNGM4N2MiLCJpZCI6MTI1OTgsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjE0NDkyNTV9.hBH0PGSnKErc_yNhIePASUkr3QPDoo0KDX9uLpNBUns";
// var url = 'http://localhost:8090/geoserver/wms'; //Geoserver(我的端口号默认为8080)
/* var urlTemplateImageryProvider = new Cesium.UrlTemplateImageryProvider({
url: "http://localhost:8090/geoserver/gwc/service/tms/1.0.0/map2%3Aworld@EPSG%3A900913@png/{z}/{x}/{reverseY}.png"
}); */
//viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider);
var viewer = new Cesium.Viewer('cesiumContainer', {
// imageryProvider: urlTemplateImageryProvider,
imageryProvider: Cesium.createTileMapServiceImageryProvider({
url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
}),
// baseLayerPicker: false,
geocoder: false,
// selectionIndicator: false,
// infoBox: false,
// 注释时相当于使用默认地形，解开注释相当于使用全球地形
//terrainProvider: Cesium.createWorldTerrain()
});
tilingScheme: new Cesium.GeographicTilingScheme();
viewer.scene.globe.depthTestAgainstTerrain = true;
var start = Cesium.JulianDate.fromDate(new Date(2000, 10, 1));
var start2 = Cesium.JulianDate.fromDate(new Date(2000, 10, 1));
// 结束时间
var stop = Cesium.JulianDate.fromDate(new Date(2015, 10, 1));
window.onload = function () {
//添加雷达站点，建立扫描系统
var radar;
var url1 = "./0208/sensors.json"/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
var request1 = new XMLHttpRequest();
request1.open("get", url1);/*设置请求方法与路径*/
request1.send(null);/*不发送数据到服务器*/
request1.onload = function () {/*XHR对象获取到返回信息后执行*/
radar = JSON.parse(request1.responseText);//读取轨迹数据
//console.log(radar);
for (var i = 0; i < radar.data.length; i++) {
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(radar.data[i].lon, radar.data[i].lat, 250),
name: radar.data.name,
box: {
dimensions: new Cesium.Cartesian3(10000.0, 10000.0, 500),
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 2,
material: Cesium.Color.fromRandom({ alpha: 0.5 })
}
});
}
}
//添加原始航迹
var url3 = "./0208/targets.json"/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
var request3 = new XMLHttpRequest();
request3.open("get", url3);/*设置请求方法与路径*/
request3.send(null);/*不发送数据到服务器*/
request3.onload = function () {/*XHR对象获取到返回信息后执行*/
var trackY = JSON.parse(request3.responseText);//读取轨迹数据
var position2 = computeFlighty(trackY.tracks);
function computeFlighty(source) {
// 取样位置 相当于一个集合
var property = [];
for (var i = 0; i < source.length; i++) {
var positionl = Cesium.Cartesian3.fromDegrees(source[i].lon, source[i].lat, 20000);
// 添加位置，和时间对应
property.push(source[i].lon, source[i].lat, 20000);
}
return property;
}
var Line = viewer.entities.add({
name: 'aGlowLine',
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(position2),
width: 3,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.3,
// color: Cesium.Color.BLUE.withAlpha(0.9),
color: Cesium.Color.RED,
})
}
});
}
var url2 = "./0208/track_fustion.json"/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
var request2 = new XMLHttpRequest();
request2.open("get", url2);/*设置请求方法与路径*/
request2.send(null);/*不发送数据到服务器*/
request2.onload = function () {/*XHR对象获取到返回信息后执行*/
var json = JSON.parse(request2.responseText);//读取轨迹数据
//console.log(json);
//加载飞行轨迹
//设置时间轴
function computeFlight(source) {
// 取样位置 相当于一个集合
var property = new Cesium.SampledPositionProperty();
for (var i = 0; i < source.length; i++) {
var time = Cesium.JulianDate.addSeconds(start2, source[i].timestamp, new Cesium.JulianDate());
// var position = Cesium.Cartesian3.fromDegrees(source[i].stationLon, source[i].stationLat, 0);
var position = Cesium.Cartesian3.fromDegrees(source[i].targetLon, source[i].targetLat, 20000);
// 添加位置，和时间对应
property.addSample(time, position);
if (i == 0) { start = time }
if (i == source.length - 1) { stop = time }
}
//onsole.log(property);
return property;
}
var position = computeFlight(json.data.fusions);
//Actually create the entity
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
viewer.clock.multiplier = 10;
//Set timeline to simulation bounds
viewer.timeline.zoomTo(start, stop);
var entity = viewer.entities.add({
//Set the entity availability to the same interval as the simulation time.
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start,
stop: stop
})]),
//Use our computed positions
position: position,
//Automatically compute orientation based on position movement.
orientation: new Cesium.VelocityOrientationProperty(position),
//Load the Cesium plane model to represent the entity
model: {
uri: './SampleData/models/CesiumAir/Cesium_Air.gltf',
minimumPixelSize: 64
},
//Show the path as a pink line sampled in 1 second increments.
path: {
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.YELLOW
}),
width: 2
}
})
// console.log(entity);
var model = entity;
//加载扫描动画
var radar_scanf = json.data.tracks;
var data = "";
for (var j = 0; j < radar.data.length; j++) {
var timelist = [];
for (var l = 0; l < radar_scanf.length; l++) {
if (radar_scanf[l].stationId == radar.data[j].id) {
var ttime = Cesium.JulianDate.addSeconds(start2, radar_scanf[l].timestamp, new Cesium.JulianDate());
timelist.push([ttime]);
}
}
// console.log(timelist);
if (timelist.length > 0) {
data = {
circle: [0.03, radar.data[j].lon + 0.1, radar.data[j].lat + 0.1, 30]
, observer: [radar.data[j].lon, radar.data[j].lat, 500]//观察点，也就是光源点，需要改成雷达站
, timelist: timelist
, material: Cesium.Color.RED.withAlpha(0.5)//光的材质
//,number:100//数字越小速度越快
};
var entityCList = createLightScanFollowEntity(viewer, data, model);//监听可能后面不好做判断，或者判断结果与实际不符
// var entityCList = createLightScan(viewer, data); //返回的是所有面的数组 如果需要清除的画，就通过此清除
}
}
function createLightScanFollowEntity(viewer, data, model) {
//生成分割点
var point = createLightScan_getCirclePoints(data.circle[0], data.circle[1], data.circle[2], data.circle[3]);
//生成 entityCList 圆锥
var entityCList = createLightScan_entityCList(viewer, point, data);
// 实时获取模型的经纬度。
var onoff = 1;
viewer.scene.postRender.addEventListener(function () {
var center = "";
for (var p = 0; p < data.timelist.length; p++) {
var ttime2 = data.timelist[p];
if (viewer.clock.currentTime.dayNumber == ttime2[0].dayNumber)
if (Math.round(viewer.clock.currentTime.secondsOfDay) == ttime2[0].secondsOfDay) {
if (onoff == 0) {
for (var h = 0; h < entityCList.length; h++) {
viewer.entities.add(entityCList[h]);
}
onoff = 1;
}
center = model.position.getValue(viewer.clock.currentTime);//获取模型当前位置 //世界坐标（笛卡尔坐标）
}
// var stations=model.position.
}
if (center) {
var ellipsoid = viewer.scene.globe.ellipsoid;
var cartographic = ellipsoid.cartesianToCartographic(center);
var lon = Cesium.Math.toDegrees(cartographic.longitude);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var height = cartographic.height;
//console.log(lon+";"+lat+";"+height);
var X0 = lon - data.circle[1], Y0 = lat - data.circle[2], Z0 = height - 500; //差值
for (var i = 0; i < entityCList.length; i++) {
if (i == (entityCList.length - 1)) {
f(entityCList[i], [point[i].x, point[i].y, point[0].x, point[0].y], X0, Y0, Z0);
} else {
f(entityCList[i], [point[i].x, point[i].y, point[i + 1].x, point[i + 1].y], X0, Y0, Z0);
}
}
} else {
for (var h = 0; h < entityCList.length; h++) {
viewer.entities.remove(entityCList[h]);
}
onoff = 0;
}
});
//修改每一个entity
function f(entity, arr, X0, Y0, Z0) {
entity.polygon.hierarchy = new Cesium.CallbackProperty(function () { //回调函数
return new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(
[
data.observer[0], data.observer[1], data.observer[2],//观察点
arr[0] + X0, arr[1] + Y0, Z0,
arr[2] + X0, arr[3] + Y0, Z0
]))
}, false)
}
return entityCList;
}
function createLightScan_getCirclePoints(r, ox, oy, count) {
var point = []; //结果
var radians = (Math.PI / 180) * Math.round(360 / count), //弧度
i = 0;
for (; i < count; i++) {
var x = ox + r * Math.sin(radians * i),
y = oy + r * Math.cos(radians * i);
point.unshift({ x: x, y: y }); //为保持数据顺时针
}
return point;
}
//生成 entityCList面--形成圆锥
function createLightScan_entityCList(viewer, point, data) {
var lon = data.observer[0], lat = data.observer[1], h = data.observer[2];
var entityCList = [];
//创建 面
for (var i = 0; i < point.length; i++) {
// viewer.entities.add({ //切割的点
// position : Cesium.Cartesian3.fromDegrees(point[i].x,point[i].y),
// point : {
// color : Cesium.Color.RED,
// pixelSize : 8
// }
// });
var hierarchy;
if (i == (point.length - 1)) {
hierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(
[
lon, lat, h,
point[i].x, point[i].y, 0,
point[0].x, point[0].y, 0
]))
} else {
hierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(
[
lon, lat, h,
point[i].x, point[i].y, 0,
point[i + 1].x, point[i + 1].y, 0
]))
}
var entityC = viewer.entities.add({
name: "三角形",
polygon: {
hierarchy: hierarchy,
outline: false,
perPositionHeight: true,//允许三角形使用点的高度
material: data.material
}
});
entityCList.push(entityC);
}
return entityCList
}
}
};
//测试用，计算两点间距离
var point1cartographic = new Cesium.Cartographic(Cesium.Math.toRadians(112.95), Cesium.Math.toRadians(9.51), 0);
var point2cartographic = new Cesium.Cartographic(Cesium.Math.toRadians(112.91354392581194), Cesium.Math.toRadians(14.039474985655078), 10000);
var geodesic = new Cesium.EllipsoidGeodesic();
geodesic.setEndPoints(point1cartographic, point2cartographic);
var s = geodesic.surfaceDistance;
console.log(s);
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(112.3394, 16.8314, 1500000.0),
orientation: {
// heading: Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north) //东西南北朝向
pitch: Cesium.Math.toRadians(-90), // default value (looking down) //俯视仰视视觉
roll: 0.0 // default value
},
});
</script>
</body>
</html>
本文介绍了一个基于Cesium的地图应用程序实例，演示了如何加载地图、显示雷达站点、绘制飞行轨迹及实现扫描动画等功能。通过解析JSON文件加载站点信息，并利用XMLHttpRequest获取数据，实现了动态更新与交互。
扫一扫
496
到【灌水乐园】发言
