print2.js 33 KB

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