//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), // width:3 // } }); }) } function intervalFun(){ var j=0;//同一个时间段重复运行 interval&&clearInterval(interval) interval=setInterval(()=>{ if(flyShow){ let ens=map.viewer.entities.values; for(let i=0;i{ 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() } let txtdiv=document.getElementById("font"); setFont(line[index].str,txtdiv) j++; } },300); } function addStr(str){ let txtdiv=document.getElementById("font"); while(txtdiv.hasChildNodes()) { txtdiv.removeChild(txtdiv.firstChild); } if(str!=""){ setFont(str,txtdiv) } // setFontStyle() } /** * 根据屏幕大小动态调节换行 * @param {*} str 字符串 * @param {*} txtdiv 字符串要展示的div */ function setFont(str,txtdiv){ let count =parseInt(30/400*window.innerWidth)-4; let strCount=str.length; let rows=Math.ceil(strCount/count); let endCount=strCount%count; let rowCounts=[]; let innertxt=""; for(let i=1;i"; } rowCounts.push(endCount) innertxt+=str.substr(count*(rows-1),endCount==0?count:endCount); txtdiv.innerHTML=innertxt; let width=(window.innerWidth-txtdiv.clientWidth)/2; let fontsize=20/1920 *window.innerWidth; let left=(width/window.innerWidth)*100+"%"; let padding=fontsize/2+"px "+fontsize/2+"px "+fontsize/2+"px "+fontsize/2+"px" ; let styleStr="position: absolute;z-index: 100;bottom: 10%;background-color:rgba(157,96,34,0.5);padding:"+padding+";color:white;left:"+left+";font-size:"+fontsize+"px;"; //styleStr+="lineHeight:"+5*rows+"px;"; styleStr+="height:"+20*rows+"px" txtdiv.setAttribute('style',styleStr); } // //字体自动大小适应 // function setFontStyle(){ // var txtdiv=document.getElementById("font"); // let width=(window.innerWidth-txtdiv.clientWidth)/2; // let fontsize=14/1920 *window.innerWidth/4; // 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); 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 = map.viewer.camera.pickEllipsoid(event.position,map.viewer.scene.globe.ellipsoid); // //2.场景坐标:获取场景中任意点击处的对应的世界坐标，需要开启“地形深度检测”（在未开启“地形深度检测”的情况下只能在3DTile上准确获取空间坐标，开启“地形深度检测”后，viewer.scene.pickPosition 也能在非3DTile上准确获取坐标） // map.viewer.scene.globe.depthTestAgainstTerrain = true; // var position1 = map.viewer.scene.pickPosition(event.position); // var ellipsoid = map.viewer.scene.globe.ellipsoid; // var cartographic = ellipsoid.cartesianToCartographic(position1); // var lat1 = Global.Math.toDegrees(cartographic.latitude); // var lng1 = Global.Math.toDegrees(cartographic.longitude); // var alt1 = cartographic.height; // console.log({ // lat1:lat1, // lng1:lng1, // alt1:alt1 // }) // 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(); // })