liangqichao_new/Map/map.js

//DGE 是自主研发数字孪生框架
//DGE 作者：tianhongguo 
let map = new DGE.Map('container', {
   animation:false,    //左下角的动画仪表盘
            baseLayerPicker:false,  //右上角的图层选择按钮
            geocoder:false,  //搜索框
            homeButton:false,  //home按钮
            sceneModePicker:false, //模式切换按钮
            timeline:false,    //底部的时间轴
            navigationHelpButton:false,  //右上角的帮助按钮，
            fullscreenButton:false,   //右下角的全屏按钮
            infoBox: false, //是否显示点击要素之后显示的信息
           vrButton: true,
           infoBox: false,
           selectionIndicator: false,
           baseUrl:"./Source/"
});


let tileset=map.data.threeDTiles.load({
    url:"https://testgis.4dage.com/liangqichaoshuju/tileset.json",
    height:10,
    maximumScreenSpaceError:40
}); 

let tileset1=map.data.threeDTiles.load({
    url:"https://testgis.4dage.com/liangqichaoguju3dtilesbufen/tileset.json",
    height:10,
    maximumScreenSpaceError:40
}); 
let tileset2=map.data.threeDTiles.load({
    url:"https://testgis.4dage.com/liangqichaoloutibufen/tileset.json",
    height:10,
    maximumScreenSpaceError:40
}); 

map.viewer.camera.setView({
    destination:new Global.Cartesian3.fromDegrees(line[0].lng,line[0].lat,line[0].alt),
    orientation:{
        heading : line[0].heading,
        pitch : line[0].pitch,
        roll :  line[0].roll
    }
});

 let options={};
  // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
  options.defaultResetView =Global.Rectangle.fromDegrees(80, 22, 130, 50);
  // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
  options.enableCompass= true;
  // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
  options.enableZoomControls= false;
  // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
  options.enableDistanceLegend= false;
  // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
  options.enableCompassOuterRing= true;
  DGE.MapNavigation(map.viewer, options);

let route =new DGE.FlyRoute("测试路线","FlyRouteId");
line.map(({
    lng,
        lat,
        alt,
        heading,
        pitch,
        roll,
        waitTime,
    }) => {
        let step = new DGE.FlyStep(
            new DGE.P3(lng, lat, alt),
            heading,
            pitch,
            roll,
            waitTime
        );
        route.add(step); // 给飞行路线添加站点
    });
 route.speed = 2;
map.flyManager.activeRoute = route;
map.flyManager.add(route);
var flyShow=false;
var interval=null;
var index=0;
addLabels();
//添加地名
function addLabels(){
    ps.map(p=>{
        map.viewer.entities.add({
            id:p.name,
            position:Global.Cartesian3.fromDegrees(p.lng,p.lat,p.alt),
            label:{
                text:p.name,
                pixelOffset:new Global.Cartesian2(0,-22),
                scale:0.6,
                fillColor: Global.Color.WHITE
            },
            billboard:{
                image:"./imgs/label.png",
                scale:0.8
            },
            polyline:{
                positions:[Global.Cartesian3.fromDegrees(p.lng,p.lat,p.alt),Global.Cartesian3.fromDegrees(p.lng,p.lat,10)],
                material:new Global.Color(238/255,193/255,133/255)
            }
        });
    })
}

function intervalFun(){
    var j=0;//同一个时间段重复运行
    interval&&clearInterval(interval)
    interval=setInterval(()=>{
        if(flyShow){
            let ens=map.viewer.entities.values;
            for(let i=0;i<line.length;i++){
                if(i==map.flyManager.activeStepIndex){
                    ens.map(e=>{
                        e.label.fillColor=Global.Color.WHITE;
                        e.billboard.image="./imgs/label.png";
                        if(e.id==line[i].name) {
                            e.billboard.image="./imgs/labelok.png";
                            e.label.fillColor= new Global.Color(157/255,96/255,34/255);
                        }
                    })
                }
            }
           
            if(index!=map.flyManager.activeStepIndex){
                j=0;
                index=map.flyManager.activeStepIndex;
                if(line[index].str){
                    addStr(line[index].str)
                }
            }
            if(index==0&&j==0){
                addStr(line[index].str)
            }
            
            if(index==line.length-2){
                clear()
            }
            setFontsize()
            j++;
        }
    },300);
    console.log("interval",interval)
}
function addStr(str){
    var txtdiv=document.getElementById("font");
    while(txtdiv.hasChildNodes()) 
    {
        txtdiv.removeChild(txtdiv.firstChild);
    }
    if(str!="false"){
        var txt=document.createTextNode(str);
        txtdiv.appendChild(txt);
    }
    setFontsize()
}
//字体自动大小适应
function setFontsize(){
    var txtdiv=document.getElementById("font");
    let width=(window.innerWidth-txtdiv.clientWidth)/2;
    let fontsize=14/1920 *window.innerWidth;
     var left=(width/window.innerWidth)*100+"%";
     let styleStr="position: absolute;z-index: 100;bottom: 10%;background-color:rgba(157,96,34,0.5);color:white;left:"+left+";font-size:"+fontsize+"px"
     txtdiv.setAttribute('style',styleStr);
}
//清除
function clear(){
    clearInterval(interval);
    console.log("interval",interval)
    var txtdiv=document.getElementById("font");
    while(txtdiv.hasChildNodes()) 
    {
        txtdiv.removeChild(txtdiv.firstChild);
    }
    txtdiv.display="none"
   
}

//开始播放
function play(){
    map.flyManager.play();
    flyShow=true;
    var txtdiv=document.getElementById("font");
    txtdiv.display="block";
    intervalFun();
}
//暂停播放
function pause(){
    map.flyManager.pause();
}
//继续播放
function continueDo(){
    map.flyManager.continue();
}
//停止播放
function stop(){
    map.flyManager.stop();
    clear();
   
}



// var handler = new Global.ScreenSpaceEventHandler(map.viewer.scene.canvas);
//     handler.setInputAction(function (event) {
//         //1.椭球面坐标:获取当前点击视线与椭球面相交处的坐标，在加载地形的场景上获取的坐标有误差
//         //var earthPosition = viewer.camera.pickEllipsoid(event.position,viewer.scene.globe.ellipsoid); 

//         //2.场景坐标:获取场景中任意点击处的对应的世界坐标，需要开启“地形深度检测”（在未开启“地形深度检测”的情况下只能在3DTile上准确获取空间坐标，开启“地形深度检测”后，viewer.scene.pickPosition 也能在非3DTile上准确获取坐标）
//         map.viewer.scene.globe.depthTestAgainstTerrain = true;
 
//         var ellipsoid = map.viewer.scene.globe.ellipsoid;
//         var cartographic = ellipsoid.cartesianToCartographic(map.viewer.camera.position);
//         var lat = Global.Math.toDegrees(cartographic.latitude);
//         var lng = Global.Math.toDegrees(cartographic.longitude);
//         var alt = cartographic.height;
//        console.log({
//         lat:lat,
//         lng:lng,
//         alt:alt,
//         heading:map.viewer.camera.heading,
//         pitch:map.viewer.camera.pitch,
//         roll:map.viewer.camera.roll
//        })
        
//     }, Global.ScreenSpaceEventType.LEFT_CLICK);

document.getElementById("fun").addEventListener("click",()=>{
    play()
})
document.getElementById("fun1").addEventListener("click",()=>{
    pause()
})
document.getElementById("fun2").addEventListener("click",()=>{
    continueDo()
})
document.getElementById("fun3").addEventListener("click",()=>{
   stop();
})