cesium綁定兩個模型的移動(兩個模型之間添加通信線)

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');
        });

 

 

發佈了99 篇原創文章 · 獲贊 15 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章