178 lines
6.6 KiB
HTML
178 lines
6.6 KiB
HTML
<!--
|
|
Dynamic Point-Line
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
|
<title>Flowing Line</title>
|
|
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
|
<script src="./js/jquery.min.js"></script>
|
|
<script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
|
|
<script type="text/javascript" src="./js/gps.js"></script>
|
|
<style>
|
|
html, body, #cesiumContainer {
|
|
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;background-color: #000000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="cesiumContainer"></div>
|
|
<div id='loadingbar' class="spinner">
|
|
<div class="spinner-container container1">
|
|
<div class="circle1"></div>
|
|
<div class="circle2"></div>
|
|
<div class="circle3"></div>
|
|
<div class="circle4"></div>
|
|
</div>
|
|
<div class="spinner-container container2">
|
|
<div class="circle1"></div>
|
|
<div class="circle2"></div>
|
|
<div class="circle3"></div>
|
|
<div class="circle4"></div>
|
|
</div>
|
|
<div class="spinner-container container3">
|
|
<div class="circle1"></div>
|
|
<div class="circle2"></div>
|
|
<div class="circle3"></div>
|
|
<div class="circle4"></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function onload(Cesium) {
|
|
clock = new Cesium.Clock();
|
|
clock.shouldAnimate = true;
|
|
vmClock = new Cesium.ClockViewModel(clock);
|
|
|
|
var viewer = new Cesium.Viewer('cesiumContainer',{
|
|
sceneModePicker:true,
|
|
navigation:false,
|
|
baseLayerPicker : false,
|
|
clockViewModel:vmClock,
|
|
imageryProvider : new Cesium.SingleTileImageryProvider({
|
|
url : './images/earthbump1k.jpg'
|
|
})
|
|
|
|
/*new Cesium.WebMapTileServiceImageryProvider({
|
|
url : 'http://t0.tianditu.com/img_w/wmts?',
|
|
layer : 'img',
|
|
style : 'default',
|
|
format : 'tiles',
|
|
tileMatrixSetID : 'w',
|
|
credit : new Cesium.Credit('天地图全球影像服务'),
|
|
maximumLevel : 18
|
|
})*/
|
|
});
|
|
|
|
viewer.imageryLayers.get(0).brightness = 0.15;
|
|
viewer.scene.mode = Cesium.SceneMode.SCENE2D;
|
|
$('#loadingbar').remove();
|
|
|
|
var resource = Cesium.Resource.createIfNeeded('./data/wuhan-car');
|
|
resource.fetchText().then(function(rs) {
|
|
//////////////////////////////////////////
|
|
var animationObj = {
|
|
stepsRange: {
|
|
start: 0,
|
|
end: 50
|
|
},
|
|
trails: 20,
|
|
duration: 75
|
|
};
|
|
|
|
var _range = animationObj.stepsRange.end - animationObj.stepsRange.start;
|
|
//////////////////////////////////////////
|
|
var entityArray = [];
|
|
var curLineArray = [];
|
|
|
|
var linecolor = new Cesium.Color(53/255,57/255,255/255,0.8);
|
|
var outline = new Cesium.Color(65/255,105/255,225/255, 0.8);
|
|
var color = new Cesium.Color(255/255, 250/255, 250/255, 0.2);
|
|
|
|
rs = rs.split("\n");
|
|
console.log(rs.length);
|
|
var maxLength = 0;
|
|
|
|
var proj = new Cesium.WebMercatorProjection();
|
|
var fRatio = 180 / Math.PI;
|
|
var height = 0;
|
|
|
|
for (var i = 0; i < rs.length; i++) {
|
|
var item = rs[i].split(',');
|
|
var coordinates = [];
|
|
if (item.length > maxLength) {
|
|
maxLength = item.length;
|
|
}
|
|
|
|
var linePos = [];
|
|
for (j = 0; j < item.length; j += 2) {
|
|
coordinates.push([item[j], item[j + 1]]);
|
|
var latlon = new Cesium.Cartographic();
|
|
var pos = new Cesium.Cartesian3(item[j], item[j + 1],0);
|
|
proj.unproject(pos,latlon);
|
|
|
|
var lat = latlon.latitude * fRatio;
|
|
var lon = latlon.longitude * fRatio;
|
|
|
|
var posGps = GPS.bd_decrypt(lat, lon);
|
|
var posReal = GPS.gcj_decrypt(posGps.lat, posGps.lon);
|
|
linePos.push(posReal.lon);
|
|
linePos.push(posReal.lat);
|
|
linePos.push(height);
|
|
|
|
var entity = viewer.entities.add({
|
|
position : Cesium.Cartesian3.fromDegrees(posReal.lon,posReal.lat,height),
|
|
nameID:j,
|
|
billboard :{
|
|
image : './images/c2.png',
|
|
width:5,
|
|
height:5,
|
|
color : color
|
|
}
|
|
});
|
|
entity.isAvailable = function(obj){
|
|
return function(currentTime){
|
|
if (!Cesium.defined(currentTime)) {
|
|
throw new Cesium.DeveloperError('time is required.');
|
|
}
|
|
|
|
var nMS = Cesium.JulianDate.toDate(currentTime).getTime()/animationObj.duration;
|
|
var time = (nMS%_range + animationObj.stepsRange.start);
|
|
|
|
var trails = trails || 10;
|
|
if (time && obj.nameID > time - trails && obj.nameID < time) {
|
|
obj.billboard.color._value.alpha = 0.8*(obj.nameID - time + trails)/trails;
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
}(entity);
|
|
entityArray.push(entity);
|
|
}
|
|
|
|
curLineArray[i] = viewer.entities.add({
|
|
polyline : {
|
|
positions : Cesium.Cartesian3.fromDegreesArrayHeights(linePos),
|
|
width : 2,
|
|
material : new Cesium.PolylineOutlineMaterialProperty({
|
|
color : linecolor,
|
|
outlineWidth : 0.1,
|
|
outlineColor : outline
|
|
})
|
|
}
|
|
});
|
|
}
|
|
|
|
viewer.scene.camera.setView({
|
|
//将经度、纬度、高度的坐标转换为笛卡尔坐标
|
|
destination : Cesium.Cartesian3.fromDegrees(114.2827, 30.4434,126468)
|
|
});
|
|
}).otherwise(function(error) {
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |