<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>衛(wèi)星掃描</title>
<link rel='stylesheet'/>
<script src='http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
</head>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bmgl-widget-credits {
display: none
}
</style>
<body>
<div id='container'></div>
</body>
<script>
bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
var viewer = new bmgl.Viewer('container', {
mapId: 'bigemap.dc-tian-w-satellite',
requestRenderMode: false,
timeline: true,
shouldAnimate: true,
});
var data = [{
longitude: 104.02001381,
dimension: 30.64743519,
height: 100,
time: 0
}, {
longitude: 104.03567791,
dimension: 30.63134193,
height: 100,
time: 50
}, {
longitude: 104.05533314,
dimension: 30.62241554,
height: 100,
time: 100
}, {
longitude: 104.07464504,
dimension: 30.62275887,
height: 100,
time: 150
}, {
longitude: 104.09271240,
dimension: 30.62335968,
height: 100,
time: 200
}, {
longitude: 104.11241055,
dimension: 30.65421581,
height: 100,
time: 250
}, {
longitude: 104.11215305,
dimension: 30.66318512,
height: 100,
time: 300
}];
// 起始時間
var start = bmgl.JulianDate.fromDate(new Date(2017, 7, 11));
// 結(jié)束時間
var stop = bmgl.JulianDate.addSeconds(start, 300, new bmgl.JulianDate());
// 設置始時鐘始時間
viewer.clock.startTime = start.clone();
// 設置時鐘當前時間
viewer.clock.currentTime = start.clone();
// 設置始終停止時間
viewer.clock.stopTime = stop.clone();
// 時間速率，數(shù)字越大時間過的越快
viewer.clock.multiplier = 5;
// 時間軸
viewer.timeline.zoomTo(start, stop);
// 循環(huán)執(zhí)行
viewer.clock.clockRange = bmgl.ClockRange.LOOP_STOP;
var property = computeFlight(data);
// 添加模型
var planeModel = viewer.entities.add({
// 和時間軸關聯(lián)
availability: new bmgl.TimeIntervalCollection([new bmgl.TimeInterval({
start: start,
stop: stop
})]),
position: property,
// 根據(jù)所提供的速度計算點
orientation: new bmgl.VelocityOrientationProperty(property),
// 模型數(shù)據(jù)
model: {
uri: '/SampleData/models/CesiumAir/Cesium_Air.glb',
minimumPixelSize: 105
},
path: {
resolution: 1,
material: new bmgl.PolylineGlowMaterialProperty({
glowPower: .1,
color: bmgl.Color.YELLOW
}),
width: 10
}
});
viewer.trackedEntity = planeModel
planeModel.position.setInterpolationOptions({ //設定位置的插值算法
interpolationDegree: 0,
interpolationAlgorithm: bmgl.LagrangePolynomialApproximation
});
var scene = viewer.scene;
var handler = new bmgl.ScreenSpaceEventHandler(scene.canvas);
var ellipsoid = scene.globe.ellipsoid; //得到當前三維場景的橢球體
let di = 1;
//添加移動事件
viewer.clock.onTick.addEventListener(e => {
let postion_xyz = planeModel.position.getValue(e.currentTime)
var wgs84 = ellipsoid.cartesianToCartographic(postion_xyz);
let lng = bmgl.Math.toDegrees(wgs84.longitude)
let lat = bmgl.Math.toDegrees(wgs84.latitude)
let height = bmgl.Math.toDegrees(wgs84.height)
let latlng = [lat, lng]
if(di == data.length){
return;
}
let dis = distan({dimension: lat, longitude: lng}, data[di])
if (dis < 100) {
createLabel(di)
di += 1
}
})
function createLabel() {
viewer.entities.add({
position: bmgl.Cartesian3.fromDegrees(data[di].longitude, data[di].dimension, 100),
label: {
scale: 1,
//貼地
// heightReference:bmgl.HeightReference.CLAMP_TO_GROUND,
fillColor: bmgl.Color.BLUE,
text: 'BIGEMAP',
},
});
}
function computeFlight(source) {
var property = new bmgl.SampledPositionProperty();
for (var i = 0; i < source.length; i++) {
var time = bmgl.JulianDate.addSeconds(start, source[i].time, new bmgl.JulianDate);
var position = bmgl.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height);
// 添加位置，和時間對應
property.addSample(time, position);
}
return property;
}
function distan(point1, point2) {
// point2.longitude, point2.dimension, 1
// ;dimension: lat, longitude
var point1_xyz=bmgl.Cartesian3.fromDegrees(point1.longitude,point1.dimension,1);
var point2_xyz=bmgl.Cartesian3.fromDegrees(point2.longitude,point2.dimension,1);
var distance = bmgl.Cartesian3.distance(point1_xyz, point2_xyz);
return distance;
}
</script>
</html>