print.js 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083
  1. /**
  2. * @fileoverview 打印 模块
  3. * @author Song.Huang
  4. * @version 1.0.0
  5. */
  6. var routeSearchFDTT = function () {
  7. /** 必经点+规避点路线规划
  8. * [getNaviPathPro description]
  9. * @param {[type]} options [viaAry(第一个为起点,最后一个为终点,中间的为必经点) avoidAry(规避点数组)]
  10. * @param {[type]} callbackFunc [description]
  11. * @return {[type]} [description]
  12. */
  13. this.getNaviPath = function (options, callbackFunc) {
  14. var sUrl = onemapUrlConfig.routeSearchDataUrl +
  15. '?via=' + JSON.stringify(options.viaAry) +
  16. '&avoid=' + JSON.stringify((options.avoidAry || []));
  17. $.ajax({
  18. url: sUrl,
  19. type: 'GET',
  20. dataType: 'jsonp'
  21. })
  22. .done(function (data) {
  23. callbackFunc(data);
  24. })
  25. .fail(function () {});
  26. }
  27. };
  28. var routeSearchNew = function () {
  29. /** 必经点+规避点路线规划
  30. * [getNaviPathPro description]
  31. * @param {[type]} options [viaAry(第一个为起点,最后一个为终点,中间的为必经点) avoidAry(规避点数组)]
  32. * @param {[type]} callbackFunc [description]
  33. * @return {[type]} [description]
  34. */
  35. this.getNaviPath = function (options, callbackFunc) {
  36. var pointArr = [];
  37. for (var i = 0; i < options.viaAry.length; i++) {
  38. pointArr.push(L.latLng(options.viaAry[i][1], options.viaAry[i][0]));
  39. }
  40. window.routingControl = L.Routing.control(
  41. L.extend({}, {
  42. waypoints: pointArr,
  43. //geocoder: L.Control.Geocoder.nominatim(),
  44. routeWhileDragging: true,
  45. reverseWaypoints: true,
  46. showAlternatives: true,
  47. simplifyGeometry: false,
  48. geometryOnly: true,
  49. altLineOptions: {
  50. styles: [{
  51. color: 'black',
  52. opacity: 0.15,
  53. weight: 9
  54. },
  55. {
  56. color: 'white',
  57. opacity: 0.8,
  58. weight: 6
  59. },
  60. {
  61. color: 'blue',
  62. opacity: 0.5,
  63. weight: 2
  64. }
  65. ]
  66. },
  67. callback: callbackFunc
  68. }))
  69. };
  70. }
  71. // var routeSearchF = function () {
  72. // /** 必经点+规避点路线规划
  73. // * [getNaviPathPro description]
  74. // * @param {[type]} options [viaAry(第一个为起点,最后一个为终点,中间的为必经点) avoidAry(规避点数组)]
  75. // * @param {[type]} callbackFunc [description]
  76. // * @return {[type]} [description]
  77. // */
  78. // this.getNaviPath = function (options, callbackFunc) {
  79. // var orig, dest, mid, afUrl;
  80. // var viaAryLength = options.viaAry.length;
  81. // if (viaAryLength < 3) {
  82. // afUrl = '?token=25cc55a69ea7422182d00d6b7c0ffa93&source=1&sPoint=' + options.viaAry[0] +
  83. // '&ePoint=' + options.viaAry[1] +
  84. // '&st=' + options.searchType;
  85. // } else if (viaAryLength >= 3) {
  86. // var midData; {
  87. // for (var i = 1; i < viaAryLength - 1; i++) {
  88. // var curmidData = JSON.stringify(options.viaAry[i]).replace('[', '').replace(']', '');
  89. // if (i === 1) {
  90. // midData = curmidData;
  91. // } else {
  92. // midData = midData + ";" + curmidData;
  93. // }
  94. // }
  95. // }
  96. // afUrl = '?token=25cc55a69ea7422182d00d6b7c0ffa93&source=1&sPoint=' + options.viaAry[0] +
  97. // '&ePoint=' + options.viaAry[viaAryLength - 1] +
  98. // '&wayPoints=' + midData +
  99. // '&st=' + options.searchType;
  100. // }
  101. // var sUrl = onemapUrlConfig.siWeiRouteDataUrl + '/service/route/driving2' +
  102. // afUrl;
  103. // $.ajax({
  104. // url: sUrl,
  105. // type: 'GET',
  106. // dataType: 'json'
  107. // })
  108. // .done(function (data) {
  109. // var segArr = new Array();
  110. // var coorArr = new Array();
  111. // var coors = "";
  112. // var doorArr = new Array();
  113. // if (data.data.rows.length > 0) {
  114. // for (var i = 0; i < data.data.rows[0].item.length; i++) {
  115. // if (data.data.rows[0].item[i].routelatlon) {
  116. // coorArr[i] = data.data.rows[0].item[i].routelatlon.replace(/;/g, ",");
  117. // } else {
  118. // coorArr[i] = data.data.rows[0].item[i].turnlatlon.replace(/;/g, ",");
  119. // }
  120. // var roadLength;
  121. // var roadOld = data.data.rows[0].item[i].distance;
  122. // roadLength = parseFloat(data.data.rows[0].item[i].distance);
  123. // segArr[i] = {
  124. // "accessorialInfo": "",
  125. // "action": "",
  126. // "coor": coorArr[i],
  127. // "coorAry": coorArr[i].split(","),
  128. // "direction": 0.0,
  129. // "driveTime": "",
  130. // "form": "",
  131. // "grade": "",
  132. // "roadLength": roadLength,
  133. // "roadName": data.data.rows[0].item[i].streetName,
  134. // "soundID": "",
  135. // "textInfo": data.data.rows[0].item[i].strguide,
  136. // "videoID": ""
  137. // }
  138. // if (data.data.rows[0].item[i].routelatlon) {
  139. // coors += data.data.rows[0].item[i].routelatlon.replace(/;/g, ",");
  140. // } else {
  141. // coors += data.data.rows[0].item[i].turnlatlon.replace(/;/g, ",");
  142. // }
  143. // }
  144. // var cbData = {
  145. // "code": 0,
  146. // "data": {
  147. // "bounds": options.viaAry[0] + "," + options.viaAry[viaAryLength - 1],
  148. // "cache": false,
  149. // "coors": coors,
  150. // "count": parseInt(data.data.rows[0].count),
  151. // "message": "ok",
  152. // //"searchtime": parseInt(data.lines.time),
  153. // "segmengList": segArr
  154. // }
  155. // }
  156. // } else {
  157. // callbackFunc({
  158. // "code": 0,
  159. // "data": []
  160. // })
  161. // }
  162. // callbackFunc(cbData);
  163. // })
  164. // .fail(function () {});
  165. // }
  166. // };
  167. var addressSearchF = function () {
  168. /**
  169. * 通过缩放等级和坐标查询位置信息
  170. * @param {[type]} options [latLng(经纬度数组[纬度,经度]) zoom(地图缩放比例)]
  171. * @param {[type]} callbackFunc [description]
  172. * @return {[type]} [description]
  173. */
  174. this.getAddressInfo = function (options, callbackFunc) {
  175. var sUrl = onemapUrlConfigNetwork.addressSearchDataUrl + '/v1.0/address/near/' +
  176. '?z=' + options.zoom +
  177. '&lon=' + options.latLng[1] +
  178. '&lat=' + options.latLng[0];
  179. $.ajax({
  180. url: sUrl,
  181. type: 'GET',
  182. dataType: 'jsonp'
  183. })
  184. .done(function (data) {
  185. callbackFunc(data);
  186. })
  187. .fail(function () {});
  188. }
  189. };
  190. /**
  191. * 打印
  192. * @exports printer
  193. * @type {Object}
  194. */
  195. var printer = {
  196. /**
  197. * 初始化
  198. * @type {Function}
  199. */
  200. init: function () {
  201. var _this = this;
  202. // if (map23DConfig.netType == 1) {
  203. // $.each(map23DConfigIntranet, function (i, t) {
  204. // map23DConfig[i] = t
  205. // })
  206. // $.each(onemapUrlConfigIntranet, function (i, t) {
  207. // onemapUrlConfig[i] = t
  208. // })
  209. // } else {
  210. // $.each(map23DConfigNetwork, function (i, t) {
  211. // map23DConfig[i] = t
  212. // })
  213. // $.each(onemapUrlConfigNetwork, function (i, t) {
  214. // onemapUrlConfig[i] = t
  215. // })
  216. // }
  217. //解析URL判断打印类型
  218. _this._urlParse();
  219. //系统初始化路径服务
  220. // if (map23DConfig.routType == 'New') {
  221. // }
  222. routeSearchF = routeSearchNew
  223. },
  224. /**
  225. * url解析
  226. * @type {Function}
  227. * @private
  228. */
  229. _urlParse: function () {
  230. var _this = this;
  231. switch (_this._getQueryString('m')) {
  232. case 'directions': //路线规划
  233. directionsPrint.init({
  234. mapType: _this._getQueryString('map').split('|')[0],
  235. mapZoom: parseFloat(_this._getQueryString('map').split('|')[1]),
  236. mapCenter: [parseFloat(_this._getQueryString('map').split('|')[2]), parseFloat(_this._getQueryString('map').split('|')[3])],
  237. zoom: parseFloat(_this._getQueryString('dir').split('|')[4]),
  238. startPoint: [parseFloat(_this._getQueryString('dir').split('|')[0]), parseFloat(_this._getQueryString('dir').split('|')[1])],
  239. stopPoint: [parseFloat(_this._getQueryString('dir').split('|')[2]), parseFloat(_this._getQueryString('dir').split('|')[3])],
  240. startName: _this._getQueryString('place').split('|')[0],
  241. stopName: _this._getQueryString('place').split('|')[1],
  242. acrossPoints: JSON.parse(_this._getQueryString('across')),
  243. searchType: JSON.parse(_this._getQueryString('searchType')),
  244. avoidPoints: JSON.parse(_this._getQueryString('avoid')),
  245. thematicUrl: _this._getQueryString('thematic') ? CryptoJS.enc.Base64.parse(_this._getQueryString('thematic')).toString(CryptoJS.enc.Utf8) : false,
  246. plan: JSON.parse(_this._getQueryString('plan')) ? Number(_this._getQueryString('plan')) : 0
  247. //CryptoJS.enc.Base64.parse([_this._getQueryString('thematic')]).toString(CryptoJS.enc.Utf8)
  248. });
  249. break;
  250. }
  251. },
  252. /**
  253. * Url解析
  254. * @type {Function}
  255. * @param name {String} 参数键
  256. * @returns {string} 参数值
  257. * @private
  258. */
  259. _getQueryString: function (name) {
  260. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  261. var r = window.location.search.substr(1).match(reg);
  262. if (r != null) return decodeURI(r[2]);
  263. return '';
  264. }
  265. };
  266. /**路线打印
  267. * @exports directionsPrint
  268. * @type {Object}
  269. */
  270. //http://www.domain.com/print.html?
  271. // m=directions 模块类型
  272. // &dir=39.99605985169435|116.24221801757812|39.916582935817154|116.4166259765625|15 起点坐标|终点坐标|坐标查询缩放比例
  273. // &map=1|10|39.9|116.3 类型|缩放比例|lat|lon
  274. var directionsPrint = {
  275. /**
  276. * 默认参数
  277. * @type {Object}
  278. */
  279. options: {
  280. mapType: 1, //地图底图类型
  281. mapZoom: 10, //地图缩放比
  282. mapCenter: [0, 0], //地图中心点
  283. zoom: 19, //起始点查点zoom
  284. startPoint: [0, 0], //起点
  285. stopPoint: [0, 0], //终点
  286. startName: '',
  287. stopName: '',
  288. acrossPoints: [], //途经点
  289. avoidPoints: [], //规避点
  290. searchType: 1,
  291. plan: 0
  292. },
  293. /**路径点集合
  294. * @type {Object}
  295. * @default {}
  296. */
  297. _markerObjs: {},
  298. /**
  299. * 初始化 获取起点/终点坐标-查询起点/终点信息-查询路线信息-画路径-列表路径点
  300. * @type {Function}
  301. * @param options {Object}
  302. * @see options
  303. */
  304. init: function (options) {
  305. var _this = this;
  306. for (var o in options) {
  307. if (options[o] !== null) {
  308. _this.options[o] = options[o];
  309. }
  310. }
  311. var _step = 0;
  312. //设置标题
  313. _this.title = $('<p>从<strong class="f">' + options.startName + '</strong>到<strong class="t">' + options.stopName + '</strong>的路线</p>').appendTo($('#title'));
  314. //地图初始化
  315. _this._mapShow();
  316. //设置起始点图标
  317. _this._setMarkers({
  318. type: 'start',
  319. latLng: _this.options.startPoint
  320. });
  321. _this._getPointAddress(_this.options.zoom, {
  322. lat: _this.options.startPoint[0],
  323. lng: _this.options.startPoint[1]
  324. }, function (data) {
  325. _this.startPointInfo = {
  326. region: data.region,
  327. address: _this.options.startName
  328. };
  329. _this.startMarker.bindPopup(_this.startPointInfo.address, {
  330. maxWidth: 100,
  331. minWidth: 100
  332. });
  333. //_this.title.find('.f').append(data.address);
  334. _this._markerObjs[100001] = {
  335. actionType: 'ico_p_2',
  336. popInfo: _this.startPointInfo.address,
  337. center: [_this.startMarker.getLatLng().lat, _this.startMarker.getLatLng().lng]
  338. };
  339. if (_step === 1) {
  340. //获取路线信息
  341. _this._getDirectionsLine();
  342. } else {
  343. _step++;
  344. }
  345. });
  346. for (var i = 0, l = _this.options.acrossPoints.length; i < l; i++) {
  347. _this._setMarkers({
  348. type: 'across',
  349. latLng: _this.options.acrossPoints[i]
  350. });
  351. }
  352. for (var i = 0, l = _this.options.avoidPoints.length; i < l; i++) {
  353. _this._setMarkers({
  354. type: 'avoid',
  355. latLng: _this.options.avoidPoints[i]
  356. });
  357. }
  358. _this._setMarkers({
  359. type: 'stop',
  360. latLng: _this.options.stopPoint
  361. });
  362. _this._getPointAddress(_this.options.zoom, {
  363. lat: _this.options.stopPoint[0],
  364. lng: _this.options.stopPoint[1]
  365. }, function (data) {
  366. _this.stopPointInfo = {
  367. region: data.region,
  368. address: _this.options.stopName
  369. };
  370. _this.stopMarker.bindPopup(_this.stopPointInfo.address, {
  371. maxWidth: 100,
  372. minWidth: 100
  373. });
  374. //_this.title.find('.t').append(data.address);
  375. _this._markerObjs[100002] = {
  376. actionType: 'ico_p_1',
  377. popInfo: _this.stopPointInfo.address,
  378. center: [_this.stopMarker.getLatLng().lat, _this.stopMarker.getLatLng().lng]
  379. };
  380. if (_step === 1) {
  381. //获取路线信息
  382. _this._getDirectionsLine();
  383. } else {
  384. _step++;
  385. }
  386. });
  387. //打印按钮事件
  388. $('#btnPrint').removeAttr('disabled').removeClass('disabled').bind('click', function () {
  389. $('#remarks p').append($('#remarks textarea').val());
  390. window.print();
  391. });
  392. //
  393. $('#printOption').empty().append('<p class="line">为所有路段显示:<a id="abtnHideAllPointMap" href="javascript:void(0);">仅文本</a> | <a id="abtnShowAllPointMap" href="javascript:void(0);">地图</a> <label><input type="checkbox" id="checkBigMapShow" checked />包含大图</label> </p>');
  394. $('#abtnHideAllPointMap').bind('click', function () {
  395. $('.abtn-show-text').each(function () {
  396. $(this).click();
  397. });
  398. });
  399. $('#abtnShowAllPointMap').bind('click', function () {
  400. $('.abtn-show-map').each(function () {
  401. $(this).click();
  402. });
  403. });
  404. $('#checkBigMapShow').bind('click', function () {
  405. if ($(this).is(':checked')) {
  406. $('#mapHolder').show();
  407. $('#directionsResult').css({
  408. pageBreakBefore: "always"
  409. });
  410. } else {
  411. $('#mapHolder').hide();
  412. $('#directionsResult').css({
  413. pageBreakBefore: "auto"
  414. });
  415. }
  416. });
  417. },
  418. /**
  419. * 显示专题图数据
  420. * @private
  421. */
  422. _setThematic: function () {
  423. var _this = this;
  424. if (_this.options.thematicUrl) {
  425. L.tileLayer(_this.options.thematicUrl).addTo(_this._map);
  426. }
  427. },
  428. /**
  429. * 获取坐标对应的地名
  430. * @type {Function}
  431. * @param zoom {Number}
  432. * @param latLng {Object}
  433. * @param callBack_func {Function}
  434. * @private
  435. */
  436. _getPointAddress: function (zoom, latLng, callBack_func) {
  437. var addressSearch = new addressSearchF();
  438. addressSearch.getAddressInfo({
  439. zoom: zoom,
  440. latLng: [latLng.lat, latLng.lng]
  441. }, function (data) {
  442. data = data.data;
  443. if (data.hasOwnProperty('address')) {
  444. if (data.address.length == 0) {
  445. data.address = "未知地点";
  446. }
  447. }
  448. callBack_func(data);
  449. })
  450. },
  451. /**
  452. * 获取路线
  453. * @type {Function}
  454. * @private
  455. */
  456. _getDirectionsLine: function () {
  457. var _this = this;
  458. var via = [];
  459. var avoid = [];
  460. via.push([_this.options.startPoint[1], _this.options.startPoint[0]]);
  461. for (var viaItem in _this.options.acrossPoints) {
  462. if (_this.options.acrossPoints.hasOwnProperty(viaItem)) {
  463. via.push([_this.options.acrossPoints[viaItem][1], _this.options.acrossPoints[viaItem][0]]);
  464. }
  465. }
  466. via.push([_this.options.stopPoint[1], _this.options.stopPoint[0]]);
  467. for (var avoidItem in _this.options.avoidPoints) {
  468. if (_this.options.avoidPoints.hasOwnProperty(avoidItem)) {
  469. avoid.push([_this.options.avoidPoints[avoidItem].latlng.lng, _this.options.avoidPoints[avoidItem].latlng.lat]);
  470. }
  471. }
  472. var searchOptions = {
  473. viaAry: via,
  474. searchType: _this.options.searchType
  475. };
  476. var routeSearch = new routeSearchF();
  477. routeSearch.getNaviPath(searchOptions, function (data) {
  478. // data = data.data;
  479. // if (!data.hasOwnProperty('segmengList')) {
  480. // alert('此线路无路径数据,无法规划路径!');
  481. // return false;
  482. // }
  483. // _this._directionsDataResult = data;
  484. // _this._drawCarPolyline({
  485. // opacity: 0.8,
  486. // lineNum: 0,
  487. // color: '#0099ff',
  488. // weight: 6
  489. // });
  490. //界面重置
  491. if (data.length == 0) {
  492. setNotResultHtml('此线路无路径数据,无法规划路径!');
  493. return false;
  494. }
  495. _this.navigationResult = [];
  496. for (var i = 0; i < data.length; i++) {
  497. var minlon = 0,
  498. maxlon = 0,
  499. minlat = 0,
  500. maxlat = 0;
  501. var polyline = '',
  502. allPolyline = '';
  503. _this.navigationResult.push({});
  504. //路径 全部点位(路径过长时,点位过多,渲染速度慢)
  505. for (var k = 0; k < data[i].coordinates.length; k++) {
  506. var lng = data[i].coordinates[k].lng
  507. var lat = data[i].coordinates[k].lat
  508. if (k == 0) {
  509. minlon = data[i].coordinates[k].lng
  510. maxlon = data[i].coordinates[k].lng
  511. minlat = data[i].coordinates[k].lat
  512. maxlat = data[i].coordinates[k].lat
  513. } else {
  514. if (lng < minlon) {
  515. minlon = lng
  516. }
  517. if (lng > maxlon) {
  518. maxlon = lng
  519. }
  520. if (lat < minlat) {
  521. minlat = lat
  522. }
  523. if (lat > maxlat) {
  524. maxlat = lat
  525. }
  526. }
  527. allPolyline += lng + ',' + lat + ",";
  528. }
  529. _this.navigationResult[i].coors = allPolyline;
  530. _this.navigationResult[i].coordinates = data[i].coordinates;
  531. _this.navigationResult[i].totalDistance = data[i].summary.totalDistance //米
  532. _this.navigationResult[i].totalTime = data[i].summary.totalTime //秒
  533. _this.navigationResult[i].segmengList = data[i].instructions //文字导航
  534. _this.navigationResult[i].bounds = {
  535. minlon: minlon - (maxlon - minlon) / 5,
  536. maxlon: maxlon + (maxlon - minlon) / 5,
  537. minlat: minlat - (maxlat - minlat) / 5,
  538. maxlat: maxlat + (maxlat - minlat) / 5,
  539. }; //缩放范围
  540. _this.navigationResult[i].center = {
  541. lon: (maxlon + minlon) / 2,
  542. lat: (maxlat + minlat) / 2
  543. }
  544. }
  545. _this._directionsDataResult = _this.navigationResult[_this.options.plan]
  546. _this._drawCarPolyline({
  547. opacity: 0.8,
  548. lineNum: 0,
  549. color: '#0099ff',
  550. weight: 6
  551. });
  552. _this._parseResultData();
  553. });
  554. },
  555. /**
  556. * 地图初始化
  557. * @type {Function}
  558. * @private
  559. */
  560. _mapShow: function () {
  561. var _this = this;
  562. $('#mapHolder').css({
  563. height: '800px'
  564. });
  565. //默认为线划图
  566. var layerName = 'gh';
  567. //var layer2Name = 'satellite-address';
  568. switch (_this.options.mapType) {
  569. case 'gm': //线划
  570. layerName = 'gm';
  571. break;
  572. case 'gh': //影像
  573. layerName = 'gh';
  574. break;
  575. case 'gr': //影像
  576. layerName = 'gr';
  577. break;
  578. case 'gt': //地形
  579. layerName = 'gt';
  580. break;
  581. }
  582. _this._mapOptions = {
  583. layers: [
  584. L.tileLayer(map23DConfig.tileServerUrl + '/' + layerName + '?l={z}&x={x}&y={y}', {
  585. minZoom: 1,
  586. maxZoom: 19,
  587. subdomains: map23DConfig.tileSubdomains || '',
  588. noWrap: true
  589. }),
  590. // L.tileLayer(map23DConfig.tileServerUrl + '/go?l={z}&x={x}&y={y}', {
  591. // minZoom: 1,
  592. // maxZoom: 19,
  593. // subdomains: map23DConfig.tileSubdomains || '',
  594. // noWrap: true
  595. // }),
  596. ], //map23DConfig.tileServerUrl+'/'+layerName+'?l={z}&x={x}&y={y}',
  597. center: _this.options.mapCenter,
  598. zoom: _this.options.mapZoom,
  599. maxZoom: 19,
  600. minZoom: 1,
  601. zoomControl: false
  602. };
  603. _this._map = new L.Map(
  604. 'mapHolder',
  605. _this._mapOptions
  606. );
  607. //添加相应的专题图
  608. _this._setThematic();
  609. },
  610. /**
  611. * @type {Object}
  612. * @param obj
  613. * @private
  614. */
  615. _makeMarker: function (obj) {
  616. },
  617. /**
  618. * 解析数据 填充节点
  619. * @type {Function}
  620. * @private
  621. */
  622. _parseResultData: function () {
  623. var _this = this;
  624. var list = $('<div id="lineList"></div>');
  625. var directionsResult = $('<div id="directionsResult"></div>');
  626. directionsResult.append(list);
  627. //填充起点
  628. var startLi = $('' +
  629. '<div class="line-point clearfix ge" id="startPoint">' +
  630. '<dl>' +
  631. '<dt class="action"><img src="/images/route/ico_p_2.png"/></dt>' +
  632. '<dd>' +
  633. '<p class="ac">' + _this.startPointInfo.address + '</p>' +
  634. '<p class="ti">' + _this.startPointInfo.region + '</p>' +
  635. '</dd>' +
  636. '</dl>' +
  637. '<div class="point-map" id="pMap100001"></div>' +
  638. '<div class="op">' +
  639. '显示:<a class="abtn-show-text" href="javascript:void(0)">仅文本</a> | <a class="abtn-show-map" href="javascript:void(0)" pid="100001">地图</a>' +
  640. '</div>' +
  641. '</div>');
  642. list.append(startLi);
  643. //填充规划点
  644. var lineMeter = 0;
  645. for (var i = 0, l = _this._directionsDataResult.segmengList.length; i < l; i++) {
  646. var item = _this._directionsDataResult.segmengList[i];
  647. var actionType = 'C';
  648. if (!item.modifier || item.modifier == 'Straight') { //直行
  649. actionType = 'C';
  650. }
  651. if (item.modifier == 'Left') { //左转
  652. actionType = 'TL';
  653. }
  654. if (item.modifier == 'Right') { //右转
  655. actionType = 'TR';
  656. }
  657. if (item.modifier == 'Uturn') {
  658. actionType = 'TU';
  659. }
  660. //item.coorAry = item.coor.split(',');
  661. lineMeter += item.distance;
  662. // var actionType = 'C';
  663. // if (item.textInfo.indexOf('直行') >= 0) {
  664. // actionType = 'C';
  665. // }
  666. // if (item.textInfo.indexOf('左转') >= 0) {
  667. // actionType = 'TL';
  668. // }
  669. // if (item.textInfo.indexOf('稍向左转') >= 0) {
  670. // actionType = 'TSLL';
  671. // }
  672. // if (item.textInfo.indexOf('向左急转') >= 0) {
  673. // actionType = 'TSHL';
  674. // }
  675. // if (item.textInfo.indexOf('右转') >= 0) {
  676. // actionType = 'TR';
  677. // }
  678. // if (item.textInfo.indexOf('稍向右转') >= 0) {
  679. // actionType = 'TSLR';
  680. // }
  681. // if (item.textInfo.indexOf('向右急转') >= 0) {
  682. // actionType = 'TSHR';
  683. // }
  684. // if (item.textInfo.indexOf('保持左行') >= 0) {
  685. // actionType = 'KL';
  686. // }
  687. // if (item.textInfo.indexOf('保持右行') >= 0) {
  688. // actionType = 'KR';
  689. // }
  690. // if (item.textInfo.indexOf('前方掉头') >= 0) {
  691. // actionType = 'TU';
  692. // }
  693. // if (item.textInfo.indexOf('前方右侧掉头') >= 0) {
  694. // actionType = 'TRU';
  695. // }
  696. // if (item.textInfo.indexOf('EXIT0') >= 0) {
  697. // actionType = 'EXIT';
  698. // }
  699. var lng = _this.navigationResult[_this.options.plan].coordinates[item.index].lng
  700. var lat = _this.navigationResult[_this.options.plan].coordinates[item.index].lat
  701. var nlng = _this.formatDegree(lng);
  702. var nlat = _this.formatDegree(lat);
  703. //var nLatlng = L.Util.formatHMS([item.coorAry[1], item.coorAry[0]]);
  704. //var ge = (i % 2) ? 'ge' : '';
  705. var ge = 'ge';
  706. var li = $('' +
  707. '<div pid="' + i + '" class="line-point clearfix ' + ge + '">' +
  708. '<dl>' +
  709. '<dt class="action"><img src="/images/route/D-' + actionType + '.png"/></dt>' +
  710. '<dt class="step">' + (i + 1) + '.</dt>' +
  711. '<dd>' +
  712. '<p class="ac">' + item.text + '<span>(' + nlng + ' , ' + nlat + ')</span></p>' +
  713. '<p class="ti">约' + Math.ceil(item.time / 60) + '分钟</p>' +
  714. '</dd>' +
  715. '</dl>' +
  716. '<p class="dir-length">移动 ' + Math.floor(item.distance / 1000 * 100) / 100 + '公里<br/><span>总距离 ' + Math.floor(lineMeter / 1000 * 100) / 100 + '公里</span></p>' +
  717. '<div class="point-map" id="pMap' + i + '"></div>' +
  718. '<div class="op">' +
  719. '显示:<a class="abtn-show-text" href="javascript:void(0)">仅文本</a> | <a class="abtn-show-map" href="javascript:void(0)" pid="' + i + '">地图</a>' +
  720. '</div>' +
  721. '</div>');
  722. list.append(li);
  723. _this._markerObjs[i] = {
  724. actionType: 'ico_p_3-' + actionType,
  725. popInfo: item.text,
  726. center: [lat, lng]
  727. };
  728. }
  729. //填充终点
  730. var stopLi = $('' +
  731. '<div class="line-point clearfix ge" id="stopPoint">' +
  732. '<dl>' +
  733. '<dt class="action"><img src="/images/route/ico_p_1.png"/></dt>' +
  734. '<dd>' +
  735. '<p class="ac">' + _this.stopPointInfo.address + '</p>' +
  736. '<p class="ti">' + _this.stopPointInfo.region + '</p>' +
  737. '</dd>' +
  738. '</dl>' +
  739. '<div class="point-map" id="pMap100002"></div>' +
  740. '<div class="op">' +
  741. '显示:<a class="abtn-show-text" href="javascript:void(0)">仅文本</a> | <a class="abtn-show-map" href="javascript:void(0)" pid="100002">地图</a>' +
  742. '</div>' +
  743. '</div>');
  744. list.append(stopLi);
  745. $('#contentWrap').empty().append(directionsResult);
  746. $('#contentWrap').append('<div class="note">' +
  747. '<p>实际情况会因道路施工、交通状况、天气或其他事件而与当前路径规划不同,请根据实际情况相应调整计划路线。同时请遵守关于您的路线的所有路标和指示牌。</p>' +
  748. '</div>');
  749. $('#title').append('<p>总路程:' + Math.floor(lineMeter / 1000 * 100) / 100 + '公里</p>');
  750. //绑定 文本|地图 切换事件
  751. $('.abtn-show-text').bind('click', function () {
  752. $(this).parent().parent().find(".point-map").hide();
  753. });
  754. $('.abtn-show-map').bind('click', function () {
  755. if ($(this).attr('show') === 'true') {
  756. $(this).parent().parent().find(".point-map").show();
  757. } else {
  758. $(this).parent().parent().find(".point-map").show();
  759. _this._setPointMap({
  760. pointNum: parseInt($(this).attr('pid')),
  761. mapWrap: 'pMap' + $(this).attr('pid')
  762. });
  763. $(this).attr('show', 'true');
  764. }
  765. });
  766. $('.line-point').bind('mouseenter', function () {
  767. $(this).addClass('hover');
  768. $(this).find('.op').show();
  769. }).bind('mouseleave', function () {
  770. $(this).removeClass('hover');
  771. $(this).find('.op').hide();
  772. });
  773. },
  774. formatDegree: function (value) {
  775. value = Math.abs(value);
  776. var v1 = Math.floor(value); //度
  777. var v2 = Math.floor((value - v1) * 60); //分
  778. var v3 = Math.round((value - v1) * 3600 % 60); //秒
  779. return v1 + '°' + v2 + '\'' + v3 + '"';
  780. },
  781. /**
  782. * 在地图上画出驾车路线
  783. * @type {Function}
  784. * @param options {Object}
  785. * @private
  786. */
  787. _drawCarPolyline: function (options) {
  788. var _this = this;
  789. var points = _this._directionsDataResult.coors;
  790. //转换为可用坐标
  791. var pArray = points.split(',');
  792. var pointLatLng = [];
  793. var dDouble = true;
  794. var temp = [];
  795. for (var i = 0, l = pArray.length; i < l; i++) {
  796. if (dDouble) {
  797. temp = [];
  798. temp.push(pArray[i]);
  799. dDouble = false;
  800. } else {
  801. temp.unshift(pArray[i]);
  802. dDouble = true;
  803. temp = L.latLng(temp);
  804. pointLatLng.push(temp);
  805. }
  806. }
  807. _this.pointLatLng = pointLatLng;
  808. //划起点,终点连线
  809. L.polyline([_this.options.startPoint, pointLatLng[0]], {
  810. color: '#FFFFFF',
  811. weight: options.weight + 2,
  812. opacity: 1
  813. }).addTo(_this._map);
  814. L.polyline([_this.options.stopPoint, pointLatLng[pointLatLng.length - 1]], {
  815. color: '#FFFFFF',
  816. weight: options.weight + 2,
  817. opacity: 1
  818. }).addTo(_this._map);
  819. L.polyline([_this.options.startPoint, pointLatLng[0]], {
  820. color: '#FF6600',
  821. weight: options.weight - 1,
  822. opacity: options.opacity,
  823. dashArray: '1,10'
  824. }).addTo(_this._map);
  825. L.polyline([_this.options.stopPoint, pointLatLng[pointLatLng.length - 1]], {
  826. color: '#FF6600',
  827. weight: options.weight - 1,
  828. opacity: options.opacity,
  829. dashArray: '1,10'
  830. }).addTo(_this._map);
  831. //划线
  832. _this._roadPolylineBg = L.polyline(pointLatLng, {
  833. color: '#FFFFFF',
  834. weight: options.weight + 2,
  835. opacity: 1
  836. });
  837. _this._roadPolylineBg.addTo(_this._map);
  838. _this._roadPolyline = L.polyline(pointLatLng, {
  839. color: options.color,
  840. weight: options.weight,
  841. opacity: options.opacity
  842. });
  843. _this._roadPolyline.addTo(_this._map);
  844. _this._map.fitBounds(_this._roadPolyline.getBounds());
  845. },
  846. /**
  847. * 在地图上描绘点
  848. * @type {Function}
  849. * @param options {Object}
  850. * @private
  851. */
  852. _setMarkers: function (options) {
  853. var _this = this;
  854. switch (options.type) {
  855. case 'start':
  856. var iconUrl = '/images/route/ico_p_2.png';
  857. _this.startMarker = new L.Marker(
  858. options.latLng, {
  859. icon: L.icon({
  860. iconUrl: iconUrl,
  861. iconSize: [25, 25],
  862. iconAnchor: [12, 24],
  863. popupAnchor: [0, -12]
  864. })
  865. }
  866. );
  867. _this.startMarker.addTo(_this._map);
  868. break;
  869. case 'across':
  870. var iconUrl = '/images/route/ico_p_4.png';
  871. var acrossMarker = new L.Marker(
  872. options.latLng, {
  873. icon: L.icon({
  874. iconUrl: iconUrl,
  875. iconSize: [25, 25],
  876. iconAnchor: [12, 24],
  877. popupAnchor: [0, -12]
  878. })
  879. }
  880. );
  881. acrossMarker.addTo(_this._map);
  882. break;
  883. case 'avoid':
  884. var iconUrl = '/images/route/ico_p_5.png';
  885. var avoidMarker = new L.Marker(
  886. options.latLng, {
  887. icon: L.icon({
  888. iconUrl: iconUrl,
  889. iconSize: [25, 25],
  890. iconAnchor: [12, 24],
  891. popupAnchor: [0, -12]
  892. })
  893. }
  894. );
  895. avoidMarker.addTo(_this._map);
  896. break;
  897. case 'stop':
  898. var iconUrl = '/images/route/ico_p_1.png';
  899. _this.stopMarker = new L.Marker(
  900. options.latLng, {
  901. icon: L.icon({
  902. iconUrl: iconUrl,
  903. iconSize: [25, 25],
  904. iconAnchor: [12, 24],
  905. popupAnchor: [0, -12]
  906. })
  907. }
  908. );
  909. _this.stopMarker.addTo(_this._map);
  910. break;
  911. }
  912. },
  913. /**
  914. *设置路径点地图 初始化地图-添加规划路径-添加当前路径点信息(图标+文字提示)
  915. * @type {Function}
  916. * @param options {Object} {pointNum,mapWrap}
  917. * @private
  918. */
  919. _setPointMap: function (options) {
  920. var _this = this;
  921. //地图初始化
  922. var layerName = 'gh';
  923. //var layer2Name = 'satellite-address';
  924. switch (_this.options.mapType) {
  925. case 'gm': //线划
  926. layerName = 'gm';
  927. break;
  928. case 'gr': //影像
  929. layerName = 'gr';
  930. break;
  931. case 'gh': //影像
  932. layerName = 'gh';
  933. break;
  934. case 'gt': //地形
  935. layerName = 'gt';
  936. break;
  937. }
  938. var mapOptions = {
  939. layers: [
  940. L.tileLayer(map23DConfig.tileServerUrl + '/' + layerName + '?l={z}&x={x}&y={y}', {
  941. minZoom: 1,
  942. maxZoom: 19,
  943. subdomains: map23DConfig.tileSubdomains || '',
  944. noWrap: true
  945. })
  946. ],
  947. center: _this._markerObjs[options.pointNum].center,
  948. zoom: 16,
  949. maxZoom: 19,
  950. minZoom: 1,
  951. zoomControl: false
  952. };
  953. var pointMap = new L.Map(
  954. options.mapWrap,
  955. mapOptions
  956. );
  957. //如果是影像图,添加地名图层
  958. // if(_this.options.mapType === '2'){
  959. // L.tileLayer.builtIn.getTileLayer(layer2Name).addTo(pointMap);
  960. // }
  961. //添加缩放控件
  962. L.control.zoom({
  963. position: 'topright'
  964. }).addTo(pointMap);
  965. //添加相应的专题图
  966. if (_this.options.thematicUrl) {
  967. L.tileLayer(_this.options.thematicUrl).addTo(pointMap);
  968. }
  969. //添加路径点
  970. var marker = new L.Marker(_this._markerObjs[options.pointNum].center, {
  971. icon: L.icon({
  972. iconUrl: '/images/route/' + _this._markerObjs[options.pointNum].actionType + '.png',
  973. iconSize: [16, 16],
  974. iconAnchor: [8, 8],
  975. popupAnchor: [0, -8]
  976. })
  977. })
  978. .bindPopup(_this._markerObjs[options.pointNum].popInfo, {
  979. closeButton: false,
  980. maxWidth: 100,
  981. minWidth: 100
  982. });
  983. marker.addTo(pointMap);
  984. //添加规划路径图
  985. L.polyline(_this.pointLatLng, {
  986. color: '#0099ff',
  987. weight: 6,
  988. opacity: 0.8
  989. }).addTo(pointMap);
  990. }
  991. };