<!--
Dynamic Point-Line
-->
<!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>飞线!</title>
<link rel="stylesheet" type="text/css" href="Cesium/Widgets/widgets.css" />
<script type="text/javascript" src="Cesium/Cesium.js"></script>
<script type="text/javascript">
/**
* 根据弧线的坐标节点数组
*/
function getCurvePoints(points, options) {
options = options || {};
var curvePoints = [];
for (var i = 0; i < points.length - 1; i++) {
var p = getCurveByTwoPoints(points[i], points[i + 1], options.count);
if (p && p.length > 0) {
curvePoints = curvePoints.concat(p);
}
}
return curvePoints;
}
/**
* 根据两点获取曲线坐标点数组
* @param Point 起点
* @param Point 终点
*/
function getCurveByTwoPoints(obj1, obj2, count) {
if (!obj1 || !obj2) {
return null;
}
var B1 = function(x) {
return 1 - 2 * x + x * x;
};
var B2 = function(x) {
return 2 * x - 2 * x * x;
};
var B3 = function(x) {
return x * x;
};
var curveCoordinates = [];
var count = count || 40; // 曲线是由一些小的线段组成的,这个表示这个曲线所有到的折线的个数
var isFuture = false;
var t, h, h2, lat3, lng3, j, t2;
var LnArray = [];
var i = 0;
var inc = 0;
if (typeof(obj2) == "undefined") {
if (typeof(curveCoordinates) != "undefined") {
curveCoordinates = [];
}
return;
}
var lat1 = parseFloat(obj1.lat);
var lat2 = parseFloat(obj2.lat);
var lng1 = parseFloat(obj1.lng);
var lng2 = parseFloat(obj2.lng);
// 计算曲线角度的方法
if (lng2 > lng1) {
if (parseFloat(lng2-lng1) > 180) {
if (lng1 < 0) {
lng1 = parseFloat(180 + 180 + lng1);
}
}
}
if (lng1 > lng2) {
if (parseFloat(lng1-lng2) > 180) {
if (lng2 < 0) {
lng2 = parseFloat(180 + 180 + lng2);
}
}
}
j = 0;
t2 = 0;
if (lat2 == lat1) {
t = 0;
h = lng1 - lng2;
} else if (lng2 == lng1) {
t = Math.PI / 2;
h = lat1 - lat2;
} else {
t = Math.atan((lat2 - lat1) / (lng2 - lng1));
h = (lat2 - lat1) / Math.sin(t);
}
if (t2 == 0) {
t2 = (t + (Math.PI / 5));
}
h2 = h / 2;
lng3 = h2 * Math.cos(t2) + lng1;
lat3 = h2 * Math.sin(t2) + lat1;
for (i = 0; i < count + 1; i++) {
curveCoordinates.push([
(lng1 * B1(inc) + lng3 * B2(inc)) + lng2 * B3(inc),
(lat1 * B1(inc) + lat3 * B2(inc) + lat2 * B3(inc))
]);
inc = inc + (1 / count);
}
return curveCoordinates;
}
function Point (lng, lat) {
this.lng = lng;
this.lat = lat;
}
</script>
<style>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body onload="onload()">
<div id="cesiumContainer"></div>
<script>
var center = [106.540545, 29.531714];
var height = 60*15;
var trafficPoints=[{"geometry":{"type":"Point","coordinates":[116.63530472117604,36.492206977571094]}}];
function getCurveDynamicPointsAndLine(center, endPoints) {
if (center && (center instanceof Array) && endPoints && (endPoints instanceof Array)) {
var timeData = [];
var lineData = [];
endPoints.map(function (data) {
var coords = data.geometry && data.geometry.coordinates;
var toCenter = {lng: coords[0], lat: coords[1]};
var fromCenter = {lng: center[0], lat: center[1]};
var cv = getCurvePoints([fromCenter, toCenter]);
var pointArray = [];
for (var j = 0; j < cv.length; j++) {
timeData.push({
geometry: {
type: 'Point',
coordinates: cv[j]
},
time: j
});
pointArray.push(cv[j][0]);
pointArray.push(cv[j][1]);
pointArray.push(height);
}
lineData.push({
geometry: {
type: 'LineString',
coordinates: pointArray
}
});
});
return {point:timeData, line:lineData};
}
}
function onload() {
viewer = new Cesium.Viewer('cesiumContainer', {
selectionIndicator: false, // 去掉选中指示
animation: false,
baseLayerPicker: false,
homeButton: false,
automaticallyTrackDataSourceClocks: true,
geocoder: false, // 去掉搜索
timeline: false,
navigation:false,
sceneMode: Cesium.SceneMode.SCENE2D,
navigationHelpButton: false, // 去掉帮助
infoBox: false, // 去掉信息框
fullscreenButton: false, // 去掉全屏
imageryProvider: new Cesium.WebMapServiceImageryProvider({
url : 'http://localhost:8080/geoserver/wms',
layers : 'china:world'
})
});
scene = viewer.scene;
console.log(viewer.clockViewModel.shouldAnimate);
// 开始动画
viewer.clockViewModel.shouldAnimate = true;
var camera = scene.camera;
camera.setView({destination: Cesium.Rectangle.fromDegrees(80, 10, 140, 50)});
scene.screenSpaceCameraController.enableTranslate = false; // 禁止平移
scene.screenSpaceCameraController.enableZoom = false; // 禁止缩放
var pResult = getCurveDynamicPointsAndLine(center, trafficPoints);
var lineResult = pResult.line;
var pointResult = pResult.point;
///////////////////////////////////////////////////
var curLineArray = [];
var linecolor = new Cesium.Color(0/255,228/255, 3/255,0.8);
var l2 = new Cesium.Color(65/255,105/255,225/255, 0.8);
for (var i = 0; i < lineResult.length; ++i) {
curLineArray[i] = viewer.entities.add({
polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights(lineResult[i].geometry.coordinates),
width : 1,
material : new Cesium.PolylineOutlineMaterialProperty({
color : linecolor,
outlineWidth : 0.1,
outlineColor : l2
}),
depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty({
color : linecolor,
outlineWidth : 0.1,
outlineColor : l2
})
}
});
}
// 添加结束节点
var color = new Cesium.Color(80/255, 228/255, 3/255, 0.5);
var endPointArray = [];
for (var i = 0; i < trafficPoints.length; ++i) {
endPointArray[i] = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(trafficPoints[i].geometry.coordinates[0],trafficPoints[i].geometry.coordinates[1],height),
billboard :{
image : './p.png',
width:8,
height:8
}
});
}
///////////////////////////////////////////////////
var animationObj = {
stepsRange: {
start: 0,
end: 50
},
trails: 2,
duration: 85
};
var _range = animationObj.stepsRange.end - animationObj.stepsRange.start;
var isAvailable = function isAvailable(currentTime) {
if (!Cesium.defined(currentTim