m35_railway.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
  6. <meta name="author" content="火星科技 http://mars3d.cn " />
  7. <meta name="apple-touch-fullscreen" content="yes" />
  8. <meta name="apple-mobile-web-app-capable" content="yes" />
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  10. <meta name="format-detection" content="telephone=no" />
  11. <meta name="x5-fullscreen" content="true" />
  12. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  13. <!-- 标题及搜索关键字 -->
  14. <meta name="keywords" content="火星科技,cesium,3D,GIS,marsgis,三维,地球,地图,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
  15. <meta
  16. name="description"
  17. content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 cesium cesium开发 cesium框架 三维 地球 模型 gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包 地图离线 二维地图 三维地图 全景漫游 地理信息系统 云GIS 三维GIS GIS平台 WebGIS"
  18. />
  19. <link rel="shortcut icon" type="image/x-icon" href="" />
  20. <title>铁路仿真 </title>
  21. <!--第三方lib-->
  22. <script
  23. type="text/javascript"
  24. src="../lib/include-lib.js"
  25. libpath="../lib/"
  26. include="jquery,font-awesome,echarts,bootstrap,layer,haoutil,turf,mars3d"
  27. ></script>
  28. <link href="css/style.css" rel="stylesheet" />
  29. </head>
  30. <body class="dark">
  31. <!--加载前进行操作提示,优化用户体验-->
  32. <div id="mask" class="signmask" onclick="removeMask()"></div>
  33. <div id="mars3dContainer" class="mars3d-container"></div>
  34. <div class="infoview">
  35. <div id="section" style="width: 400px; height: 250px"></div>
  36. </div>
  37. <script src="./js/common.js"></script>
  38. <script type="text/javascript">
  39. "use script"; //开发环境建议开启严格模式
  40. var map;
  41. var graphicLayer;
  42. //时间控制参数
  43. var args = {
  44. space: 100,
  45. time: 5,
  46. martTimeInter: null,
  47. cleanTimeInter: null,
  48. };
  49. function initMap(options) {
  50. //合并属性参数,可覆盖config.json中的对应配置
  51. var mapOptions = mars3d.Util.merge(options, {
  52. scene: {
  53. center: {
  54. lat: 31.799613,
  55. lng: 117.27357,
  56. alt: 72.55,
  57. heading: 59.8,
  58. pitch: -18,
  59. roll: 0,
  60. },
  61. },
  62. control: {
  63. animation: true, //是否创建动画小器件,左下角仪表
  64. timeline: true, //是否显示时间线控件
  65. },
  66. });
  67. //创建三维地球场景
  68. map = new mars3d.Map("mars3dContainer", mapOptions);
  69. //创建Graphic图层
  70. graphicLayer = new mars3d.layer.GraphicLayer();
  71. map.addLayer(graphicLayer);
  72. //合肥高铁
  73. var coors = [
  74. [117.277697, 31.800233, 45],
  75. [117.262022, 31.798983, 45],
  76. [117.229506, 31.793351, 45],
  77. [117.215719, 31.791085, 45],
  78. [117.207234, 31.79079, 45],
  79. [117.180246, 31.790688, 45],
  80. [117.168311, 31.789785, 45],
  81. [117.152322, 31.789855, 45],
  82. [117.125297, 31.788849, 45],
  83. [117.091144, 31.787516, 45],
  84. ];
  85. var positions = mars3d.PointTrans.lonlats2cartesians(coors);
  86. //插值求新路线(按固定间隔米数插值) positions输入的值需为笛卡尔空间xyz坐标数组
  87. var positionsNew = mars3d.PolyUtil.interLine(positions, {
  88. minDistance: 20, //间隔20米
  89. });
  90. //求对比的贴地地面高度(用于echarts展示)
  91. mars3d.PolyUtil.computeSurfacePoints({
  92. scene: map.scene,
  93. positions: positionsNew, //需要计算的源路线坐标数组
  94. callback: function (raisedPositions, noHeight) {
  95. //raisedPositions为含高程信息的新坐标数组,noHeight为标识是否存在无地形数据。
  96. console.log(raisedPositions);
  97. inintRoad(positionsNew, raisedPositions);
  98. },
  99. });
  100. }
  101. //构造动态高铁 positions:设计的路线 positionsTD地面的贴地路线(用于比较)
  102. function inintRoad(positionsSJ, positionsTD) {
  103. var heightArray = [];
  104. var heightTDArray = [];
  105. var mpoints = [];
  106. for (let i = 0; i < positionsSJ.length; i++) {
  107. let position = positionsSJ[i];
  108. let carto = Cesium.Cartographic.fromCartesian(position);
  109. let x = Cesium.Math.toDegrees(carto.longitude);
  110. let y = Cesium.Math.toDegrees(carto.latitude);
  111. let height = mars3d.Util.formatNum(carto.height); //设计高度 当小数点后面的数字一致时,会省略小数点,不显示
  112. let tdHeight = mars3d.Util.formatNum(Cesium.Cartographic.fromCartesian(positionsTD[i]).height); //地面高度
  113. heightArray.push(height);
  114. heightTDArray.push(tdHeight);
  115. mpoints.push([x, y, height, tdHeight]);
  116. }
  117. // 距离数组
  118. var positionsLineFirst = positionsTD[0];
  119. var distanceArray = positionsTD.map(function (data) {
  120. return Math.round(Cesium.Cartesian3.distance(data, positionsLineFirst)); //计算两点之间的距离,返回距离
  121. });
  122. //显示echarts
  123. drawHeightToDistanceEcharts(heightArray, heightTDArray, distanceArray);
  124. // 画线
  125. var primitive = new mars3d.graphic.PolylinePrimitive({
  126. id: "设计路线",
  127. positions: positionsSJ,
  128. style: {
  129. width: 3,
  130. color: Cesium.Color.RED,
  131. materialType: mars3d.MaterialType.PolylineDash, //虚线
  132. dashLength: 20,
  133. },
  134. });
  135. graphicLayer.addGraphic(primitive);
  136. var primitiveTD = new mars3d.graphic.PolylinePrimitive({
  137. id: "贴地路线",
  138. positions: positionsTD,
  139. style: {
  140. width: 3,
  141. color: Cesium.Color.YELLOW,
  142. },
  143. });
  144. graphicLayer.addGraphic(primitiveTD);
  145. //=================计算路线====================
  146. var start = map.clock.currentTime.clone();
  147. var counts = mpoints.length;
  148. var arrProperty = [];
  149. //16组车身+头尾2个车头 共18组
  150. for (let j = 0; j < 18; j++) {
  151. let stime = Cesium.JulianDate.addSeconds(start, j, new Cesium.JulianDate()); //每隔j秒,添加一次时间
  152. let property = new Cesium.SampledPositionProperty();
  153. for (let i = 0; i < counts; i++) {
  154. let time = Cesium.JulianDate.addSeconds(stime, i + 1, new Cesium.JulianDate());
  155. let point = Cesium.Cartesian3.fromDegrees(mpoints[i][0], mpoints[i][1], mpoints[i][2] + 0.5);
  156. property.addSample(time, point); //添加新样本,时间、位置
  157. }
  158. property.setInterpolationOptions({
  159. interpolationDegree: 1,
  160. interpolationAlgorithm: Cesium.LinearApproximation,
  161. });
  162. arrProperty.push(property);
  163. }
  164. //=================时间相关====================
  165. let stop = Cesium.JulianDate.addSeconds(start, counts + 60, new Cesium.JulianDate());
  166. map.clock.startTime = start.clone();
  167. map.clock.stopTime = stop.clone();
  168. map.clock.currentTime = start.clone();
  169. map.clock.multiplier = 1; //当前速度,默认为1
  170. map.clock.shouldAnimate = true; //是否开启时钟动画,默认true
  171. // map.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //到达终止时间后循环
  172. if (map.viewer.timeline) {
  173. map.viewer.timeline.zoomTo(start, stop);
  174. }
  175. let availability = new Cesium.TimeIntervalCollection([
  176. new Cesium.TimeInterval({
  177. start: start,
  178. stop: Cesium.JulianDate.addSeconds(start, counts, new Cesium.JulianDate()),
  179. }),
  180. ]);
  181. //=================添加高铁车头================
  182. let graphicHead = addTrainHead(arrProperty[0], availability);
  183. map.trackedEntity = graphicHead.entity; //设置相机的视角跟随的Entity实例
  184. //=================添加车身====================
  185. let len = arrProperty.length;
  186. for (let j = 1; j < len - 1; j++) {
  187. addTrainBody(arrProperty[j], availability);
  188. }
  189. //=================添加高铁车尾================
  190. addTrainHead(arrProperty[len - 1], availability, true); //车尾部的反向车头
  191. //==============添加铁路,定时更新================
  192. addRailway(graphicHead, mpoints);
  193. //==============更新echarts================
  194. let lastDistance;
  195. function locTrain() {
  196. let t = parseInt(map.clock.currentTime.secondsOfDay - map.clock.startTime.secondsOfDay); //时间差
  197. if (t >= heightArray.length) {
  198. //高铁运行结束之后
  199. clearInterval(args.martTimeInter);
  200. clearInterval(args.cleanTimeInter);
  201. return;
  202. }
  203. if (lastDistance == t) {
  204. return;
  205. }
  206. lastDistance = t;
  207. updateEchartsDistance(t, heightArray[t]);
  208. }
  209. args.martTimeInter = setInterval(locTrain, 100);
  210. }
  211. //添加车头
  212. function addTrainHead(position, availability, rotatePI) {
  213. var graphicModel = new mars3d.graphic.ModelEntity({
  214. name: "和谐号车头",
  215. position: position,
  216. orientation: new Cesium.VelocityOrientationProperty(position),
  217. availability: availability,
  218. style: {
  219. url: "//data.mars3d.cn/gltf/mars/train/heada.glb",
  220. scale: 0.001,
  221. minimumPixelSize: 16,
  222. heading: rotatePI ? 90 : -90,
  223. },
  224. });
  225. graphicLayer.addGraphic(graphicModel);
  226. return graphicModel;
  227. }
  228. //添加车身
  229. function addTrainBody(position, availability) {
  230. var graphicModel = new mars3d.graphic.ModelEntity({
  231. name: "和谐号车身",
  232. position: position,
  233. orientation: new Cesium.VelocityOrientationProperty(position),
  234. availability: availability,
  235. style: {
  236. url: "//data.mars3d.cn/gltf/mars/train/body.glb",
  237. scale: 0.001,
  238. minimumPixelSize: 16,
  239. heading: -90,
  240. },
  241. });
  242. graphicLayer.addGraphic(graphicModel);
  243. return graphicModel;
  244. }
  245. //添加铁路,定时更新
  246. function addRailway(graphicHead, mpoints) {
  247. let positions = [];
  248. let orientations = [];
  249. let times = graphicHead.position._property._times;
  250. let start = times[0].clone();
  251. let counts = times.length;
  252. for (let k = 1; k < counts; k++) {
  253. let time = times[k];
  254. let position = graphicHead.position.getValue(time);
  255. positions.push(position);
  256. let orientation = graphicHead.orientation.getValue(time);
  257. orientations.push(orientation);
  258. }
  259. let i = 0;
  260. let roadNum = 80;
  261. function addroad() {
  262. let space = Math.round(map.clock.currentTime.secondsOfDay - map.clock.startTime.secondsOfDay);
  263. let spa = space + args.space;
  264. if (spa > counts) {
  265. spa = counts;
  266. }
  267. for (; i < spa; i++) {
  268. let availability = new Cesium.TimeIntervalCollection([
  269. new Cesium.TimeInterval({
  270. start: Cesium.JulianDate.addSeconds(start, -roadNum + i, new Cesium.JulianDate()),
  271. stop: Cesium.JulianDate.addSeconds(start, roadNum + i, new Cesium.JulianDate()),
  272. }),
  273. ]);
  274. // 当高度在地下时,添加地下隧道
  275. if (mpoints[i][2] - mpoints[i][3] < -20 || (i > 2 && mpoints[i - 3][2] - mpoints[i - 3][3] < -20)) {
  276. // mpoints[i][2] -- 设计高度;mpoints[i][3] -- 贴地高度
  277. let id = "s" + i;
  278. let graphic = graphicLayer.getGraphicById(id);
  279. if (!graphic) {
  280. let graphicModel = new mars3d.graphic.ModelEntity({
  281. id: id,
  282. position: positions[i],
  283. orientation: orientations[i],
  284. availability: availability,
  285. style: {
  286. url: "//data.mars3d.cn/gltf/mars/railway/suidao.glb",
  287. scale: 0.001,
  288. },
  289. });
  290. graphicLayer.addGraphic(graphicModel);
  291. } else {
  292. graphic.entity.availability._intervals[0].stop.secondsOfDay = availability._intervals[0].stop.secondsOfDay;
  293. }
  294. }
  295. // 添加轨道地面
  296. let id = "xl" + i;
  297. let graphic = graphicLayer.getGraphicById(id);
  298. if (!graphic) {
  299. let graphicModel = new mars3d.graphic.ModelEntity({
  300. id: id,
  301. position: positions[i],
  302. orientation: orientations[i],
  303. availability: availability,
  304. style: {
  305. url: "//data.mars3d.cn/gltf/mars/railway/railway.glb",
  306. scale: 0.001,
  307. },
  308. });
  309. graphicLayer.addGraphic(graphicModel);
  310. } else {
  311. graphic.entity.availability._intervals[0].stop.secondsOfDay = availability._intervals[0].stop.secondsOfDay;
  312. }
  313. //添加轨道支架
  314. if (mpoints[i][2] - mpoints[i][3] > 20 && i % 5 == 0) {
  315. let id = "xq" + i;
  316. let graphic = graphicLayer.getGraphicById(id);
  317. if (!graphic) {
  318. let graphicModel = new mars3d.graphic.ModelEntity({
  319. id: id,
  320. position: positions[i],
  321. orientation: orientations[i],
  322. availability: availability,
  323. style: {
  324. url: "//data.mars3d.cn/gltf/mars/railway/bridge.glb",
  325. scale: 0.001,
  326. },
  327. });
  328. graphicLayer.addGraphic(graphicModel);
  329. } else {
  330. graphic.entity.availability._intervals[0].stop.secondsOfDay = availability._intervals[0].stop.secondsOfDay;
  331. }
  332. }
  333. //添加轨道边的柱子
  334. if (i % 12 == 0) {
  335. let id = "xd" + i;
  336. let graphic = graphicLayer.getGraphicById(id);
  337. if (!graphic) {
  338. let graphicModel = new mars3d.graphic.ModelEntity({
  339. id: id,
  340. position: positions[i],
  341. orientation: orientations[i],
  342. availability: availability,
  343. style: {
  344. url: "//data.mars3d.cn/gltf/mars/railway/jiazi.glb",
  345. scale: 0.001,
  346. },
  347. });
  348. graphicLayer.addGraphic(graphicModel);
  349. } else {
  350. graphic.entity.availability._intervals[0].stop.secondsOfDay = availability._intervals[0].stop.secondsOfDay;
  351. }
  352. }
  353. }
  354. //移除铁路
  355. for (let j = args.statate; j < args.statate - args.space; j++) {
  356. removeGraphic("s" + j);
  357. removeGraphic("xl" + j);
  358. removeGraphic("xq" + j);
  359. removeGraphic("xd" + j);
  360. args.statate = j;
  361. }
  362. }
  363. addroad();
  364. args.cleanTimeInter = setInterval(addroad, args.time);
  365. args.statate = 0;
  366. }
  367. function removeGraphic(id) {
  368. let graphic = graphicLayer.getGraphicById(id);
  369. if (graphic) {
  370. if (graphic.entity.availability._intervals[0].stop.secondsOfDay < map.clock.currentTime.secondsOfDay) {
  371. graphic.remove(true);
  372. }
  373. }
  374. }
  375. //图表
  376. var myChart;
  377. //生成echarts图表
  378. function drawHeightToDistanceEcharts(heightArray, heightTDArray, distanceArray) {
  379. if (myChart == null) {
  380. myChart = echarts.init(document.getElementById("section"), "dark");
  381. }
  382. var option = {
  383. title: {
  384. text: "断面图",
  385. },
  386. tooltip: {
  387. trigger: "axis",
  388. axisPointer: {
  389. type: "cross",
  390. },
  391. },
  392. toolbox: {
  393. show: false,
  394. feature: {
  395. saveAsImage: {},
  396. },
  397. },
  398. legend: {
  399. data: ["地形高程", "设计高程"],
  400. },
  401. xAxis: {
  402. type: "category",
  403. boundaryGap: false,
  404. data: distanceArray,
  405. },
  406. yAxis: {
  407. type: "value",
  408. axisLabel: {
  409. formatter: "{value} 米",
  410. },
  411. axisPointer: {
  412. snap: true,
  413. },
  414. },
  415. dataZoom: [
  416. {
  417. type: "inside",
  418. },
  419. {
  420. start: 0,
  421. end: 10,
  422. handleIcon:
  423. "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
  424. handleSize: "80%",
  425. handleStyle: {
  426. color: "#fff",
  427. shadowBlur: 3,
  428. shadowColor: "rgba(0, 0, 0, 0.6)",
  429. shadowOffsetX: 2,
  430. shadowOffsetY: 2,
  431. },
  432. },
  433. ],
  434. // visualMap: {
  435. // show: false,
  436. // dimension: 0,
  437. // pieces: [{ "gt": 0, "lte": 635 }]
  438. // },
  439. series: [
  440. {
  441. name: "地形高程",
  442. type: "line",
  443. smooth: true,
  444. itemStyle: {
  445. normal: {
  446. color: "rgb(255, 255, 0)",
  447. },
  448. },
  449. data: heightTDArray,
  450. },
  451. {
  452. name: "设计高程",
  453. type: "line",
  454. smooth: true,
  455. itemStyle: {
  456. normal: {
  457. color: "rgb(255, 70, 131)",
  458. },
  459. },
  460. data: heightArray,
  461. markPoint: undefined,
  462. },
  463. ],
  464. };
  465. myChart.setOption(option, true);
  466. // myChart.on('click', function (param) {
  467. // map.trackedEntity = undefined;
  468. // map.camera.flyTo({
  469. // destination: Cesium.Cartesian3.fromDegrees(points[param.dataIndex][0], points[param.dataIndex][1], height + 30)
  470. // });
  471. // });
  472. }
  473. function updateEchartsDistance(loc, height) {
  474. if (!myChart) {
  475. return;
  476. }
  477. var markPoint = {
  478. data: [
  479. {
  480. name: "车",
  481. value: "车",
  482. xAxis: loc + 5,
  483. yAxis: height,
  484. },
  485. ],
  486. };
  487. // 填入数据,根据名字对应到相应的系列
  488. myChart.setOption({
  489. series: [
  490. {
  491. name: "设计高程",
  492. markPoint: markPoint,
  493. },
  494. ],
  495. });
  496. }
  497. </script>
  498. </body>
  499. </html>