cesium的路徑顯示（label,billboard,czml路徑）

實現功能：所經過游玩地點的標注，並通過線路動態顯示游玩路線

var viewer = new Cesium.Viewer("cesiumContainer",{     baseLayerPicker:false,     imageryProvider:goo,     terrainProvider:new Cesium.createWorldTerrain()     });

#載入kml數據，並設置label及billboard樣式
var kmlPromiese = new Cesium.KmlDataSource.load("./label.kml");
kmlPromiese.then(function(datasoruce){
    viewer.dataSources.add(datasoruce);
    var entities = datasoruce.entities.values;
    for (var i = 0; i < entities.length; i++) {
        var entity = entities[i];
        entity.billboard.show=true;
        //billboard廣告牌的樣式
        entity.billboard.image="./billboard.jpg";
        entity.billboard.scale=1.5;
        //原點相對於物體的垂直位置,有Top、Buttom、Baseline、Center,Api中有圖例
        entity.billboard.verticalOrigin =Cesium.VerticalOrigin.CENTER;
        //廣告牌可顯示的距離范圍
        entity.billboard.distanceDisplayCondition= new Cesium.DistanceDisplayCondition(0,10000);
        entity.label.show =true;
        //標簽字體大小
        entity.label.font="30px";
        entity.label.showBackground=true;
        entity.label.backgroundColor =new Cesium.Color(1,0,0,0.5);
        entity.label.fillColor =new Cesium.Color(0,0,1,0.5);
        entity.label.outlineWidth=10;
        entity.label.outlineColor = new Cesium.Color(0,1,1,0.5);
        //entity的name即為點擊entity彈出的infoxBox的標題
        entity.name="這是一個新項目";
        //位置,先求原始位置，cartesian比如(-2636040.9583333777, 4766650.9492283035, 3307150.865245503)
        var ent_cartesianPos = entity.position.getValue(Cesium.JulianDate.now());
        //笛卡爾三維轉至地理坐標，Cartographic(longitude, latitude, height)，范圍分布為弧度，弧度，米，height為above the ellipsoid
        //Cesium.Cartographic.fromCartesian(cartesian, ellipsoid, result),球體默認為 Ellipsoid.WGS84 
        //另一個常用方法Cesium.Cartographic.toCartesian(cartographic, ellipsoid, result)
        var entity_cartoPos = Cesium.Cartographic.fromCartesian(ent_cartesianPos);
        var longitute = Cesium.Math.toDegrees(entity_cartoPos.longitude).toFixed(3);
        var latitude = Cesium.Math.toDegrees(entity_cartoPos.latitude).toFixed(3);
        entity.name="白小寶旅游"+(i+1)+"處";
        entity.description= "坐標地理位置為："+"經度"+longitute+"度,緯度"+latitude+"度"+"；游玩內容描述待編寫";
        //entity.description = "位置"+ent_cartesianPos;
        //alert(entity)   ; 
    }
});

#鼠標點擊billboard顯示高亮，離開后恢復正常

//獲取控制器實例
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
var previous_Entity=undefined;
//調用setInputAction方法
handler.setInputAction(function(movement){
//獲取pick的object，如果使用click類型的鼠標操作，則相應的選擇pick和pick.position
var pickOdv = viewer.scene.pick(movement.endPosition);
//if elese的簡寫
var pick_entity = (Cesium.defined(pickOdv)) ? pickOdv.id :undefined;
//移動到一個biilboard顯示高亮，移出后，移動到下一個時候，先清空上一個的效果：
在這個{}外設置一個變量a，每次移動最后將實例賦予這個變量a，再下一次function的開始清空a的樣式設置
if(Cesium.defined(previous_Entity))
{
    previous_Entity.billboard.scale=1;
    previous_Entity.billboard.color=Cesium.Color.WHITE;
}
if(Cesium.defined(pickOdv)){
    
    pick_entity.billboard.scale=3;
    pick_entity.billboard.color= Cesium.Color.ORANGE;
    previous_Entity = pick_entity;
}

},Cesium.ScreenSpaceEventType.MOUSE_MOVE);

#載入移動設施,czml本身加載並不難，難的是做出這個caml數據，初步理解這個數據里面有樣式、經過地理位置的時間的地理位置（cartesian格式）
var dronePromise = new Cesium.CzmlDataSource.load('./Vehicle.czml');
dronePromise.then(function(dataSource) {
    viewer.dataSources.add(dataSource);
});
viewer.camera.flyTo(dronePromise);
樣式做的丑O(∩_∩)O~