pathPlanning.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. define(['html!templates/menu/baseCalc/pathPlanning',
  2. 'css!styles/tools/toolPublicPopup',
  3. 'css!styles/menu/baseCalc/pathPlanning',
  4. ],
  5. function (tplLayout) {
  6. /**
  7. * 模块状态,用于存储模块的状态 例如:收起,关闭
  8. * @type {Object}
  9. */
  10. var status = {
  11. initialized: false//是否初始化
  12. };
  13. /**
  14. * 模块数据 用于数据存储和外部调用
  15. * @type {Object}
  16. * 数据存放
  17. */
  18. var modValue = {
  19. data: {},
  20. handler: null,
  21. startPointId: "",
  22. stopPointId: "",
  23. startPointStyle: {
  24. color: "#2ecc71",
  25. fontFillColor: "#fff000",
  26. labelOffset: -15,
  27. },
  28. stopPointStyle: {
  29. color: "#3498db",
  30. fontFillColor: "#fff000",
  31. labelOffset: 15,
  32. },
  33. polylineEntity: null
  34. };
  35. /**
  36. * 初始化并订阅事件
  37. * @return {[type]} [description]
  38. */
  39. function open(data) {
  40. if (!status.initialized) {
  41. setLayout();
  42. bindEvent();
  43. subscribe();
  44. status.initialized = true;
  45. } else {
  46. // 重置
  47. reset();
  48. }
  49. modValue.data = data;
  50. $("#pathPlanningModal .title").text(data.label);
  51. ONEMAP.C.publisher.publish({
  52. modName: 'pathPlanning'
  53. }, 'baseCalc:active');
  54. };
  55. function setLayout() {
  56. $('body').append(tplLayout);
  57. //拖拽
  58. $("#pathPlanningModal .popup-ct").dragmove($('#pathPlanningModal'));
  59. };
  60. /**
  61. * 事件绑定
  62. */
  63. function bindEvent() {
  64. $("#pathPlanningModal .close").bind('click', function () {
  65. close();
  66. });
  67. $("#pathPlanningModal .btn-default.sure").bind('click', function () {
  68. execute()
  69. });
  70. $("#pathPlanningModal .btn-default.clickStart").bind('click', function () {
  71. clearPolyline();
  72. getMapClickEvent(function (lonlat) {
  73. clearSingleMarker(modValue.startPointId, "startPointId")
  74. $("#pathPlanningForm .startPointLon").val(lonlat.lon);
  75. $("#pathPlanningForm .startPointLat").val(lonlat.lat);
  76. modValue.startPointId = addMarker(lonlat.lon, lonlat.lat, modValue.startPointStyle, "起点")
  77. })
  78. });
  79. $("#pathPlanningModal .btn-default.clickStop").bind('click', function () {
  80. clearPolyline();
  81. getMapClickEvent(function (lonlat) {
  82. clearSingleMarker(modValue.stopPointId, "stopPointId")
  83. $("#pathPlanningForm .stopPointLon").val(lonlat.lon);
  84. $("#pathPlanningForm .stopPointLat").val(lonlat.lat);
  85. modValue.stopPointId = addMarker(lonlat.lon, lonlat.lat, modValue.stopPointStyle, "终点")
  86. })
  87. });
  88. $("#pathPlanningModal .btn-default.cleanStart").bind('click', function () {
  89. $("#pathPlanningForm .startPointLon").val("");
  90. $("#pathPlanningForm .startPointLat").val("");
  91. clearSingleMarker(modValue.startPointId, "startPointId")
  92. });
  93. $("#pathPlanningModal .btn-default.clearStop").bind('click', function () {
  94. $("#pathPlanningForm .stopPointLon").val("");
  95. $("#pathPlanningForm .stopPointLat").val("");
  96. clearSingleMarker(modValue.stopPointId, "stopPointId")
  97. });
  98. //回车执行
  99. $('#pathPlanningInput, #jumpToLatInput').bind('keydown', function (e) {
  100. if (e.keyCode === 13) {
  101. execute();
  102. }
  103. });
  104. };
  105. function getMapClickEvent(callback) {
  106. if (modValue.handler != null) return;
  107. modValue.handler = new Cesium.ScreenSpaceEventHandler(map3DViewer.map.canvas);
  108. // 监听鼠标点击事件
  109. modValue.handler.setInputAction(function (click) {
  110. // 使用pick函数获取点击位置的实际位置
  111. // var cartesian = map3DViewer.map.scene.pickPosition(click.position);
  112. // var cartesian = map3DViewer.map.camera.pickEllipsoid(click.position);
  113. let cartesian = map3DViewer.map.scene.globe.pick(map3DViewer.map.camera.getPickRay(click.position), map3DViewer.map.scene);
  114. if (Cesium.defined(cartesian)) {
  115. // 将笛卡尔坐标转换为经纬度坐标
  116. var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  117. var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
  118. var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
  119. // var heightString = cartographic.height.toFixed(2);
  120. // console.log('经度:' + longitudeString + ',纬度:' + latitudeString + ',高度:' + heightString)
  121. }
  122. if (isNaN(longitudeString) || isNaN(latitudeString)) {
  123. alert("当前获取坐标有误,请重新获取")
  124. removeMapClickEvent();
  125. throw "当前获取坐标有误,请重新获取";
  126. }
  127. callback({
  128. lon: Number(longitudeString),
  129. lat: Number(latitudeString)
  130. })
  131. removeMapClickEvent();
  132. }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  133. modValue.handler.setInputAction(function (click) {
  134. removeMapClickEvent();
  135. }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  136. }
  137. function removeMapClickEvent() {
  138. if (modValue.handler) {
  139. modValue.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
  140. modValue.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  141. modValue.handler = null;
  142. }
  143. }
  144. /**
  145. * 注册监听
  146. * @type {Function}
  147. */
  148. function subscribe() {
  149. ONEMAP.C.publisher.subscribe(remove, 'baseCalc:active');
  150. };
  151. /**
  152. * 关闭模块
  153. * @return {[type]} [description]
  154. */
  155. function remove(options) {
  156. if (options.modName != 'pathPlanning') {
  157. close();
  158. } else {
  159. $("#pathPlanningModal").show();
  160. }
  161. }
  162. function reset() {
  163. $("#pathPlanningForm .startPointLon").val("");
  164. $("#pathPlanningForm .startPointLat").val("");
  165. $("#pathPlanningForm .stopPointLon").val("");
  166. $("#pathPlanningForm .stopPointLat").val("");
  167. $("#pathPlanningForm .outputResult").text("")
  168. clearMarker();
  169. clearPolyline();
  170. removeMapClickEvent();
  171. }
  172. function close() {
  173. $("#pathPlanningModal").hide();
  174. reset();
  175. }
  176. // 执行
  177. function execute() {
  178. // 检测坐标
  179. let startPointLon = $("#pathPlanningForm .startPointLon").val()
  180. let startPointLat = $("#pathPlanningForm .startPointLat").val()
  181. let stopPointLon = $("#pathPlanningForm .stopPointLon").val()
  182. let stopPointLat = $("#pathPlanningForm .stopPointLat").val()
  183. if (startPointLon == "" || startPointLat == "" || stopPointLon == "" || stopPointLat == "") {
  184. alert("请完善转换参数")
  185. throw "请完善转换参数 "
  186. }
  187. startPointLon = Number(startPointLon)
  188. startPointLat = Number(startPointLat)
  189. stopPointLon = Number(stopPointLon)
  190. stopPointLat = Number(stopPointLat)
  191. if (isNaN(startPointLon) || isNaN(startPointLat) || isNaN(stopPointLon) || isNaN(stopPointLat)) {
  192. alert("请输入正确的数字格式")
  193. throw "请输入正确的数字格式"
  194. }
  195. // 检测坐标范围
  196. if (judge(startPointLon, startPointLat) && judge(stopPointLon, stopPointLat)) {
  197. // 根据转换类型,访问接口获取转换后的数据
  198. // 添加 转前点,转后点
  199. getResult(startPointLon, startPointLat, stopPointLon, stopPointLat);
  200. }
  201. }
  202. /**
  203. * 获取输入信息并跳转到指定的坐标
  204. * @type {Function}
  205. * @private
  206. */
  207. function judge(lng, lat) {
  208. if (!L.Util.verifyLatLng(lat, lng)) {
  209. alert('请正确输入经纬范围(经度0-180、纬度0-90)');
  210. return false;
  211. }
  212. return true;
  213. }
  214. /**
  215. * 获取并计算经纬度
  216. * @private
  217. */
  218. function getResult(startPointLon, startPointLat, stopPointLon, stopPointLat) {
  219. // let startArr = Cesium.CoordTransform.coordinate.wgs84_to_gcj02(startPointLon, startPointLat)
  220. // let stopArr = Cesium.CoordTransform.coordinate.wgs84_to_gcj02(stopPointLon, stopPointLat)
  221. $.ajax({
  222. type: "get",
  223. dataType: 'json',
  224. url: onemapUrlConfig.PROXY_URL + "/driving",
  225. data: {
  226. origin: startPointLon + "," + startPointLat,
  227. destination: stopPointLon + "," + stopPointLat,
  228. // origin: Math.floor(startArr[0] * 1000000) / 1000000 + "," + Math.floor(startArr[1] * 1000000) / 1000000,
  229. // destination: Math.floor(stopArr[0] * 1000000) / 1000000 + "," + Math.floor(stopArr[1] * 1000000) / 1000000,
  230. type: 0,
  231. proxyToken: localStorage.getItem("systemToken"),
  232. },
  233. success: function (data) {
  234. if (data.status == 1) {
  235. setOutputResult(data.route.paths[0].steps)
  236. // $("#pathPlanningForm .outputResult").text(data.content.toFixed(6) + "米")
  237. }
  238. },
  239. error: function (error) {
  240. console.log(error)
  241. }
  242. });
  243. return;
  244. };
  245. function setOutputResult(data) {
  246. $("#pathPlanningForm .outputResult").empty()
  247. let html = "";
  248. let polyline = []
  249. for (let i = 0; i < data.length; i++) {
  250. html += "<tr><td><span>" + (i + 1) + ".</span></td><td><span>" + data[i].instruction + "</span></td></tr>"
  251. // 绘制路径 存储
  252. let polylineItem = data[i].polyline.split(";")
  253. // .map(function (item) {
  254. // let coor = item.split(",")
  255. // return Cesium.CoordTransform.coordinate.gcj02_to_wgs84(Number(coor[0]), Number(coor[1]))
  256. // })
  257. .join(",").split(",").map(function (num) {
  258. return Number(num);
  259. })
  260. polyline.push(polylineItem)
  261. }
  262. modValue.polylineEntity = map3DViewer.map.entities.add({
  263. polyline: {
  264. positions: Cesium.Cartesian3.fromDegreesArray(polyline.join(",").split(",").map(function (num) {
  265. return Number(num);
  266. })),
  267. width: 5,
  268. material: Cesium.Color.RED,
  269. clampToGround: true,
  270. },
  271. })
  272. $("#pathPlanningForm .outputResult").append(html);
  273. }
  274. function addMarker(lon, lat, style, text) {
  275. let entity = map3DViewer.map.entities.add({
  276. name: '添加点',
  277. position: Cesium.Cartesian3.fromDegrees(lon, lat, 0),
  278. point: {
  279. color: Cesium.Color.fromCssColorString(style.color), //颜色
  280. pixelSize: 10, //大小
  281. outlineColor: Cesium.Color.YELLOW, //轮廓颜色
  282. outlineWidth: 1
  283. },
  284. label: {
  285. pixelOffset: new Cesium.Cartesian2(0, style.labelOffset),
  286. text: text,
  287. font: '24px',
  288. fillColor: Cesium.Color.fromCssColorString(style.color)
  289. }
  290. })
  291. return entity._id;
  292. }
  293. /**
  294. * 清除marker
  295. */
  296. function clearMarker() {
  297. if (modValue.startPointId) {
  298. map3DViewer.map.entities.removeById(modValue.startPointId)
  299. modValue.startPointId = ""
  300. }
  301. if (modValue.stopPointId) {
  302. map3DViewer.map.entities.removeById(modValue.stopPointId)
  303. modValue.stopPointId = ""
  304. }
  305. }
  306. /**
  307. * 清除轨迹
  308. */
  309. function clearPolyline() {
  310. if (modValue.polylineEntity) {
  311. map3DViewer.map.entities.remove(modValue.polylineEntity)
  312. modValue.polylineEntity = null;
  313. }
  314. }
  315. function clearSingleMarker(id, type) {
  316. if (id) {
  317. map3DViewer.map.entities.removeById(id)
  318. modValue[type] = ""
  319. return;
  320. }
  321. }
  322. return ONEMAP.M.pathPlanningForm = {
  323. open: open,
  324. clearMarker: clearMarker,
  325. clearPolyline: clearPolyline
  326. };
  327. })