<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>卫星扫描</title>
<link href='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet'/>
<script src='http://bigemap.com:9000/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://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', {
mapId: 'bigemap.zhongkexingtu',
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));
// 结束时间
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();
// 时间速率，数字越大时间过的越快
viewer.clock.multiplier = 5;
// 时间轴
viewer.timeline.zoomTo(start, stop);
// 循环执行
viewer.clock.clockRange = bmgl.ClockRange.LOOP_STOP;
var property = computeFlight(data);
// 添加模型
var planeModel = viewer.entities.add({
// 和时间轴关联
availability: new bmgl.TimeIntervalCollection([new bmgl.TimeInterval({
start: start,
stop: stop
})]),
position: property,
// 根据所提供的速度计算点
orientation: new bmgl.VelocityOrientationProperty(property),
// 模型数据
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>
源码