map.js 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. //DGE 是自主研发数字孪生框架
  2. //DGE 作者:tianhongguo
  3. let map = new DGE.Map('container', {
  4. animation:false, //左下角的动画仪表盘
  5. baseLayerPicker:false, //右上角的图层选择按钮
  6. geocoder:false, //搜索框
  7. homeButton:false, //home按钮
  8. sceneModePicker:false, //模式切换按钮
  9. timeline:false, //底部的时间轴
  10. navigationHelpButton:false, //右上角的帮助按钮,
  11. fullscreenButton:false, //右下角的全屏按钮
  12. infoBox: false, //是否显示点击要素之后显示的信息
  13. vrButton: true,
  14. infoBox: false,
  15. selectionIndicator: false,
  16. baseUrl:"./Source/"
  17. });
  18. let tileset=map.data.threeDTiles.load({
  19. url:"https://testgis.4dage.com/liangqichaoshuju/tileset.json",
  20. height:10,
  21. });
  22. let tileset1=map.data.threeDTiles.load({
  23. url:"https://testgis.4dage.com/liangqichaoguju3dtilesbufen/tileset.json",
  24. height:10,
  25. });
  26. let tileset2=map.data.threeDTiles.load({
  27. url:"https://testgis.4dage.com/liangqichaoloutibufen/tileset.json",
  28. height:10,
  29. });
  30. map.viewer.camera.setView({
  31. destination:new Global.Cartesian3.fromDegrees(line[0].lng,line[0].lat,line[0].alt),
  32. orientation:{
  33. heading : line[0].heading,
  34. pitch : line[0].pitch,
  35. roll : line[0].roll
  36. }
  37. });
  38. let options={};
  39. // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
  40. options.defaultResetView =Global.Rectangle.fromDegrees(80, 22, 130, 50);
  41. // 用于启用或禁用罗盘。true是启用罗盘,false是禁用罗盘。默认值为true。如果将选项设置为false,则罗盘将不会添加到地图中。
  42. options.enableCompass= true;
  43. // 用于启用或禁用缩放控件。true是启用,false是禁用。默认值为true。如果将选项设置为false,则缩放控件将不会添加到地图中。
  44. options.enableZoomControls= false;
  45. // 用于启用或禁用距离图例。true是启用,false是禁用。默认值为true。如果将选项设置为false,距离图例将不会添加到地图中。
  46. options.enableDistanceLegend= false;
  47. // 用于启用或禁用指南针外环。true是启用,false是禁用。默认值为true。如果将选项设置为false,则该环将可见但无效。
  48. options.enableCompassOuterRing= true;
  49. DGE.MapNavigation(map.viewer, options);
  50. let route =new DGE.FlyRoute("测试路线","FlyRouteId");
  51. line.map(({
  52. lng,
  53. lat,
  54. alt,
  55. heading,
  56. pitch,
  57. roll,
  58. waitTime,
  59. }) => {
  60. let step = new DGE.FlyStep(
  61. new DGE.P3(lng, lat, alt),
  62. heading,
  63. pitch,
  64. roll,
  65. waitTime
  66. );
  67. route.add(step); // 给飞行路线添加站点
  68. });
  69. route.speed = 2;
  70. map.flyManager.activeRoute = route;
  71. map.flyManager.add(route);
  72. var flyShow=false;
  73. var interval=null;
  74. var index=0;
  75. addLabels();
  76. //添加地名
  77. function addLabels(){
  78. ps.map(p=>{
  79. map.viewer.entities.add({
  80. id:p.name,
  81. position:Global.Cartesian3.fromDegrees(p.lng,p.lat,p.alt),
  82. label:{
  83. text:p.name,
  84. pixelOffset:new Global.Cartesian2(0,-22),
  85. scale:0.6,
  86. fillColor: Global.Color.WHITE
  87. },
  88. billboard:{
  89. image:"./imgs/label.png",
  90. scale:0.8
  91. },
  92. // polyline:{
  93. // // positions:[Global.Cartesian3.fromDegrees(p.lng,p.lat,p.alt),Global.Cartesian3.fromDegrees(p.lng,p.lat,10)],
  94. // material:new Global.Color(238/255,193/255,133/255),
  95. // width:3
  96. // }
  97. });
  98. })
  99. }
  100. function intervalFun(){
  101. var j=0;//同一个时间段重复运行
  102. interval&&clearInterval(interval)
  103. interval=setInterval(()=>{
  104. if(flyShow){
  105. let ens=map.viewer.entities.values;
  106. for(let i=0;i<line.length;i++){
  107. if(i==map.flyManager.activeStepIndex){
  108. ens.map(e=>{
  109. e.label.fillColor=Global.Color.WHITE;
  110. e.billboard.image="./imgs/label.png";
  111. if(e.id==line[i].name) {
  112. e.billboard.image="./imgs/labelok.png";
  113. e.label.fillColor= new Global.Color(157/255,96/255,34/255);
  114. }
  115. })
  116. }
  117. }
  118. if(index!=map.flyManager.activeStepIndex){
  119. j=0;
  120. index=map.flyManager.activeStepIndex;
  121. if(line[index].str){
  122. addStr(line[index].str)
  123. }
  124. }
  125. if(index==0&&j==0){
  126. addStr(line[index].str)
  127. }
  128. if(index==line.length-2){
  129. clear()
  130. }
  131. let txtdiv=document.getElementById("font");
  132. setFont(line[index].str,txtdiv)
  133. j++;
  134. }
  135. },300);
  136. }
  137. function addStr(str){
  138. let txtdiv=document.getElementById("font");
  139. while(txtdiv.hasChildNodes())
  140. {
  141. txtdiv.removeChild(txtdiv.firstChild);
  142. }
  143. if(str!="false"){
  144. setFont(str,txtdiv)
  145. }
  146. // setFontStyle()
  147. }
  148. /**
  149. * 根据屏幕大小动态调节换行
  150. * @param {*} str 字符串
  151. * @param {*} txtdiv 字符串要展示的div
  152. */
  153. function setFont(str,txtdiv){
  154. let count =parseInt(30/400*window.innerWidth)-4;
  155. let strCount=str.length;
  156. let rows=Math.ceil(strCount/count);
  157. let endCount=strCount%count;
  158. let rowCounts=[];
  159. let innertxt="";
  160. for(let i=1;i<rows;i++){
  161. rowCounts.push(count);
  162. innertxt+=str.substr(count*(i-1),count)+"<br>";
  163. }
  164. rowCounts.push(endCount)
  165. innertxt+=str.substr(count*(rows-1),endCount==0?count:endCount);
  166. txtdiv.innerHTML=innertxt;
  167. let width=(window.innerWidth-txtdiv.clientWidth)/2;
  168. let fontsize=14/1920 *window.innerWidth;
  169. let left=(width/window.innerWidth)*100+"%";
  170. 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;";
  171. //styleStr+="lineHeight:"+5*rows+"px;";
  172. styleStr+="height:"+20*rows+"px"
  173. txtdiv.setAttribute('style',styleStr);
  174. }
  175. // //字体自动大小适应
  176. // function setFontStyle(){
  177. // var txtdiv=document.getElementById("font");
  178. // let width=(window.innerWidth-txtdiv.clientWidth)/2;
  179. // let fontsize=14/1920 *window.innerWidth/4;
  180. // var left=(width/window.innerWidth)*100+"%";
  181. // 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"
  182. // txtdiv.setAttribute('style',styleStr);
  183. // }
  184. //清除
  185. function clear(){
  186. clearInterval(interval);
  187. var txtdiv=document.getElementById("font");
  188. while(txtdiv.hasChildNodes())
  189. {
  190. txtdiv.removeChild(txtdiv.firstChild);
  191. }
  192. txtdiv.display="none"
  193. }
  194. //开始播放
  195. function play(){
  196. map.flyManager.play();
  197. flyShow=true;
  198. var txtdiv=document.getElementById("font");
  199. txtdiv.display="block";
  200. intervalFun();
  201. }
  202. //暂停播放
  203. function pause(){
  204. map.flyManager.pause();
  205. }
  206. //继续播放
  207. function continueDo(){
  208. map.flyManager.continue();
  209. }
  210. //停止播放
  211. function stop(){
  212. map.flyManager.stop();
  213. clear();
  214. }
  215. // var handler = new Global.ScreenSpaceEventHandler(map.viewer.scene.canvas);
  216. // handler.setInputAction(function (event) {
  217. // //1.椭球面坐标:获取当前点击视线与椭球面相交处的坐标,在加载地形的场景上获取的坐标有误差
  218. // //var earthPosition = viewer.camera.pickEllipsoid(event.position,viewer.scene.globe.ellipsoid);
  219. // //2.场景坐标:获取场景中任意点击处的对应的世界坐标,需要开启“地形深度检测”(在未开启“地形深度检测”的情况下只能在3DTile上准确获取空间坐标,开启“地形深度检测”后,viewer.scene.pickPosition 也能在非3DTile上准确获取坐标)
  220. // map.viewer.scene.globe.depthTestAgainstTerrain = true;
  221. // var ellipsoid = map.viewer.scene.globe.ellipsoid;
  222. // var cartographic = ellipsoid.cartesianToCartographic(map.viewer.camera.position);
  223. // var lat = Global.Math.toDegrees(cartographic.latitude);
  224. // var lng = Global.Math.toDegrees(cartographic.longitude);
  225. // var alt = cartographic.height;
  226. // console.log({
  227. // lat:lat,
  228. // lng:lng,
  229. // alt:alt,
  230. // heading:map.viewer.camera.heading,
  231. // pitch:map.viewer.camera.pitch,
  232. // roll:map.viewer.camera.roll
  233. // })
  234. // }, Global.ScreenSpaceEventType.LEFT_CLICK);
  235. // document.getElementById("fun").addEventListener("click",()=>{
  236. // play()
  237. // })
  238. // document.getElementById("fun1").addEventListener("click",()=>{
  239. // pause()
  240. // })
  241. // document.getElementById("fun2").addEventListener("click",()=>{
  242. // continueDo()
  243. // })
  244. // document.getElementById("fun3").addEventListener("click",()=>{
  245. // stop();
  246. // })