車両の運転
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 使用正确的字符集。 -->
<meta charset="utf-8">
<!-- 告诉IE使用最新最好的版本。 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 使手机上的应用程序占据整个浏览器屏幕，并禁用用户缩放。 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>运行的车辆实体对象</title>
<script src="../lib/cesium/Cesium.js"></script>
<link rel="stylesheet" href="../lib/cesium/Widgets/widgets.css"/>
<style>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="credit"></div>
<div id="cesiumContainer"></div>
<script>
// 定义全局变量
var viewer;
// 初始化三维球
initViewer();
// 运动中的实体对象初始化方法
initRunEntity();
// 鼠标点击监听位置
initPosition();
// 加载默认线条
initShowLine();
// 初始化三维球
function initViewer(){
// 离子/资源访问令牌
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NjRjNGFjNy1jNDM3LTQzMTktODVlYS05YmFmOTAxYjk5MWUiLCJpZCI6Mzk5MSwic2NvcGVzIjpbImFzbCIsImFzciIsImFzdyIsImdjIl0sImlhdCI6MTUzOTU3OTE2NX0.-25udUzENRJ66mnICMK8Hfc6xgF_VP7P4sWkSHaUjOQ';
// 1、创建三维球
viewer = new Cesium.Viewer('cesiumContainer', {
// 影像来源(谷歌卫星影像数据)
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: 'http://mt0.google.cn/vt/lyrs=t,r&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}',
credit: ''
}),
baseLayerPicker: false,
// 实体是否运动
shouldAnimate: true
});
}
// 运动中的实体对象初始化方法
function initRunEntity(){
// 创建czml文件；得到czml数据源
var czml = getCzmlDataSource();
// 动态添加点到czml的路径中
// addPointForCzml(czml);
// 加载提供的URL或CZML对象，替换任何现有数据。
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
// 3、添加czml到三维球上
viewer.zoomTo(dataSourcePromise);
// 位置属性
var positionProperty;
// 实体对象
var entity;
viewer.dataSources.add(dataSourcePromise).then(function(dataSource) {
entity = dataSource.entities.getById('Vehicle');
positionProperty = entity.position;
// 带着相机跟踪车辆。
if (!viewer.trackedEntity) {
viewer.trackedEntity = entity;
}
});
// 渲染监听
var tempPosition = {x:"",y:"",z:""}
viewer.scene.postRender.addEventListener(function() {
var objectsToExclude = [entity];
var position = positionProperty.getValue(viewer.clock.currentTime);
// 运行中则打印地理坐标位置
if(viewer.clock.shouldAnimate){
// console.log(position);
}
});
}
// 动态添加点到czml的路径中
function addPointForCzml(czml){
var i = 30.95759870500004;
var a = 60;
// 延迟加载每隔10秒钟添加一个点
setInterval(function() {
i += 0.0001;
a += 10;
// 路径最后添加节点
czml[1].position.cartographicDegrees.push(a, 118.87841653400005, i, 0);
// 处理添加了点之后，界面上并没有体现出来的问题
// 修改当前时间
czml[0].clock.currentTime = viewer.clock.currentTime.toString();
// 清空之前数据，否则数据越来越多
viewer.entities.removeAll();
// 重新添加修改后的数据
viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
}, 1000);
}
// 封装czml数据源
function getCzmlDataSource(){
var czml = [{
"id": "document",
"name": "polygon",
"version": "1.0",
"clock": {
"interval": "2012-08-04T16:00:00Z/2012-08-04T16:02:00Z",
"currentTime": "2012-08-04T16:00:00Z",
"multiplier": 10
}
}, {
"id": "Vehicle",
"name": "Red box with black outline",
"availability": "2012-08-04T16:00:00Z/2012-08-04T16:02:00Z",
"path": {
"material": {
"solidColor": {
"color": {
"interval": "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
"rgba": [255, 0, 0, 128]
}
}
},
"width": [{
"interval": "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
"number": 3.0
}],
"show": [{
"interval": "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
"boolean": true
}]
},
"position": {
"interpolationAlgorithm": "LAGRANGE",
"interpolationDegree": 1,
"epoch": "2012-08-04T16:00:00Z",
"cartographicDegrees": [
0.0, 118.87473380100005, 30.95679870500004, 0.0,
10.0, 118.87542502500003, 30.95679870500004, 0.0,
20.0, 118.8759846580001, 30.95679870500004, 0.0,
30.0, 118.87660414600009, 30.95679870500004, 0.0,
40.0, 118.8774481050001, 30.95679870500004, 0.0,
50.0, 118.87826541800007, 30.95679870500004, 0.0,
60.0, 118.87841653400005, 30.95679870500004, 0.0,
70.0, 118.87841653400005, 30.95709870500004, 0.0,
80.0, 118.87841653400005, 30.95719870500004, 0.0,
90.0, 118.87841653400005, 30.95729870500004, 0.0,
100.0, 118.87841653400005, 30.95739870500004, 0.0,
110.0, 118.87841653400005, 30.95749870500004, 0.0,
120.0, 118.87841653400005, 30.95759870500004, 0.0
]
},
"model": {
"gltf" : "../models/CesiumMilkTruck/CesiumMilkTruck.glb",
"minimumPixelSize":100,
"maximumScale":50
},
"orientation" : {
"velocityReference": "#position"
},
}];
return czml;
}
// 鼠标点击监听位置
function initPosition(){
// 1、屏幕坐标（鼠标点击位置距离canvas左上角的像素值）
var handler= new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
console.log("屏幕坐标",movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 2、世界坐标（Cartesian3）
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
var position = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
console.log("世界坐标",position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 3、场景坐标
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
var position = viewer.scene.pickPosition(movement.position);
console.log("场景坐标", position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 4、地标坐标
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
var ray=viewer.camera.getPickRay(movement.position);
var position = viewer.scene.globe.pick(ray, viewer.scene);
console.log("地标坐标",position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
// 加载默认线条
function initShowLine(){
var objId = "1";
var positions =
[
{ x: -2643634.0300800735, y: 4793836.970677526, z: 3261787.022752264 },
{ x: -2642902.711657538, y: 4793275.402520256, z: 3262054.328029062 }
];
showPolyline(objId, positions);
var objId = "2";
var positions =
[
{ x: -2643634.0300800735, y: 4793836.970677526, z: 3261787.022752264 },
{ x: -2643877.851897397, y: 4793769.058968116, z: 3261689.857661717 }
];
showPolyline(objId, positions);
var objId = "3";
var positions =
[
{ x: -2642902.711657538, y: 4793275.402520256, z: 3262054.328029062 },
{ x: -2643877.851897397, y: 4793769.058968116, z: 3261689.857661717 }
];
showPolyline(objId, positions);
}
// 展示线条
function showPolyline(objId, positions) {
var lineColor = '#00f';
if(objId == "1"){
lineColor = "#E90808";
}else if(objId == "2"){
lineColor = "#22E908";
}else if(objId == "3"){
lineColor = "#0815E9";
}
var material = new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.25,
color: Cesium.Color.fromCssColorString(lineColor).withAlpha(0.9)
});
var bData = {
layerId: objId,
objId: objId,
shapeType: "Polyline",
polyline: {
positions: positions,
clampToGround: true,
width: 8,
material: material
}
};
var entity = viewer.entities.add(bData);
}
</script>
</body>
</html>