f65_roamLine_plane_multi.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409
  1. <!-- 2017-12-7 14:56:03 | 修改 木遥(微信: http://marsgis.cn/weixin.html ) -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
  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. <script
  22. type="text/javascript"
  23. src="../lib/include-lib.js"
  24. libpath="../lib/"
  25. include="jquery,font-awesome,bootstrap,bootstrap-checkbox,jquery.range,layer,haoutil,turf,mars3d"
  26. ></script>
  27. <link href="css/style.css" rel="stylesheet" />
  28. </head>
  29. <body class="dark">
  30. <!--加载前进行操作提示,优化用户体验-->
  31. <div id="mask" class="signmask" onclick="removeMask()"></div>
  32. <div id="mars3dContainer" class="mars3d-container"></div>
  33. <script src="./js/common.js"></script>
  34. <script type="text/javascript">
  35. "use script"; //开发环境建议开启严格模式
  36. var map;
  37. function initMap(options) {
  38. //合并属性参数,可覆盖config.json中的对应配置
  39. var mapOptions = mars3d.Util.merge(options, {
  40. scene: {
  41. //此处参数会覆盖config.json中的对应配置
  42. center: { lat: 31.688428, lng: 117.118323, alt: 10375, heading: 29, pitch: -30 },
  43. },
  44. control: {
  45. animation: true, //是否创建动画小器件,左下角仪表
  46. timeline: true, //是否显示时间线控件
  47. },
  48. });
  49. //创建三维地球场景
  50. map = new mars3d.Map("mars3dContainer", mapOptions);
  51. map.clock.multiplier = 1;
  52. //创建矢量数据图层
  53. var graphicLayer = new mars3d.layer.GraphicLayer();
  54. map.addLayer(graphicLayer);
  55. // 绑定点击事件
  56. graphicLayer.on(mars3d.EventType.click, (event, position) => {
  57. console.log("单击了漫游路线", event);
  58. });
  59. var arrLine = [
  60. {
  61. id: "1",
  62. name: "A01",
  63. speed: 100,
  64. positions: [
  65. [117.298794, 31.882442, 500],
  66. [117.249731, 31.88091, 600],
  67. ],
  68. model: {
  69. show: true,
  70. url: "//data.mars3d.cn/gltf/mars/zhanji.glb",
  71. scale: 0.01,
  72. minimumPixelSize: 60,
  73. },
  74. path: {
  75. show: true,
  76. color: "#ffff00",
  77. opacity: 0.5,
  78. width: 1,
  79. isAll: false,
  80. },
  81. shadow: [
  82. {
  83. show: true,
  84. type: "cylinder",
  85. color: "#ff0000",
  86. },
  87. ],
  88. },
  89. {
  90. id: "2",
  91. name: "A02",
  92. speed: 100,
  93. positions: [
  94. [117.244308, 31.876828, 900],
  95. [117.246598, 31.815902, 900],
  96. ],
  97. model: {
  98. show: true,
  99. url: "//data.mars3d.cn/gltf/mars/MQ-9-Predator.glb",
  100. scale: 1,
  101. minimumPixelSize: 60,
  102. },
  103. path: {
  104. show: true,
  105. color: "#ffff00",
  106. opacity: 0.5,
  107. width: 1,
  108. isAll: false,
  109. },
  110. shadow: [
  111. {
  112. show: true,
  113. type: "wall",
  114. },
  115. ],
  116. },
  117. {
  118. id: "3",
  119. name: "A03",
  120. speed: 100,
  121. positions: [
  122. [117.160928, 31.82166, 400],
  123. [117.18824, 31.811822, 400],
  124. [117.227675, 31.790077, 400],
  125. [117.279938, 31.797397, 400],
  126. ],
  127. model: {
  128. show: true,
  129. url: "//data.mars3d.cn/gltf/mars/zhanji.glb",
  130. scale: 0.01,
  131. minimumPixelSize: 60,
  132. },
  133. path: {
  134. show: true,
  135. color: "#ffff00",
  136. opacity: 0.5,
  137. width: 1,
  138. isAll: false,
  139. },
  140. shadow: [
  141. {
  142. show: true,
  143. type: "cylinder",
  144. },
  145. ],
  146. },
  147. {
  148. id: "4",
  149. name: "A04",
  150. speed: 100,
  151. positions: [
  152. [117.24595, 31.843448, 800],
  153. [117.184863, 31.841885, 800],
  154. ],
  155. model: {
  156. show: true,
  157. url: "//data.mars3d.cn/gltf/mars/MQ-9-Predator.glb",
  158. scale: 1,
  159. minimumPixelSize: 60,
  160. },
  161. path: {
  162. show: true,
  163. color: "#ffff00",
  164. opacity: 0.5,
  165. width: 1,
  166. isAll: false,
  167. },
  168. shadow: [
  169. {
  170. show: true,
  171. type: "wall",
  172. color: "#a8009d",
  173. },
  174. ],
  175. },
  176. {
  177. id: "5",
  178. name: "A05",
  179. speed: 100,
  180. positions: [
  181. [117.281458, 31.873736, 1000],
  182. [117.280849, 31.679814, 1000],
  183. ],
  184. model: {
  185. show: true,
  186. url: "//data.mars3d.cn/gltf/mars/zhanji.glb",
  187. scale: 0.01,
  188. minimumPixelSize: 60,
  189. },
  190. path: {
  191. show: true,
  192. color: "#ffff00",
  193. opacity: 0.5,
  194. width: 1,
  195. isAll: false,
  196. },
  197. shadow: [
  198. {
  199. show: true,
  200. type: "cylinder",
  201. color: "#ffff00",
  202. },
  203. ],
  204. },
  205. {
  206. id: "6",
  207. name: "A06",
  208. speed: 100,
  209. positions: [
  210. [117.259156, 31.831094, 600],
  211. [117.22723, 31.791011, 700],
  212. [117.190839, 31.751602, 1000],
  213. ],
  214. model: {
  215. show: true,
  216. url: "//data.mars3d.cn/gltf/mars/MQ-9-Predator.glb",
  217. scale: 1,
  218. minimumPixelSize: 60,
  219. },
  220. path: {
  221. show: true,
  222. color: "#ffff00",
  223. opacity: 0.5,
  224. width: 1,
  225. isAll: false,
  226. },
  227. shadow: [
  228. {
  229. show: true,
  230. type: "wall",
  231. color: "#ffff00",
  232. },
  233. ],
  234. },
  235. {
  236. id: "7",
  237. name: "A07",
  238. speed: 100,
  239. positions: [
  240. [117.224735, 31.868128, 500],
  241. [117.226971, 31.810324, 500],
  242. ],
  243. model: {
  244. show: true,
  245. url: "//data.mars3d.cn/gltf/mars/zhanji.glb",
  246. scale: 0.01,
  247. minimumPixelSize: 60,
  248. },
  249. path: {
  250. show: true,
  251. color: "#ffff00",
  252. opacity: 0.5,
  253. width: 1,
  254. isAll: false,
  255. },
  256. shadow: [
  257. {
  258. show: true,
  259. type: "cylinder",
  260. color: "#0047d4",
  261. },
  262. ],
  263. },
  264. {
  265. id: "8",
  266. name: "A08",
  267. speed: 100,
  268. positions: [
  269. [117.169828, 31.83365, 900],
  270. [117.189117, 31.83417, 900],
  271. [117.211684, 31.83573, 900],
  272. [117.232588, 31.833755, 900],
  273. ],
  274. model: {
  275. show: true,
  276. url: "//data.mars3d.cn/gltf/mars/MQ-9-Predator.glb",
  277. scale: 1,
  278. minimumPixelSize: 60,
  279. },
  280. path: {
  281. show: true,
  282. color: "#ffff00",
  283. opacity: 0.5,
  284. width: 1,
  285. isAll: false,
  286. },
  287. shadow: [
  288. {
  289. show: true,
  290. type: "wall",
  291. color: "#d9d900",
  292. },
  293. ],
  294. },
  295. {
  296. id: "9",
  297. name: "A09",
  298. positions: [
  299. [117.189192, 31.856163, 100],
  300. [117.188899, 31.818951, 100],
  301. ],
  302. model: {
  303. show: true,
  304. url: "//data.mars3d.cn/gltf/mars/zhanji.glb",
  305. scale: 0.01,
  306. minimumPixelSize: 60,
  307. },
  308. path: {
  309. show: true,
  310. color: "#ffff00",
  311. opacity: 0.5,
  312. width: 1,
  313. isAll: false,
  314. },
  315. shadow: [
  316. {
  317. show: true,
  318. type: "cylinder",
  319. color: "#00b0cf",
  320. },
  321. ],
  322. },
  323. {
  324. id: "10",
  325. name: "A10",
  326. speed: 200,
  327. positions: [
  328. [117.163332, 31.853159, 1000],
  329. [117.181507, 31.853928, 1000],
  330. [117.210678, 31.858777, 1000],
  331. [117.232448, 31.853065, 1000],
  332. ],
  333. model: {
  334. show: true,
  335. url: "//data.mars3d.cn/gltf/mars/MQ-9-Predator.glb",
  336. scale: 1,
  337. minimumPixelSize: 60,
  338. },
  339. path: {
  340. show: true,
  341. color: "#ffff00",
  342. opacity: 0.5,
  343. width: 1,
  344. isAll: false,
  345. },
  346. shadow: [
  347. {
  348. show: true,
  349. type: "wall",
  350. color: "#ff0000",
  351. },
  352. ],
  353. },
  354. ];
  355. for (var i = 0, len = arrLine.length; i < len; i++) {
  356. var flydata = arrLine[i];
  357. flydata.label = {
  358. show: true,
  359. font_size: 20,
  360. pixelOffsetX: 0,
  361. pixelOffsetY: -20,
  362. scaleByDistance: true,
  363. scaleByDistance_far: 80000,
  364. scaleByDistance_farValue: 0.4,
  365. distanceDisplayCondition: true,
  366. distanceDisplayCondition_far: 80000,
  367. };
  368. flydata.model = {
  369. ...flydata.model,
  370. distanceDisplayCondition: true,
  371. distanceDisplayCondition_near: 0,
  372. distanceDisplayCondition_far: 80000,
  373. };
  374. //当视角距离超过80000米(distanceDisplayCondition_far定义的) 后显示为点对象的样式
  375. flydata.point = {
  376. show: true,
  377. color: "#ffff00",
  378. pixelSize: 5,
  379. distanceDisplayCondition: true,
  380. distanceDisplayCondition_near: 80000,
  381. distanceDisplayCondition_far: Number.MAX_VALUE,
  382. };
  383. // flydata.forwardExtrapolationType = Cesium.ExtrapolationType.NONE;
  384. var roamLine = new mars3d.graphic.RoamLine(flydata);
  385. graphicLayer.addGraphic(roamLine);
  386. //启动漫游
  387. roamLine.start();
  388. }
  389. }
  390. </script>
  391. </body>
  392. </html>