mapHolder.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552
  1. /**
  2. * [ONEMAP.M.mapHolder]
  3. * @return {[object]}
  4. * 地图框架引入
  5. * 地图操作
  6. */
  7. define([
  8. 'modDir/service/addressSearch',
  9. 'modDir/service/poiSearch',
  10. 'modDir/service/regionSearch',
  11. 'modDir/service/routeSearch',
  12. 'css!scripts/vendor/map23dlib/map23DView',
  13. 'css!styles/mapHolder'
  14. ], function (addressSearchF, poiSearchF, regionSearchF, routeSearchF) {
  15. /**
  16. * 地图初始化 根据客户端的类型 初始pc端和移动端
  17. * @exports ONEMAP.M.mapHolder
  18. * @type {Object}
  19. */
  20. var modValue = {
  21. mainLayers: null,
  22. leadorStreetViewControl: null,
  23. vact: 'add',
  24. beifen: {}
  25. }
  26. /**
  27. * 地图初始化参数
  28. */
  29. var options = {
  30. center: [39.90743, 116.39134],
  31. zoom: 6
  32. };
  33. //模块状态
  34. var status = {}
  35. /**
  36. * 初始化
  37. * @type {Function}
  38. * @returns {*}
  39. */
  40. function init() {
  41. if (ONEMAP.D.globalSettingData) {
  42. options.center = [
  43. ONEMAP.D.globalSettingData.baseMap2D.center.lat,
  44. ONEMAP.D.globalSettingData.baseMap2D.center.lng
  45. ];
  46. options.zoom = ONEMAP.D.globalSettingData.baseMap2D.zoom;
  47. }
  48. if (Detector.webgl) {
  49. modValue.webgl = true;
  50. } else {
  51. modValue.webgl = false;
  52. }
  53. mapInit();
  54. subscribe();
  55. ONEMAP.C.publisher.publish('mapDragend', 'mapChange');
  56. //移除加载动画
  57. if (navigator.appName == "Microsoft Internet Explorer") {
  58. $('#loadingGif').fadeOut(200, function () {
  59. $('#loadingTop').animate({
  60. top: '0px'
  61. }, 600);
  62. $('#loadingBottom').animate({
  63. top: '100%'
  64. }, 600);
  65. $('#loadingPanel').hide(400);
  66. setTimeout(function () {
  67. }, 600)
  68. });
  69. } else {
  70. setTimeout(function () {
  71. $('#loadingPanel').addClass('open');
  72. setTimeout(function () {
  73. $('#loadingPanel').fadeOut(400);
  74. }, 1000)
  75. }, 200)
  76. }
  77. };
  78. function mapInit() {
  79. if (modValue.webgl) {
  80. //地图加载
  81. map23DControl.init({
  82. mapWrapId: 'mapHolder',
  83. view: {
  84. center: {
  85. lat: options.center[0],
  86. lng: options.center[1]
  87. },
  88. zoom: options.zoom
  89. },
  90. synch: true,
  91. display: {
  92. map2D: false,
  93. map3D: true
  94. }
  95. });
  96. require(['modDir/3dEarth'], function (tdEarth) {
  97. tdEarth.init();
  98. });
  99. } else {
  100. //地图加载
  101. map23DControl.init({
  102. mapWrapId: 'mapHolder',
  103. view: {
  104. center: {
  105. lat: options.center[0],
  106. lng: options.center[1]
  107. },
  108. zoom: options.zoom
  109. },
  110. synch: false,
  111. display: {
  112. map2D: false,
  113. map3D: true
  114. }
  115. });
  116. }
  117. map23DControl.show3D();
  118. $('#map3DWrap').css({
  119. height: $(window).height()
  120. });
  121. //设置地图边界
  122. map2DViewer.map.setMaxBounds([
  123. [84, 360],
  124. [-84, -360]
  125. ]);
  126. if (ONEMAP.D.globalSettingData) {
  127. switch (ONEMAP.D.globalSettingData.baseMap2D.type) {
  128. case 1:
  129. if (Detector.webgl) {
  130. map23DControl.setDefaultTileLayer("gm");
  131. } else {
  132. map2DViewer.setDefaultTileLayer("gm");
  133. }
  134. modValue.mainLayers = "gm";
  135. $("#mapBaseLayerControl .choosemap .name-dem-control .name-control").hide();
  136. $("#mapBaseLayerControl .choosemap .name-dem-control .dem-control").hide();
  137. break;
  138. case 2:
  139. if (Detector.webgl) {
  140. map23DControl.setDefaultTileLayer("gr");
  141. } else {
  142. map2DViewer.setDefaultTileLayer("gr");
  143. }
  144. modValue.mainLayers = "gr";
  145. setTimeout(function () {
  146. $("#mapBaseLayerControl .choosemap .name-dem-control .name-control").show();
  147. $("#mapBaseLayerControl .choosemap .name-dem-control .dem-control").show();
  148. }, 500)
  149. break;
  150. case 3:
  151. if (Detector.webgl) {
  152. map23DControl.setDefaultTileLayer("gt");
  153. } else {
  154. map2DViewer.setDefaultTileLayer("gt");
  155. }
  156. modValue.mainLayers = "gt";
  157. $("#mapBaseLayerControl .choosemap .name-dem-control .name-control").hide();
  158. $("#mapBaseLayerControl .choosemap .name-dem-control .dem-control").hide();
  159. break;
  160. }
  161. }
  162. map2DViewer.map.on('dragend', function () {
  163. var zoom = map2DViewer.map.getZoom();
  164. ONEMAP.C.publisher.publish('mapDragend', 'mapChange');
  165. ONEMAP.C.publisher.publish(map2DViewer.map.getZoom(), 'mapChange23D');
  166. })
  167. map2DViewer.map.on('moveend', function (e) {
  168. ONEMAP.C.publisher.publish('mapMove', 'map2DMoveEnd');
  169. })
  170. map2DViewer.map.on('move', function (e) {
  171. ONEMAP.C.publisher.publish('mapMoveIng', 'map2DMoveIng');
  172. })
  173. //操作地图关闭侧栏
  174. map2DViewer.map.on('click dragend', function () {
  175. ONEMAP.C.publisher.publish('mapDragend', 'layout::sideBar');
  176. $("#openTdSideContent").show();
  177. $("#mapHolder").unbind('mouseover');
  178. })
  179. map2DViewer.map.on('mousemove', function (e) {
  180. var lat = e.latlng.lat;
  181. var lng = e.latlng.lng;
  182. ONEMAP.C.publisher.publish({
  183. lat: lat,
  184. lng: lng,
  185. e: e
  186. }, 'mousemove23D');
  187. })
  188. map2DViewer.map.on('zoomend', function () {
  189. if (map2DViewer.map.getZoom() == map2DViewer.map.options.maxZoom) {
  190. ONEMAP.C.publisher.publish({
  191. type: 'warning',
  192. message: '已达地图最大显示级别'
  193. }, 'noteBar::add');
  194. }
  195. if (map2DViewer.map.getZoom() == map2DViewer.map.options.minZoom) {
  196. ONEMAP.C.publisher.publish({
  197. type: 'warning',
  198. message: '已达地图最小显示级别'
  199. }, 'noteBar::add');
  200. }
  201. ONEMAP.C.publisher.publish(map2DViewer.map.getZoom(), 'userHeatlayerMarker');
  202. ONEMAP.C.publisher.publish(map2DViewer.map.getZoom(), 'mapChange23D');
  203. ONEMAP.C.publisher.publish('zoomend', 'mapChange');
  204. })
  205. //地图点击事件
  206. map2DViewer.map.on('click', function (e) {
  207. var lat = e.latlng.lat,
  208. lng = e.latlng.lng;
  209. var options = {
  210. lng: lng,
  211. lat: lat
  212. }
  213. ONEMAP.C.publisher.publish(options, 'mapClick2D');
  214. });
  215. };
  216. function delMarker(ajaxData) {
  217. $.ajax({
  218. type: "get",
  219. dataType: 'json',
  220. url: onemapUrlConfig.userCenterUrl + '/bookmarker/del',
  221. data: ajaxData,
  222. success: function (data) {
  223. //console.log(data)
  224. }
  225. })
  226. }
  227. /**
  228. * 设置经纬网
  229. */
  230. function setSTLatLngLayer(options) {
  231. var chrome = navigator.userAgent.toLowerCase().match(/chrome/) != null || navigator.userAgent.toLowerCase().match(/firefox/) != null;
  232. if (options == 'show') {
  233. STLatLngLayerControl.changStatus(true);
  234. if (!chrome) {
  235. // locaSpace.SetLatLonGridVisible(true);
  236. // locaSpaceMap.Refresh()
  237. }
  238. } else {
  239. STLatLngLayerControl.changStatus(false);
  240. if (!chrome) {
  241. //locaSpace.SetLatLonGridVisible(false);
  242. //locaSpaceMap.Refresh()
  243. }
  244. }
  245. };
  246. /**
  247. * 右键菜单函数
  248. */
  249. //
  250. function disable() {
  251. return false
  252. };
  253. //从这里出发
  254. function pointStartli(e) {
  255. require(['modDir/tools/toolRouteSearch'], function (toolRouteSearch) {
  256. toolRouteSearch.setStartPoint(e.latlng);
  257. });
  258. };
  259. //添加途经点
  260. function pointAcrossli(e) {
  261. require(['modDir/tools/toolRouteSearch'], function (toolRouteSearch) {
  262. toolRouteSearch.setAcrossPoint(e.latlng);
  263. });
  264. };
  265. //添加规避点
  266. function pointAvoidli(e) {
  267. require(['modDir/tools/toolRouteSearch'], function (toolRouteSearch) {
  268. toolRouteSearch.setAvoidPoint(e.latlng);
  269. });
  270. };
  271. //到这里去
  272. function pointStopli(e) {
  273. require(['modDir/tools/toolRouteSearch'], function (toolRouteSearch) {
  274. toolRouteSearch.setStopPoint(e.latlng);
  275. });
  276. };
  277. //周边搜索
  278. function aroundFindli(e) {
  279. require(['modDir/tools/toolPlaceSearch'], function (toolPlaceSearch) {
  280. toolPlaceSearch.rightClickPopup(e.latlng);
  281. });
  282. };
  283. //加入地图书签
  284. // function addBookMarker() {
  285. //判断是否登录,没有登录进行提示
  286. // if (!ONEMAP.D.isLoad) {
  287. // ONEMAP.C.publisher.publish({
  288. // type: 'warning',
  289. // message: '请登录后使用!'
  290. // }, 'noteBar::add');
  291. // return false;
  292. // }
  293. // require(['modDir/user/userFav'], function (userFav) {
  294. // userFav.addFav();
  295. // });
  296. // };
  297. //鼠标抓手样式
  298. function removeMouseHand() {
  299. map2DViewer.map.off("mousedown", mouseDownStatus);
  300. map2DViewer.map.off("mouseup", mouseUpStatus);
  301. };
  302. function mouseDownStatus() {
  303. if (L.Browser.ie || L.Browser.firefox) {
  304. map2DViewer.map.getContainer().style.cursor = 'url(/images/layout/mouseDown.cur),auto';
  305. } else {
  306. map2DViewer.map.getContainer().style.cursor = 'url(/images/layout/mouseDown.cur) 5 5,auto';
  307. }
  308. }
  309. function mouseUpStatus() {
  310. if (L.Browser.ie || L.Browser.firefox) {
  311. map2DViewer.map.getContainer().style.cursor = 'url(/images/layout/mouseMove.cur),auto';
  312. } else {
  313. map2DViewer.map.getContainer().style.cursor = 'url(/images/layout/mouseMove.cur) 5 5,auto';
  314. }
  315. }
  316. function mouseHand() {
  317. mouseUpStatus();
  318. map2DViewer.map.on("mousedown", mouseDownStatus);
  319. map2DViewer.map.on("mouseup", mouseUpStatus);
  320. };
  321. //清空地图
  322. function cleanMapli() {
  323. ONEMAP.M.myLayerActions.clearLayer();
  324. ONEMAP.C.publisher.publish('', 'cleanMap');
  325. ONEMAP.C.publisher.publish({
  326. modName: 'cleanMap',
  327. }, 'tools:active');
  328. $("#cleanMap").click();
  329. };
  330. /**
  331. * 判断是否是正确的latlng
  332. * @param lat
  333. * @param lng
  334. * @returns {boolean}
  335. */
  336. function isNatureLatLng(lat, lng) {
  337. if (lat > -90 && lat < 90 && lng > -180 && lng < 180) {
  338. return true;
  339. } else {
  340. return false;
  341. }
  342. };
  343. function getContextmenuPlaceName(e) {
  344. contextmenuPlaceName.innerHTML = '正在搜索中...';
  345. var earthLatlng = L.Util.formatEarthLatLng(e.latlng);
  346. if (isNatureLatLng(earthLatlng.lat, earthLatlng.lng)) {
  347. var addressSearch = new addressSearchF();
  348. addressSearch.getAddressInfo({
  349. zoom: map2DViewer.map.getZoom(),
  350. latLng: [earthLatlng.lat, earthLatlng.lng]
  351. }, function (data) {
  352. data = data.data;
  353. contextmenuPlaceName.innerHTML = data.region ? data.region : '未知地点';
  354. });
  355. }
  356. };
  357. function getContextmenuLatlng(e) {
  358. modValue.latlng = e.latlng;
  359. var nLatlng = L.Util.formatHMS(e.latlng);
  360. contextmenuLatlng.innerHTML = nLatlng.lng + ' , ' + nLatlng.lat;
  361. };
  362. function getContextmenuCPJ(e) {
  363. // contextmenuCPJ.innerHTML = "当前磁偏角:正在查询中...";
  364. }
  365. function getCP(altData) {
  366. contextmenuCPJ.innerHTML = '正在查询中...';
  367. var ajaxUrl = onemapUrlConfig.declination;
  368. var newdata = new Date();
  369. var year = newdata.getFullYear();
  370. var month = (newdata.getMonth() + 1) < 10 ? '0' + (newdata.getMonth() + 1) : (newdata.getMonth() + 1);
  371. var day = newdata.getDate() < 10 ? '0' + newdata.getDate() : newdata.getDate();
  372. var ajaxData = {
  373. alt: altData,
  374. lat: modValue.latlng.lat,
  375. lon: modValue.latlng.lng,
  376. startYear: year,
  377. startMonth: month,
  378. startDay: day
  379. };
  380. //console.log(ajaxData);
  381. $.ajax({
  382. url: ajaxUrl + '?alt=' + altData + '&lat=' + ajaxData.lat + '&lon=' + ajaxData.lon + '&startYear=' + year + '&startMonth=' + month + '&startDay=' + day,
  383. type: 'GET',
  384. dataType: 'json',
  385. // data: ajaxData,
  386. })
  387. .done(function (data) {
  388. // //console.log(data);
  389. // //console.log(data.declination);
  390. contextmenuCPJ.innerHTML = "当前磁偏角:" + data.declination;
  391. //console.log("success");
  392. })
  393. .fail(function (data) {
  394. // //console.log(data);
  395. // //console.log("error");
  396. contextmenuCPJ.innerHTML = "当前磁偏角:暂无数据";
  397. })
  398. .always(function () {
  399. //console.log("complete");
  400. });
  401. }
  402. function getContextmenuDEMHeight(e) {
  403. contextmenuDEMHeight.innerHTML = '正在查询中...';
  404. var ajaxUrl = onemapUrlConfig.elevationDataUrl + '/v1.0/geoprocessing/single_elevation';
  405. var ajaxData = {
  406. lat: e.latlng.lat,
  407. lon: e.latlng.lng,
  408. zoom: map23DData.view.zoom,
  409. delta_zoom: 0
  410. };
  411. $.ajax({
  412. type: "get",
  413. dataType: 'json',
  414. data: ajaxData,
  415. url: ajaxUrl,
  416. beforeSend: ONEMAP.V.loading.load(),
  417. success: function (data) {
  418. if (data.code == 0) {
  419. contextmenuDEMHeight.innerHTML = "当前高程: " + data.data + "米";
  420. // getCP(data.data);
  421. } else {
  422. contextmenuDEMHeight.innerHTML = "当前高程: " + data.message;
  423. }
  424. },
  425. completer: ONEMAP.V.loading.loaded()
  426. });
  427. }
  428. /**
  429. * 获取当前点地形数据
  430. * [getTerrainanalysis description]
  431. * @return {[type]} [description]
  432. */
  433. function getTerrainanalysis(e) {
  434. contextmenuTerrainanalysis.innerHTML = '地形查询中...';
  435. var curlatlng = e.latlng.lat + "," + e.latlng.lng
  436. //获取该点坡向
  437. $.ajax({
  438. type: "get",
  439. dataType: 'json',
  440. data: {
  441. locations: curlatlng
  442. },
  443. url: onemapUrlConfig.elevationDataUrl + '/v2.0/geoprocessing/aspect',
  444. beforeSend: ONEMAP.V.loading.load(),
  445. success: function (data) {
  446. if (data.status == 'ok') {
  447. modValue.curPX = data.results[0].aspect.toFixed(3);
  448. contextmenuTerrainanalysis.innerHTML = "坡向: " + modValue.curPX;
  449. $.ajax({
  450. type: "get",
  451. dataType: 'json',
  452. data: {
  453. locations: curlatlng
  454. },
  455. url: onemapUrlConfig.elevationDataUrl + '/v2.0/geoprocessing/slope',
  456. beforeSend: ONEMAP.V.loading.load(),
  457. success: function (data) {
  458. if (data.status == 'ok') {
  459. modValue.PD = data.results[0].slope.toFixed(3);
  460. contextmenuTerrainanalysis.innerHTML = "坡向:" + modValue.curPX + ";坡度:" + modValue.PD;
  461. // getCP(data.data);
  462. } else {
  463. contextmenuTerrainanalysis.innerHTML = "坡向:无数据;坡度:无数据";
  464. }
  465. },
  466. completer: ONEMAP.V.loading.loaded()
  467. });
  468. // getCP(data.data);
  469. } else {
  470. contextmenuTerrainanalysis.innerHTML = "坡向: 无数据";
  471. }
  472. },
  473. completer: ONEMAP.V.loading.loaded()
  474. });
  475. }
  476. /**
  477. * 地图容器重置
  478. * @return {[type]} [description]
  479. */
  480. function mapResize() {
  481. if (ONEMAP.M.pcLayout.status.showFullMap) {
  482. $('#map3DWrap').css({
  483. height: $(window).height(),
  484. top: '0px'
  485. });
  486. } else {
  487. $('#map3DWrap').css({
  488. height: $(window).height(),
  489. top: '0px'
  490. });
  491. }
  492. setTimeout(function () {
  493. map2DViewer.map.invalidateSize();
  494. }, 100);
  495. }
  496. function resetMapCenterZoomLayer(center, zoom) {
  497. map2DViewer.setView({
  498. center: {
  499. lat: center.lat,
  500. lng: center.lon
  501. },
  502. zoom: zoom
  503. })
  504. }
  505. /**
  506. * 注册监听
  507. * @type {Function}
  508. */
  509. function subscribe() {
  510. ONEMAP.C.publisher.subscribe(setSTLatLngLayer, 'mapHolder::STLatLngLayer');
  511. ONEMAP.C.publisher.subscribe(mapResize, 'layout::resize');
  512. };
  513. return ONEMAP.M.mapHolder = {
  514. init: init,
  515. modValue: modValue,
  516. mouseHand: mouseHand,
  517. removeMouseHand: removeMouseHand,
  518. getContextmenuPlaceName: getContextmenuPlaceName,
  519. resetMapCenterZoomLayer: resetMapCenterZoomLayer
  520. };
  521. })