1. 需求:地面指揮所需要和雷達探測範圍實時保持“通信(線)”的連接。
2. 簡單展示效果:
3. 以下主要代碼說明
4. 代碼
var czml = [{
"id": "document",
"name": "CZML Path",
"version": "1.0",
"clock": {
"interval": "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
"currentTime": "2012-08-04T10:00:00Z",
"multiplier": 10
}
}, {
"id" : "zhs",
"name": "point",
"position" : {
"cartographicDegrees" : [-122.33822,39.50918,1773]
},
"point": {
"color": {
"rgba": [255, 255, 255, 255]
},
"outlineColor": {
"rgba": [255, 0, 0, 255]
},
"outlineWidth" : 4,
"pixelSize": 20
}
},{
"id": "path",
"name": "path with GPS flight data",
"description": "<p>Hang gliding flight log data from Daniel H. Friedman.<br>Icon created by Larisa Skosyrska from the Noun Project</p>",
"availability": "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
"path": {
"material": {
"polylineOutline": {
"color": {
"rgba": [255, 0, 255, 255]
},
"outlineColor": {
"rgba": [0, 255, 255, 255]
},
"outlineWidth": 2
}
},
"width": 3,
"leadTime": 0, // 路線提前執行時間
"trailTime": 100000, // 路線跟蹤時間
"resolution": 5
},
"ellipse": { // 橢圓
"semiMinorAxis": 1000.0, // 橢圓大小
"semiMajorAxis": 830.0,
"height": 0,
"material": {
"solidColor": {
"color": {
"rgba": [255, 0, 0, 127]
}
}
},
"outline": true, // height must be set for outlines to display
"outlineColor": { // 邊框顏色
"rgba": [255, 255, 255, 255]
}
},
"position": {
"epoch": "2012-08-04T10:00:00Z",
"cartographicDegrees": [
0,-122.93797,39.50935,1776,
10,-122.93822,39.50918,1773,
20,-122.9385,39.50883,1772,
30,-122.93855,39.50842,1770,
40,-122.93868,39.50792,1770,
50,-122.93877,39.50743,1767,
60,-122.93862,39.50697,1771,
460,-122.93577,39.49812,1682,
470,-122.93578,39.49805,1682,
480,-122.93573,39.498,1682,
490,-122.93567,39.49795,1681,
500,-122.93555,39.4979,1678,
510,-122.9354,39.49788,1676,
520,-122.93522,39.49792,1674,
530,-122.93502,39.49795,1674
]
}
},{
"id":"communicationLine",
"name":"communicationLine - 通信線",
"polyline":{
"width":1,
"material":{
"solidColor":{
"color":{
"rgba":[
0,255,0,255
]
}
}
},
"arcType":"NONE",
"positions":{
"references":[
"zhs#position","path#position"
]
}
}
}];
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain(),
baseLayerPicker: false,
shouldAnimate: true
});
viewer.dataSources.add(Cesium.CzmlDataSource.load(czml)).then(function (ds) {
viewer.trackedEntity = ds.entities.getById('path');
});